利用 webSocket 與 Swoole 打造一個小型聊天室（協程）

nbsp;html&gt;  ???? <meta>???? <title>打工人聊天室</title>??? <!--需要引入jq 文件--><style>     .content {         height: 400px;         max-width: 400px;         overflow: auto;         border-radius: 5px;         border: 1px solid #f0f0f0;     }</style>???????????? <div>???????????????? <p>聊天區域</p>???????????? </div>???????????? 你好打工人：<samp>昵稱</samp>?<br>???????????? 本次連接FD:?<samp></samp>?<br>???????????? <input>???????????? <input>???????????? <button>發送</button>  

<script>     //滾動條最底部     function scrolltest() {         var div = document.getElementById("content");         div.scrollTop = div.scrollHeight;    }     var wsServer = &#39;ws://127.0.0.1:9502/websocket&#39;;     var websocket = new WebSocket(wsServer);     var nickname = Math.random().toString(36).substr(2);     thisFd = &#39;&#39;;    $(&#39;#nickname&#39;).html(nickname);     //點擊發送     function send() {         var msg = $(&#39;#msg&#39;).val();         var data = {             &#39;nickname&#39;: nickname,             &#39;fd&#39;: thisFd,             &#39;data&#39;: msg        }         //生成json 方便后臺接收以及使用         var data = JSON.stringify(data);         websocket.send(data);         //然后清空         $(&#39;#msg&#39;).val(&#39;&#39;);    }     //鏈接成功     websocket.onopen = function (evt) {         var data = {             &#39;msgType&#39;: &#39;open&#39;        }         var data = JSON.stringify(data);         $("#content >p:last-child").after(&#39;<p> 服務器已連接,開始聊天吧 &#39;);         websocket.send(data);    };     //鏈接斷開     websocket.onclose = function (evt) {         $("#content >p:last-child").after(&#39;<p> 服務器已斷開,請重新連接 &#39;);    };     //收到服務器消息     websocket.onmessage = function (evt) {         //握手成功后，會接受到服務端返回的fd ，msgType = 1         //字符串格式化成json         var data = eval(&#39;(&#39; + evt.data + &#39;)&#39;);         // console.log(evt.data);         switch (data.msgType) {             case 1:                 thisFd = data.fd;                 $(&#39;#fd-samp&#39;).html(thisFd);                 $(&#39;#fd&#39;).val(thisFd);                 break;            case 2:                 if (data.nickname == nickname) {                     data.nickname = &#39;我&#39;;                }                 $("#content >p:last-child").after(&#39;<p>&#39; + data.nickname + &#39; 在 &#39; + data.time + &#39; 說：<br>&#39; + data.data + &#39;&#39;);                 //接收到消息自動觸底                 scrolltest();                 break;        }    };     //服務器異常     websocket.onerror = function (evt, e) {         $("#content >p:last-child").after(&#39;<p> 服務器異常 &#39;);    };     //心跳,本次新增     function heartbeat() {        var data = {             &#39;msgType&#39;: &#39;ping&#39;,        }         //生成json 方便后臺接收以及使用         var data = JSON.stringify(data);         websocket.send(data);    }     //30 秒一次     setInterval(heartbeat, 30000);</script>

<?php      //定義獲取當前的id函數     function getObjectId(swooleHttpResponse $response) {         if (PHP_VERSION_ID < 70200) {             $id = spl_object_hash($response);         } else {             $id = spl_object_id($response);        }         return $id;    }     Corun(function () {         $server = new CoHttpServer(&#39;127.0.0.1&#39;, 9502, false);         $server->set([???????????? 'heartbeat_idle_time'??????=&gt;?600,? //?表示一個連接如果600秒內未向服務器發送任何數據，此連接將被強制關閉???????????? 'heartbeat_check_interval'?=&gt;?60,?? //?表示每60秒遍歷一次???????? ]);???????? $server-&gt;handle('/websocket',?function?($request,?$ws)?{???????????? $ws-&gt;upgrade();???????????? global?$wsObjects;???????????? $objectId?=?getObjectId($ws);???????????? $wsObjects[$objectId]?=?$ws;???????????? while?(true)?{???????????????? $frame?=?$ws-&gt;recv();???????????????? if?($frame?===?'')?{???????????????????? unset($wsObjects[$objectId]);???????????????????? $ws-&gt;close();???????????????????? break;???????????????? }?else?if?($frame?===?false)?{???????????????????? echo?'error?:?'?.?swoole_last_error()?.?"n";???????????????????? break;????????????????}? else?{???????????????????? if?($frame-&gt;data?==?'close'?||?get_class($frame)?===?SwooleWebSocketCloseFrame::class)? {???????????????????????? unset($wsObjects[$objectId]);???????????????????????? $ws-&gt;close();???????????????????????? return;???????????????????? }???????????????????? //格式化接收到json???????????????????? $data?=?json_decode($frame-&gt;data);???????????????????? switch?($data-&gt;msgType){???????????????????????? case?'open':???????????????????????????? //鏈接第一次???????????????????????????? $data?=?json_encode([???????????????????????????????? 'fd'?=&gt;?$objectId,???????????????????????????????? 'msgType'?=&gt;?1?? //代表第一次連接，前端處理fd???????????????????????????? ]);???????????????????????????? $ws-&gt;push($data);???????????????????????????? break;???????????????????????? case?'ping':???????????????????????????? //接收到心跳?不作回復 //???????????????????????????? echo??$data-&gt;msgType;???????????????????????????? break;???????????????????????? default?:???????????????????????????? //?原基礎上不動，增加一些自定義???????????????????????????? $data-&gt;msgType?=?2;? //代表服務器端回復???????????????????????????? $data-&gt;time?=?date('Y-m-d?H-i-s');???????????????????????????? $data?=?json_encode($data);???????????????????????????? foreach?($wsObjects?as?$obj)?{???????????????????????????????? $obj-&gt;push($data);???????????????????????????? }???????????????????? }???????????????? }????????????}???????? });???????? $server-&gt;start();???? });