swool(php线上实现简易聊天室功能)

时间:2022-12-24 10:08:35

一.  php后台代码 :

 1 <?php
 2 class Chat
 3 {
 4     const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问
 5     const PART = 81;//端口号
 6     private $server = null;//单例存放websocket_server对象
 7     private $connectList = [];//客户端的id集合
 8     
 9     public function __construct()
10     {
11         //实例化swoole_websocket_server并存储在我们Chat类中的属性上,达到单例的设计
12         $this->server = new swoole_websocket_server(self::HOST, self::PART);
13         //监听连接事件
14         $this->server->on('open', [$this, 'onOpen']);
15         //监听接收消息事件
16         $this->server->on('message', [$this, 'onMessage']);
17         //监听关闭事件
18         $this->server->on('close', [$this, 'onClose']);
19         //设置允许访问静态文件
20         //$this->server->set([
21          //   'document_root' => '/grx/swoole/public',//这里传入静态文件的目录
22         //    'enable_static_handler' => true//允许访问静态文件
23         //]);
24         //开启服务
25         $this->server->start();
26     }
27     /**
28      * 连接成功回调函数
29      * @param $server
30      * @param $request
31      */
32     public function onOpen($server, $request)
33     {
34         echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端
35         $this->connectList[] = $request->fd;//将请求对象上的fd,也就是客户端的唯一标识,可以把它理解为客户端id,存入集合中
36     }
37 
38     /**
39      * 接收到信息的回调函数
40      * @param $server
41      * @param $frame
42      */
43     public function onMessage($server, $frame)
44     {
45         echo $frame->fd . '来了,说:' . $frame->data . PHP_EOL;//打印到我们终端
46         //将这个用户的信息存入集合
47         foreach ($this->connectList as $fd) {//遍历客户端的集合,拿到每个在线的客户端id
48             //将客户端发来的消息,推送给所有用户,也可以叫广播给所有在线客户端
49             $server->push($fd, json_encode(['no' => $frame->fd, 'msg' => $frame->data]));
50         }
51     }
52 
53     /**
54      * 断开连接回调函数
55      * @param $server
56      * @param $fd
57      */
58     public function onClose($server, $fd)
59     {
60         echo $fd . '走了' . PHP_EOL;//打印到我们终端
61         $this->connectList = array_diff($this->connectList, [$fd]);//将断开了的客户端id,清除出集合
62     }
63     
64 }
65 
66 $obj = new Chat();

二 . html 前台页面

 1 <!doctype html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7     <meta charset="utf-8">
 8 
 9     <title>聊天室</title>
10 
11     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
12 
13 </head>
14 
15 <body>
16 
17 <textarea class="log" style="width: 100%; height: 500px;">
18 
19 =======聊天室======
20 
21 </textarea>
22 
23 <input type="button" value="连接" onClick="link()">
24 
25 <input type="button" value="断开" onClick="dis()">
26 
27 <input type="text" id="text">
28 
29 <input type="button" value="发送" onClick="send()">
30 
31 <script>
32 
33     function link(){
34 
35         var url='ws://152.136.159.165:81';
36 
37         socket=new WebSocket(url);
38 
39         socket.onopen=function(){log1('连接成功')}
40 
41         socket.onmessage=function(msg){log(msg.data);console.log(msg);}
42 
43         socket.onclose=function(){log1('断开连接')}
44 
45     }
46 
47     function dis(){
48 
49         socket.close();
50 
51         socket=null;
52 
53     }
54 
55     function log1(var1) {
56         $('.log').append(var1+'\r\n');
57     }
58     function log(var1){
59       var  v=$.parseJSON(var1)
60         $('.log').append('用户'+v['no']+'说:'+v['msg']+'\r\n');
61         $('#text').val('');
62     }
63 
64     function send(){
65         var text=$('#text').val();
66 
67         socket.send(text);
68     }
69 
70     function send2(){
71 
72         var json = JSON.stringify({'type':'php','msg':$('#text2').attr('value')})
73 
74         socket.send(json);
75 
76     }
77 
78 </script>
79 
80 </body>
81 
82 </html>