使用Swoole的Websocket監聽使用者連線狀態

柳旦旦發表於2021-01-20
Web

什麼是 Swoole？

Swoole：PHP 協成框架

Swoole 使 PHP 開發人員可以編寫高效能的高併發的 TCP、UDP、Unix Socket、HTTP、 WebSocket 等服務，讓 PHP 不在侷限於 Web 領域。

Swoole4 協程的成熟將 PHP 帶入了前所未有的時期， 為效能的提升提供了獨一無二的可能性。Swoole 可以廣泛應用於網際網路、行動通訊、雲端計算、 網路遊戲、物聯網（IOT）、車聯網、智慧家居等領域。使用 PHP + Swoole 可以使企業 IT 研發團隊的效率大大提升，更加專注於開發創新產品。

​ — 摘自 Swoole 官網

Websocket 服務

程式碼

<?php
$ws = new Swoole\WebSocket\Server("0.0.0.0", 9502);

//監聽WebSocket客戶端連線開啟事件
$ws->on('open', function ($ws, $request) {
    $ws->push($request->fd, "連線成功");
    echo "客戶端：$request->fd 連線成功\n";
});

//監聽WebSocket客戶端訊息事件
$ws->on('message', function ($ws, $frame) {
    $ws->push($frame->fd, "server: {$frame->data}");
});

//監聽WebSocket客戶端連線關閉事件
$ws->on('close', function ($ws, $fd) {
    echo "客戶端：{$fd} 斷開連線\n";
});

//啟動WebSocket 服務
$ws->start();

解析

第一步

建立 websocket 伺服器物件，監聽 0.0.0.0:9502 埠

$ws = new Swoole\WebSocket\Server("0.0.0.0", 9502);

第二步

監聽 WebSocke t客戶端連線開啟事件

$ws->on('open', function ($ws, $request) {
    $ws->push($request->fd, "連線成功");
    echo "客戶端：$request->fd 連線成功\n";
});

第三步

監聽 WebSocket 客戶端訊息事件

$ws->on('message', function ($ws, $frame) {
    $ws->push($frame->fd, "server: {$frame->data}");
});

第四步

監聽 WebSocket 客戶端連線關閉事件

$ws->on('close', function ($ws, $fd) {
    echo "客戶端：{$fd} 斷開連線\n";
});

第五步

啟動 WebSocket 服務

$ws->start();

客戶端連線 Websocket 服務

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
客戶端頁面
<script>
    var wsServer = 'ws://127.0.0.1:9502';
    var websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt) {
        console.log("WebSocket 連線成功！");
    };

    websocket.onclose = function (evt) {
        console.log("WebSocket 連線關閉！");
    };

    websocket.onmessage = function (evt) {
        console.log('接收到訊息內容: ' + evt.data);
    };

    websocket.onerror = function (evt, e) {
        console.log('連線出現錯誤: ' + evt.data);
    };

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

解析

第一步

js 連線 websocket 服務

var wsServer = 'ws://127.0.0.1:9502';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) {
    console.log("WebSocket 連線成功！");
};

第二步

js 客戶端 websocket 連線關閉事件

websocket.onclose = function (evt) {
    console.log("WebSocket 連線關閉！");
};

第三步

js 客戶端接收 websocket 訊息內容事件

websocket.onmessage = function (evt) {
    console.log('接收到訊息內容: ' + evt.data);
};

第四步

js 客戶端連線 websocket 異常捕獲

websocket.onerror = function (evt, e) {
    console.log('連線出現錯誤: ' + evt.data);
};

結果

啟動 WebSocket 服務

php wsServer.php

訪問 客戶單頁面 wsServer.html

image-20200730145542273

服務端

image-20200730145706912

關閉客戶單頁面 wsServer.html，服務端結果

image-20200730145805852

本作品採用《CC 協議》，轉載必須註明作者和本文連結
✍️部落格文章皆為網路收藏整理，作書籤使用，方便後期查閱。

相關文章