【原】【Swoole系列2.4】WebSocket服務(wù)

硬核項(xiàng)目經(jīng)理 2022-07-14 發(fā)布于湖南

展開全文

WebSocket服務(wù)

對(duì)于 Web 應(yīng)用來(lái)說，最主流的當(dāng)然就是我們之前學(xué)習(xí)過的 Http、TCP、UDP 這一類的應(yīng)用。但是，最近這些年，特別是 HTML5 成為主流之后，WebSocket 應(yīng)用日益豐富起來(lái)。要知道，之前我們?cè)谧龊笈_(tái)時(shí)，如果要做消息通知之類的應(yīng)用，全都是使用 JQuery 來(lái)進(jìn)行 Ajax 輪詢的。對(duì)于后臺(tái)來(lái)說，這么做問題不大，但是如果你是要在前端頁(yè)面做類似的功能，特別是一些客服功能的話，那可就費(fèi)勁了。

關(guān)于 WebSocket 的好處我也不多說了，大家可以自己去查閱一下相關(guān)的資料。最主要的是，它建立起來(lái)的是一個(gè)持久的長(zhǎng)鏈接，不需要像輪詢一樣不停地發(fā)送 Http 請(qǐng)求，能夠非常有效地節(jié)省服務(wù)器資源。

之前我們?cè)?Laravel 系列課程中就學(xué)習(xí)過它的廣播系統(tǒng) ，這個(gè) 廣播系統(tǒng) 正是基于 WebSocket 來(lái)實(shí)現(xiàn)的，并且還運(yùn)用了 Laravel 框架中的隊(duì)列、事件等等一系列的功能。在當(dāng)時(shí)，我們還要下載一個(gè) larave-echo-server ，大家對(duì)這個(gè)還有印象不？這個(gè)東西也是一個(gè) WebSocket 服務(wù)端，它通過消化 Laravel 中的隊(duì)列來(lái)實(shí)現(xiàn) WebSocket 的消息發(fā)送。

在 Swoole 中，搭建起一個(gè) WebSocket 服務(wù)非常簡(jiǎn)單，話不多說，我們直接就搭建起來(lái)看看吧。

服務(wù)端

對(duì)于服務(wù)端來(lái)說，WebSocket 服務(wù)也是繼承自 Server 對(duì)象的，所以它的大部分方法都差不多，同樣我們也是需要像 TCP 一樣去監(jiān)聽一些事件的。

//創(chuàng)建WebSocket Server對(duì)象，監(jiān)聽0.0.0.0:9501端口
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9501);

//監(jiān)聽WebSocket連接打開事件
$ws->on('Open', function ($ws, $request) {
    while(1){
        $time = date("Y-m-d H:i:s");
        $ws->push($request->fd, "hello, welcome {$time}\n");
        Swoole\Coroutine::sleep(10);
    }
});

//監(jiān)聽WebSocket消息事件
$ws->on('Message', function ($ws, $frame) {
    echo "Message: {$frame->data}\n";
    $ws->push($frame->fd, "server: {$frame->data}");
});

//監(jiān)聽WebSocket連接關(guān)閉事件
$ws->on('Close', function ($ws, $fd) {
    echo "client-{$fd} is closed\n";
});


$ws->start();

在 WebSocket 中，監(jiān)聽的主要是 Open 建立連接、Message 消息推送和 Close 連接關(guān)閉的事件。

當(dāng)我們的客戶端連接到服務(wù)時(shí)，就會(huì)觸發(fā) Open 監(jiān)聽，其中在 $request 中會(huì)返回連接的 fd 信息，這是一個(gè)句柄，或者說是標(biāo)識(shí)我們的客戶端的一個(gè)標(biāo)志。然后我們?cè)?Open 監(jiān)聽中每隔十秒去發(fā)送一條消息，假裝是一個(gè)后臺(tái)的通知信息。

注意，在這里我們不是直接使用 PHP 的那個(gè) sleep() 函數(shù)，為什么呢？因?yàn)樵?Swoole 應(yīng)用中，sleep() 這一類的原生函數(shù)會(huì)直接暫停整個(gè)進(jìn)程的執(zhí)行，在暫停的過程中，是無(wú)法接收到任何請(qǐng)求消息的，不管你是進(jìn)程、線程還是協(xié)程，都會(huì)暫停住。而我們監(jiān)聽的事件，實(shí)際上是在事件內(nèi)部開了不同的協(xié)程來(lái)處理請(qǐng)求的。所以，我們應(yīng)該使用 Coroutine::sleep() 這個(gè) Swoole 提供的休眠函數(shù)，它會(huì)只針對(duì)當(dāng)前的協(xié)程進(jìn)行休眠。

當(dāng)然，你可以嘗試一下使用普通的 sleep() ，你也能正常接收到 push() 的信息，但是，我們后面監(jiān)聽 Message 這一塊的內(nèi)容你可能就無(wú)法測(cè)出來(lái)了。我們馬上來(lái)說這 Message 的監(jiān)聽。

它主要監(jiān)聽的是客戶端發(fā)來(lái)的信息，當(dāng)接收到客戶端發(fā)來(lái)的信息后，我們直接打印信息，并將客戶端發(fā)來(lái)的信息再返回給客戶端表示我們收到信息了。

最后，在連接關(guān)閉的時(shí)候會(huì)監(jiān)聽到 Close 事件中。

整個(gè) WebSocket 最核心的內(nèi)容就是監(jiān)聽這三個(gè)事件?，F(xiàn)在你可以在測(cè)試環(huán)境中將服務(wù)運(yùn)行起來(lái)了。我們馬上再來(lái)寫前端代碼實(shí)現(xiàn)客戶端。

前端

對(duì)于客戶端來(lái)說，我們也使用最基礎(chǔ)的原生 JS 中的 WebSocket 寫法來(lái)測(cè)試。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<input type="text" id="txt"/><br/>
<button onclick="send()">發(fā)送</button>

<p id="response">

</p>

<script type="text/javascript">
  var wsServer = 'ws://192.168.56.133:9501';
  var websocket = new WebSocket(wsServer);
  websocket.onopen = function (evt) {
    console.log("Connected to WebSocket server.");
  };

  websocket.onclose = function (evt) {
    console.log("Disconnected");
  };

  websocket.onmessage = function (evt) {
    console.log('Retrieved data from server: ' + evt.data);
    document.getElementById("response").innerHTML = document.getElementById("response").innerHTML + 'Retrieved data from server: ' + evt.data + '<br/>';
  };

  websocket.onerror = function (evt, e) {
    console.log('Error occured: ' + evt.data);
  };


  function send(){
      websocket.send(document.getElementById('txt').value);
  }

</script>
</body>
</html>

在這個(gè)頁(yè)面中，定義了一個(gè)文本輸入框和一個(gè)按扭用于發(fā)送消息給服務(wù)端。另外下面還有一個(gè) p 標(biāo)簽用于顯示服務(wù)端的消息內(nèi)容。

在 JS 代碼中，我們直接使用的就是原生的 WebSocket 對(duì)象。它同樣是需要監(jiān)聽三個(gè)主要的方法，和服務(wù)端也是一一對(duì)應(yīng)的，分別就是 onopen()、onclose() 和 onmessage() 方法。另外還有一個(gè) send() 方法是上面的按扭調(diào)用的，當(dāng)點(diǎn)擊按扭后，將文本輸入框中的內(nèi)容通過 WebSockent 的 send() 方法發(fā)送給服務(wù)端。

這個(gè)頁(yè)面運(yùn)行起來(lái)是這個(gè)樣子的。

正常情況下現(xiàn)在已經(jīng)建立起了和服務(wù)端的 WebSocket 通信，所以在按扭下方的 p 標(biāo)簽中會(huì)有內(nèi)容一直在打印出來(lái)。我們可以在文本框中輸入文字，馬上就能看到輸入的文字信息被返回回來(lái)了。

總結(jié)

怎么樣，還是比較簡(jiǎn)單吧，我們非常輕松地就搭起來(lái)了一個(gè) WebSocket 服務(wù)?，F(xiàn)在還是在入門學(xué)習(xí)階段，所以東西還比較簡(jiǎn)單，不過話說回來(lái)，確實(shí)在官方文檔上對(duì)于這些服務(wù)也沒什么太多的內(nèi)容，畢竟核心的確實(shí)就是去監(jiān)聽?zhēng)讉€(gè)事件就好了，其它的工作框架在底層都幫我們解決好了。

好吧，沒法去研究底層，畢竟自己的 C/C++ 水平也就僅限于寫個(gè)冒泡的水平了（也不一定能寫出來(lái)了...）。不過沒關(guān)系，我們一起加油，至少要把 Swoole 的基礎(chǔ)應(yīng)用都掌握好了，而且今天我們又發(fā)現(xiàn)了一個(gè)問題，那就是普通的 sleep() 函數(shù)在 Swoole 中的使用是會(huì)有問題的，這不也就是一種收獲嘛。

測(cè)試代碼：

https://github.com/zhangyue0503/swoole/blob/main/2.%E5%9F%BA%E7%A1%80/source/2.4WebSocket%E6%9C%8D%E5%8A%A1.php

https://github.com/zhangyue0503/swoole/blob/main/2.%E5%9F%BA%E7%A1%80/source/2.4WebSocket%E5%89%8D%E7%AB%AF.html

參考文檔：

https://wiki./#/start/start_ws_server