服务端:
<?phpclass Chat{ const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问 const PART = 8080;//端口号 private $server = null;//单例存放websocket_server对象 public $roles = [ '郭靖','杨过','洪七公','尹志平','赵志敬','丘处机','欧阳锋','一灯大师','黄药师' ]; public function __construct() { //实例化swoole_websocket_server并存储在我们Chat类中的属性上,达到单例的设计 $this->server = new swoole_websocket_server(self::HOST, self::PART); //监听连接事件 $this->server->on('open', [$this, 'onOpen']); //监听接收消息事件 $this->server->on('message', [$this, 'onMessage']); //监听关闭事件 $this->server->on('close', [$this, 'onClose']); //设置允许访问静态文件 $this->server->set([ 'document_root' => '/www/chat1',//这里传入静态文件的目录 'enable_static_handler' => true//允许访问静态文件 ]); //开启服务 $this->server->start(); } /** * 连接成功回调函数 * @param $server * @param $request */ public function onOpen($server, $request) { echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端 $server->push($request->fd,json_encode(['no' => $request->fd, 'msg' =>''])); } /** * 接收到信息的回调函数 * @param $server * @param $frame */ public function onMessage($server, $frame) { $role = $this->getRole($frame->fd); echo $role. '来了,说:' . $frame->data . PHP_EOL;//打印到我们终端 foreach ($server->connections as $fd) {//遍历TCP连接迭代器,拿到每个在线的客户端id //将客户端发来的消息,推送给所有用户,也可以叫广播给所有在线客户端 $msg = $frame->data; $server->push($fd, json_encode(['no' => $frame->fd,'role'=>$role, 'msg' => $msg])); } } public function getRole($fd) { $roles = count($this->roles); $role = ($fd < $roles) ? $this->roles[$fd] : $this->roles[$fd%$roles]; var_dump($role); return $role; } /** * 断开连接回调函数 * @param $server * @param $fd */ public function onClose($server, $fd) { echo $fd . '走了' . PHP_EOL;//打印到我们终端 }}$obj = new Chat();
客户端
<!doctype html><html><head> <meta charset="utf-8"> <title>聊天室</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script></head><body><style> .right { color: blue; display:block; float:right; width:100%; }</style><div style="width: 500px; margin:0 auto;"> <div class="log" id='scrolldIV' style="height:500px;border: 2px solid #ccc;line-height: 1.5em;overflow:auto" >
=======聊天室====== </div> <!--<input type="button" value="连接" onClick="link()">--> <input type="hidden" value="" id="fd"> <!--<input type="button" value="断开" onClick="dis()">--> <div > <input type="text" id="text"> <input type="button" value="发送" onClick="send()" id="submit"> </div></div><script> $(document).keydown(function(event){ if(event.keyCode==13){ $("#submit").click(); } }); $(function () { $("#text").focus(); link(); }) function link() { var url = 'ws://192.168.33.60:8080'; socket = new WebSocket(url); socket.onopen = function (evt) { log1('<div>连接成功</div>') } socket.onmessage = function (msg) { var data = $.parseJSON(msg.data) if(data.msg.length <= 0){ $("#fd").val(data.no); } else { log(data); }
var div = document.getElementById('scrolldIV'); div.scrollTop = div.scrollHeight;
} socket.onclose = function () { log1('<div>断开连接</div>') } } function dis() { socket.close(); socket = null; } function log1(data) { $('.log').append(data); } function log(data) { var nowFd = $("#fd").val(); console.log(data); var role; if(data['no'] == nowFd){ role ="我"; $('.log').append("<div class='right'>" + role+":"+ data['msg'] + '</div>'); } else { $('.log').append("<div >" + data.role+": "+data['msg'] + '</div>'); } } function send() { var text = $('#text').val(); if(text.length > 0){ socket.send(text); $("#text").val(''); } $("#text").focus(); } function send2() { var json = JSON.stringify({'type': 'php', 'msg': $('#text2').attr('value')}) socket.send(json); }</script></body></html>
服务端 启动
php Chat.php
访问客户端的html 浏览器打开
参考 https://www.jianshu.com/p/ac77f05bee56
来源:http://www.cnblogs.com/php-linux/p/11526305.html