一. 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=" 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+' '); 57 } 58 function log(var1){ 59 var v=$.parseJSON(var1) 60 $('.log').append('用户'+v['no']+'说:'+v['msg']+' '); 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>