3.WebSocket 簡單運用 · 初心（學習筆記）

>[danger] 使用場景： **前端發送一個比較耗時/不需要立即返回** ![](https://img.kancloud.cn/b0/e5/b0e539337127dbc455824fdf61dcd29e_1049x639.png) >[danger] 簡單運用 * **客戶端代碼** 新建 webSocket.html 粘貼如下代碼： ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> // 實例化 webSocket var websocket = new WebSocket('ws://192.168.108.130:9502'); // 客戶端與服務器建立連接并完成回調 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); }; </script> </body> </html> ~~~ * **服務端代碼** 新建 webSocket.php 粘貼如下代碼： ~~~ <?php // 創建WebSocket Server對象，監聽0.0.0.0:9502端口 $ws = new Swoole\WebSocket\Server('0.0.0.0', 9502); // 監聽WebSocket連接打開事件 $ws->on('open', function ($ws, $request) { var_dump($request->fd, $request->server); $ws->push($request->fd, "hello, welcome\n"); }); // 監聽WebSocket消息事件 $ws->on('message', function ($ws, $frame) { echo "Message: {$frame->data}\n"; $ws->push($frame->fd, "server: {$frame->data}"); }); // 監聽WebSocket連接關閉事件 $ws->on('close', function ($ws, $fd) { echo "client-{$fd} is closed\n"; }); // 啟動 $ws->start(); ~~~ * **執行效果** 1. 開啟服務監聽 `php webSocket.php` ![](https://img.kancloud.cn/0f/5d/0f5d7fc4a0165be38d5d571e93d86a87_445x59.png) 2. 瀏覽器執行 webSocket.html 進行通訊 ``http://192.168.108.130/webSocket.html`` ![](https://img.kancloud.cn/ee/3f/ee3f23990a8a09e0789aa3cdd54fd004_978x271.png)