swoole学习之websocket服务端和客户端

桃扇骨 2022-12-19 14:27 389阅读 0赞

### swoole学习之websocket服务端和客户端 ###

*   *  websocket 服务端
     *  websocket 客户端
     *  websocket设置参数
     *  websocket封装基础类

## websocket 服务端 ##

websocketService.php

<?php
    //实例化 websocket 服务
    $server = new Swoole\WebSocket\Server("0.0.0.0", 9502);
    //监听websocket链接打开事件
    $server->on('open', function (Swoole\WebSocket\Server $server, $request) { 
        echo "<ore>";
        print_r($request);
        echo "server: handshake success with fd{ $request->fd}\n";
    });
    
    //监听websocket消息事件
    $server->on('message', function (Swoole\WebSocket\Server $server, $frame) { 
    
        echo "<ore>";
        print_r($frame);
    
        echo "receive from { $frame->fd}:{ $frame->data},opcode:{ $frame->opcode},fin:{ $frame->finish}\n";
        //向websocket链接的客户端推送数据
        $server->push($frame->fd, "this is websocket server");
    });
    
    //关闭事件
    $server->on('close', function ($ser, $fd) { 
        echo "client { $fd} closed\n";
    });
    
    //开启服务
    $server->start();
    ?>

> 客户端向服务器端发送信息时，服务器端触发 onMessage 事件回调  
> 服务器端可以调用 $server->push() 向某个客户端（使用 $fd 标识符）发送消息

先启动httpServer服务

php server/httpService.php

再启动websocketserver服务

php server/websocketService.php

## websocket 客户端 ##

websocket.html

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>swoole学习之websocket_server服务器代码_徊忆羽菲的博客-CSDN博客</title>
    </head>
    <body>
    <h1>websocket服务器测试</h1>
    
    <script type="application/javascript"> //定义一个websocket服务器的路径 var wsUrl = 'ws://20.20.24.131:9502'; var ws_server = new WebSocket(wsUrl); //实例化open属性 判断是否链接websocket成功 ws_server.onopen = function (evt) { //发送数据 ws_server.send('hello websocket！'); console.log('connect-swoole-websocket-success'); } //实例化onmessage ws_server.onmessage = function (evt) { console.log('connect-swoole-websocket-message', evt.data); } //实例化close ws_server.onclose = function (evt) { console.log('connect-swoole-websocket-close'); } //实例化close ws_server.onerror = function (evt, e) { console.log('connect-swoole-websocket-error', e.errorCode); } </script>
    </body>
    </html>

在浏览器中访问

> http://20.20.24.131:9501/websocket.html

可以看到console.log打印的日志信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]消息头中返回的响应信息  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]

## websocket设置参数 ##

在websocketService.php 中配置参数

<?php
    //实例化 websocket 服务
    $server = new Swoole\WebSocket\Server("0.0.0.0", 9502);
    
    //配置参数
    $server->set([
        'enable_static_handler' => true,
        'document_root' => '/data/web/swoole_mooc/static'
    ]);

保存，重新启动websocket服务器，可以关闭http服务器， 无需启动http服务器，在浏览器中访问：

> http://20.20.24.131:9502/websocket.html

注意：域名端口号需要更换成websocket服务器的端口号，而不是之前的9501

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 3]  
查看websocket服务端返回数据

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 4]

## websocket封装基础类 ##

创建 websocket.Class.php

<?php
    /*优化websocket基础类 * * */
    
    class Ws
    { 
    
        //定义host
        const HOST = '0.0.0.0';
        //定义端口号
        const PORT = 9502;
        //定义变量
        public $ws = '';
    
        //构造函数
        public function __construct()
        { 
            $this->ws = new Swoole\WebSocket\Server(self::HOST, self::PORT);
            //定义方法
            $this->ws->on('open', [$this, 'onOpen']);
            $this->ws->on('message', [$this, 'onMessage']);
            $this->ws->on('close', [$this, 'onClose']);
            //启动服务
            $this->ws->start();
        }
    
        //定义链接websocket服务事件的方法
        public function onOpen($ws, $request)
        { 
            echo "<pre>";
            print_r($request);
        }
    
    
        //定义websocket服务消息事件的方法
        public function onMessage($ws, $frame)
        { 
            echo "frame<pre>";
            print_r($frame);
            echo '获取到客户端发送过来的数据' . $frame->data;
            //给客户端回应，发送内容
            $ws->push($frame->fd, 'wesocketServe-push-data:www.qipa250.com');
        }
    
        //定义关闭websocket服务的方法
        public function onClose($ws, $fd)
        { 
            echo '客户端：' . $fd . '断开了websocket服务！';
        }
    
    }
    
    //实例化
    
    $ws = new Ws();
    
    ?>

以上代码，仍然依赖httpserver，所以需要启动httpserver

> php server/httpService.php

再启动websocket服务

> php server/websocket.Class.php

websocket客户端 代码  
websocket.html

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>swoole学习之websocket_server服务器代码_徊忆羽菲的博客-CSDN博客</title>
    </head>
    <body>
    <h1>websocket服务器基础类测试</h1>
    
    <script type="application/javascript"> //定义一个websocket服务器的路径 var wsUrl = 'ws://20.20.24.131:9502'; var ws_server = new WebSocket(wsUrl); //实例化open属性 判断是否链接websocket成功 ws_server.onopen = function (evt) { //发送数据 ws_server.send('hello websocket！'); console.log('connect-swoole-websocket-success'); } //实例化onmessage ws_server.onmessage = function (evt) { console.log('connect-swoole-websocket-message', evt.data); } //实例化close ws_server.onclose = function (evt) { console.log('connect-swoole-websocket-close'); } //实例化close ws_server.onerror = function (evt, e) { console.log('connect-swoole-websocket-error', e.errorCode); } </script>
    
    </body>
    </html>

在浏览器中预览效果

> http://20.20.24.131:9501/websocket.html

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 5]  
可以看到，连接websocket成功，且接收到了来自服务端的数据信息

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/1ca4e93a6ef846349b34c60c7119dfb7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/fd1780df49414d158ad0a679f5f3c979.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201108152846930.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/20201108152909990.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201108152938186.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n_size_16_color_FFFFFF_t_70_pic_center 5]: https://img-blog.csdnimg.cn/20201108160023298.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b19xaWFuZ3FpYW5n,size_16,color_FFFFFF,t_70#pic_center