php websocket 教程 · 開發者必備的知識

# websocket php教程 WebSocket 是 HTML5 提供的一種網絡通訊協議，用于服務端與客戶端實時數據傳輸。廣泛用于瀏覽器與服務器的實時通訊，APP與服務器的實時通訊等場景。相比傳統HTTP協議請求響應式通訊，WebSocket協議可以做到實時的雙向通訊，服務端可以在任何時候向客戶端推送數據(HTTP協議需要客戶端發起請求后才能推送)。 PHP作為世界上最好的語言，自然支持WebSocket協議。以下是PHP使用WebSocket協議教程。教程里使用[workerman](https://www.workerman.net/)作為應用容器，workerman具備非常高的性能，它不僅支持WebSocket協議，也支持HTTP協議、Text協議、Frame協議以及其它自定義協議等。 ## 年會PHP WebSocket實時大屏想象一下我們年會上需要一個大屏，顯示每一個公司成員對公司的祝福語。接下來我們就用workerman+WebSocket來實現它。 ## WebSocket數據流轉圖首先我們需要整理下它的數據流轉圖。 ~~~ 員工(手機瀏覽器) <-------websocket------>[服務器]<------websocket------>大屏(電腦瀏覽器投屏) ~~~ 原理比較簡單，手機瀏覽器和電腦瀏覽器分別與服務器建立一個WebSocket連接。手機瀏覽器通過websocket發送文字祝福給服務器，服務器將文字祝福通過websocket推送給電腦瀏覽器并顯示。 ## 新建目錄新建目錄`php-websocket`，然后進入到`php-websocket`目錄中 ## 安裝workerman ~~~ composer require workerman/workerman ~~~ ## 新建一個start.php 文件 ~~~php <?php require __DIR__ . '/vendor/autoload.php'; use Workerman\Worker; use Workerman\Connection\TcpConnection; // 使用websocket協議監聽6161端口 $worker = new Worker('websocket://0.0.0.0:6161'); // 當瀏覽器(包括用戶手機瀏覽器和電腦瀏覽器)發來消息時的處理邏輯 $worker->onMessage = function(TcpConnection $connection, $data) { // 這個靜態變量用來存儲電腦瀏覽器的websocket連接，方便推送使用 static $daping_connection = null; switch ($data) { // 發送 daping 字符串的是電腦瀏覽器，將其連接保存到靜態變量中 case 'daping': $daping_connection = $connection; break; // ping 是心跳數據，用來維持連接，只返回 pong 字符串，無需做其它處理 case 'ping': $connection->send('pong'); break; // 用戶手機瀏覽器發來的祝福語 default: // 直接使用電腦瀏覽器的連接將祝福語推送給電腦 if ($daping_connection) { $daping_connection->send($data); } } }; Worker::runAll(); ~~~ 我們看到服務端代碼很簡潔，電腦瀏覽器發起websocket連接后會發送一個字符串`daping`，告訴服務端我是電腦瀏覽器，服務端將這個連接保存到靜態變量，方便給它推送數據。手機瀏覽器發送的數據會直接用靜態變量保存的電腦瀏覽器連接推送過去。我們注意到有一個心跳數據`ping``pong`的交互，這是由于外網環境很復雜，連接如果長時間不通訊(超過1分鐘)連接就會被路由節點、防火墻等斷開，所以客戶端與服務端需要在1分鐘內至少通訊一次，避免連接斷開，這個就是心跳的作用。服務端開發完畢，接下來是客戶端。 ## 電腦瀏覽器大屏新建`daping.html` ~~~html <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script src="jquery.min.js"></script> <title>WebSocket大屏</title> </head> <body> <ul id="content"> </ul> </body> <script> function connect() { // 與服務端建立WebSocket連接 //(為了方便測試這里ip使用的是127.0.0.1，正式環境請使用外網ip) ws = new WebSocket('ws://127.0.0.1:6161'); // 連接建立后發送daping，表明自己是電腦瀏覽器 ws.onopen = function() { ws.send('daping'); }; // 收到服務端推送的數據后，將數據顯示在瀏覽器里(心跳數據pong除外) ws.onmessage = function (e) { if (e.data !== 'pong') { $($('#content')).append('<li>'+e.data+'</li>'); } }; // 沒隔50秒發送一個心跳數據 ping 給服務器，保持連接 ws.timer = setInterval(function () { ws.send('ping'); }, 50000); // 當連接關閉時清除定時器，并設置1秒后重連 ws.onclose = function () { clearTimeout(ws.timer); setTimeout(connect, 1000); }; } // 執行連接 connect(); </script> </html> ~~~ 雖然我們做了心跳保持連接，但是仍然無法保證連接不被斷開，比如用戶將瀏覽器切到后臺、網絡信號差、服務端重啟等。所以斷線重連是長連接應用必備的功能。所以我們需要在客戶端監聽連接斷開事件`ws.onclose`，在這里執行一個定時器執行重連。 ## 用戶手機瀏覽器端 ~~~html <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>WebSocket大屏</title> <script src="jquery.min.js"></script> </head> <body> <input type="text" id="content"> <input type="button" value="發送" onclick="send()"> <script> function connect() { ws = new WebSocket('ws://127.0.0.1:6161'); ws.onmessage = function (e) { console.log(e.data); }; ws.timer = setInterval(function () { ws.send('ping'); }, 50000); ws.onclose = function () { clearTimeout(ws.timer); setTimeout(connect, 1000); }; } // 通過WebSocket連接將數據發送給服務端 function send() { ws.send($('#content').val()); $('#content').val(''); } connect(); </script> </body> </html> ~~~ 用戶手機瀏覽器端和電腦瀏覽器端代碼類似。多個一個send函數，用來將數據發送給服務端。 ## 快速測試 > html代碼里使用了jquery，請自行下載放置到本地。終端運行`php start.php start -d`，啟動workerman的websocket服務。終端運行`php -S 0.0.0.0:7171`，這樣利用`php cli`啟動了一個webserver監聽7171端口。瀏覽器訪問`http://127.0.0.1:7171/daping.html`和`http://127.0.0.1:7171/user.html` 這樣在`user.html`發送的文字會展示在`daping.html`上 > 如果頁面訪問超時，請在安全組或者防火墻沒有放行6161 7171端口端口 ![](https://www.workerman.net/upload/img/20211207/0761aee21a9692.png) ![](https://www.workerman.net/upload/img/20211207/0761aee25a25a4.png) ## 補充以上是PHP實現WebSocket的一個教程，主要講解workerman的websocket協議用法。有些細節沒有做處理，比如用戶鑒權，傳遞用戶昵稱頭像等。 ## 其它相關websocket推送示例 [https://www.workerman.net/doc/workerman/components/channel-examples.html](https://www.workerman.net/doc/workerman/components/channel-examples.html) [https://www.workerman.net/doc/workerman/components/channel-examples2.html](https://www.workerman.net/doc/workerman/components/channel-examples2.html) [https://www.workerman.net/q/508](https://www.workerman.net/q/508) [https://www.workerman.net/web-sender](https://www.workerman.net/web-sender) [https://www.workerman.net/doc/gateway-worker/push-in-other-project.html](https://www.workerman.net/doc/gateway-worker/push-in-other-project.html) 如果你想用PHP編寫復雜的WebSocket即時通訊，可以使用[GatewayWorker](https://www.workerman.net/doc/gateway-worker/)，它是基于workerman開發的一個分布式即時通訊框架，包含眾多常用的API接口。更多workerman相關請參考[workerman手冊](https://www.workerman.net/doc/workerman/)