swoole用WebSocket服务器搭建一个简易的聊天室功能

浅浅的花香味﹌ 2023-10-06 19:07 11阅读 0赞

#### swoole用WebSocket服务器搭建一个简易的聊天室功能 ####

*  域名无ssl加密
 *  域名有ssl加密
 *  开启服务端常链接
 *  浏览器分别开启两个客户端窗口，进行聊天

## 域名无ssl加密 ##

WS.php写服务端代码

<?php
    class WS{
        
        private $ws = null;
        
        public function __construct(){
        
            //创建WebSocket Server对象，监听0.0.0.0:9502端口
            $this->ws = new Swoole\WebSocket\Server('0.0.0.0', 9502);
            //监听WebSocket连接打开事件
            $this->ws->on('Open', [$this, "onOpen"]);
            //监听WebSocket消息事件
            $this->ws->on('Message', [$this, "onMessage"]);
            //监听WebSocket连接关闭事件
           $this->ws->on('Close', [$this, "onClose"]);
            //启动服务器
           $this->ws->start();
        }
        public function onOpen($ws, $request){
        
            var_dump($request->fd, $request->get, $request->server);
            $ws->push($request->fd, "欢迎客户端： {
          $request->fd}\n");
        }
        public function onMessage($ws, $frame){
        
            echo "信息: {
          $frame->data}\n";
            foreach($ws->connections as $fd){
        
                //$fd指单前用户，$frame->fd外来连接的用户
                if($fd == $frame->fd){
        
                    $ws->push($fd, "我: {
          $frame->data}");
                }else{
        
                    $ws->push($fd, "对方: {
          $frame->data}");
                }
            }
        }
        public function onClose($ws, $fd){
        
            echo "客服端：{
          $fd} 关闭\n";
        }
    }
    new WS();

chat.html写客户端代码

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>简易聊天室</title>
    </head>
    <div id="welcome"></div>
    <input type="text" id="input"/>
    <input type="buton" onclick="send()" value="发送"/>
    <div id="message"></div>
    <body>
    </body>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var wsServer = 'ws://xiangyu.huangzhongxin.cn:9502';
        var websocket = new WebSocket(wsServer);
        websocket.onopen = function (res) {
        
            $("#welcome").append("<h1>连接成功！欢迎</h1>");
        };
        websocket.onclose = function (res) {
        
            $("#message").append("<h3>连接关闭</h3>");
        };
        websocket.onmessage = function (res) {
        
            $("#message").append("<h3>" + res.data + "</h3>");
        };
        websocket.onerror = function (res) {
        
            $("#message").append("<h3>" + res + "</h3>");
        };
        function send(){
        
            websocket.send($('#input').val());
        }
    </script>
    </html>

## 域名有ssl加密 ##

WS.php写服务端代码

<?php
    class WS{
        
        private $ws = null;
        
        public function __construct(){
        
            //创建WebSocket Server对象，监听0.0.0.0:9502端口
            $this->ws = new Swoole\WebSocket\Server('0.0.0.0', 9502, SWOOLE_PROCESS, SWOOLE_SOCK_TCP | SWOOLE_SSL);
            
            //配置ssl文件路径,记得修改为自己ssl的路径
            $this->ws->set([
                'ssl_cert_file' => '/www/server/panel/vhost/cert/xxxxx/fullchain.pem',
                'ssl_key_file' => '/www/server/panel/vhost/cert/xxxxx/privkey.pem',
            ]);
            
            //监听WebSocket连接打开事件
            $this->ws->on('Open', [$this, "onOpen"]);
            
            //监听WebSocket消息事件
            $this->ws->on('Message', [$this, "onMessage"]);
            
            //监听WebSocket连接关闭事件
           $this->ws->on('Close', [$this, "onClose"]);
            
            //启动服务器
           $this->ws->start();
        }
        
        public function onOpen($ws, $request){
        
            var_dump($request->fd, $request->get, $request->server);
            $ws->push($request->fd, "欢迎客户端： {
          $request->fd}\n");
        }
        
        public function onMessage($ws, $frame){
        
            echo "信息: {
          $frame->data}\n";
            foreach($ws->connections as $fd){
        
                //$fd指单前用户，$frame->fd外来连接的用户
                if($fd == $frame->fd){
        
                    $ws->push($fd, "我: {
          $frame->data}");
                }else{
        
                    $ws->push($fd, "对方: {
          $frame->data}");
                }
            }
            
        }
        
        public function onClose($ws, $fd){
        
            echo "客服端：{
          $fd} 关闭\n";
        }
    }
    new WS();

chat.html写客户端代码

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>简易聊天室</title>
    </head>
    <div id="welcome"></div>
    <input type="text" id="input"/>
    <input type="buton" onclick="send()" value="发送"/>
    <div id="message"></div>
    <body>
    </body>
    
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
        var wsServer = 'wss://xiangyu.huangzhongxin.cn:9502';
        var websocket = new WebSocket(wsServer);
        websocket.onopen = function (res) {
        
            $("#welcome").append("<h1>连接成功！欢迎</h1>");
        };
        
        websocket.onclose = function (res) {
        
            $("#message").append("<h3>连接关闭</h3>");
        };
        
        websocket.onmessage = function (res) {
        
            $("#message").append("<h3>" + res.data + "</h3>");
        };
        
        websocket.onerror = function (res) {
        
            $("#message").append("<h3>" + res + "</h3>");
        };
        
        function send(){
        
            websocket.send($('#input').val());
        }
    </script>
    </html>

## 开启服务端常链接 ##

php WS.php

注：如果开启不了可能是9502端口被占用了，杀死即可

netstat -anp  | grep  9501  	//查看端口号 9501

## 浏览器分别开启两个客户端窗口，进行聊天 ##

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][03a536faa91e4417b3dffecac38fddd5.png]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/f2e1448314a4491db5299e046f1eb6ee.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[03a536faa91e4417b3dffecac38fddd5.png]: https://img-blog.csdnimg.cn/03a536faa91e4417b3dffecac38fddd5.png