swoole寫聊天室，簡單粗暴 · 個人博客

``` ?<?php # 定義clientFds數組保存所有websocket連接 $clientFds = []; # 創建websocket服務 $server = new swoole_websocket_server("0.0.0.0", 9300); # 握手成功觸發回調函數 $server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) { # echo "server: handshake success with fd{$request->fd}\n"; # 將所有客戶端連接標識，握手成功后保存到數組中 $clientFds[] = $request->fd; }); # 收到消息觸發回調函數 $server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) { # echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n"; # $server->push($frame->fd, "this is server"); # 當有用戶發送信息，發送廣播通知所有用戶 foreach ($clientFds as $fd) { $server->push($fd, $frame->data); } }); # 關閉連接觸發回調函數 $server->on('close', function ($ser, $fd) use (&$clientFds) { # echo "client {$fd} closed\n"; # 關閉會話銷毀標識fd # 根據value 去數組中找對應的key $res = array_search($fd, $clientFds, true); unset($clientFds[$res]); }); # 啟動websocket服務 $server->start(); ``` 用 php 空格文件名來運行上面的代碼。 HTML： ~~~html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket聊天室</title> </head> <body> 聊天窗口： <div id="main" style="width:600px;height: 300px; overflow: auto;border: solid 2px black;"> </div> <textarea id="textarea" placeholder="在這里輸入信息"></textarea> <br /> <input type="button" value="發送聊天" id="send"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> var myDate = new Date(); var name = prompt("請輸入您的昵稱", ""); //彈出input框 // 打開一個 web socket var ws = new WebSocket("ws://118.24.102.209:9300"); ws.onopen = function () { console.log("連接成功"); }; //收到消息觸發回調 ws.onmessage = function (evt) { var data = evt.data; console.log("收到socket服務消息，內容：" + data); $('#main').append("<p>" + data + "</p>"); }; $('#send').click(function(){ // alert(123); var data = $('#textarea').val(); console.log(name); console.log(data); ws.send(name + ":" + data); }) ws.onclose = function () { // 關閉 websocket console.log("連接已關閉..."); }; </script> </body> </html> ~~~ ![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點擊并拖拽以移動") 當輸入名字后，F12查看我們輸出的信息，顯示的是websocket連接成功。這時我們多開幾個窗口連接我們的websocket服務器。并輸入名字測試，在聊天窗口上觀察數據。 ![](https://img-blog.csdnimg.cn/20191028134543336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTM1ODA3,size_16,color_FFFFFF,t_70)![](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw== "點擊并拖拽以移動")?編輯 ?