简易聊天室
一: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>