毛宏钢

导航

简易聊天室

一:PHP服务端,通过liunx服务器运行

 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 * 连接成功回调函数
30 * @param $server
31 * @param $request
32 */
33 public function onOpen($server, $request)
34 {
35 echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端
36 $this->connectList[] = $request->fd;//将请求对象上的fd,也就是客户端的唯一标识,可以把它理解为客户端id,存入集合中
37 }
38 
39 /**
40 * 接收到信息的回调函数
41 * @param $server
42 * @param $frame
43 */
44 public function onMessage($server, $frame)
45 {
46 echo $frame->fd . '来了,说:' . $frame->data . PHP_EOL;//打印到我们终端
47 //将这个用户的信息存入集合
48 foreach ($this->connectList as $fd) {//遍历客户端的集合,拿到每个在线的客户端id
49 //将客户端发来的消息,推送给所有用户,也可以叫广播给所有在线客户端
50 $server->push($fd, json_encode(['no' => $frame->fd, 'msg' => $frame->data]));
51 }
52 }
53 
54 /**
55 * 断开连接回调函数
56 * @param $server
57 * @param $fd
58 */
59 public function onClose($server, $fd)
60 {
61 echo $fd . '走了' . PHP_EOL;//打印到我们终端
62 $this->connectList = array_diff($this->connectList, [$fd]);//将断开了的客户端id,清除出集合
63 }
64 
65 }
66 
67 $obj = new Chat();
68 
69  

二:客户端访问聊天室

 

 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.130.131: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 }
62 
63 function send(){
64 var text=$('#text').val();
65 
66 socket.send(text);
67 }
68 
69 function send2(){
70 
71 var json = JSON.stringify({'type':'php','msg':$('#text2').attr('value')})
72 
73 socket.send(json);
74 
75 }
76 
77 </script>
78 
79 </body>
80 
81 </html>

 

posted on 2019-07-16 14:11  毛宏钢  阅读(243)  评论(0编辑  收藏  举报