一. php後臺代碼 :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 前臺頁面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>