如何使用PHP和WebSocket實現即時通信-php教程-PHP中文網

如何使用PHP和WebSocket實現即時通信

WBOY

發布： 2023-12-17 22:26:01

原創

1383 人瀏覽過

如何使用PHP和WebSocket實現即時通信

隨著網路科技的不斷發展，即時通訊已經成為了日常生活中不可或缺的一部分。利用WebSockets技術可以實現高效、低延遲的即時通信，而PHP作為互聯網領域使用最廣泛的開發語言之一，也提供了相應的WebSocket支援。本文將為大家介紹如何使用PHP和WebSocket實現即時通信，並提供具體的程式碼範例。

一、什麼是WebSocket

WebSocket是一種在單一TCP連線上進行全雙工通訊的協定。與HTTP協定不同的是，WebSocket在建立連線之後，伺服器和用戶端之間可以直接進行資料交換，而不需要透過HTTP請求和回應進行互動。這使得WebSocket能夠實現低延遲、高效率的即時通信，適用於線上遊戲、聊天室等需要高並發、即時互動的場景。

二、PHP如何支援WebSocket

PHP提供了一些函式庫和框架來實作WebSocket，例如Ratchet、Wrench等。這些函式庫和框架都基於PHP的擴展Swoole實現，Swoole是一款PHP的高效能網路通訊框架，支援非同步IO、協程等特性，適用於建構高並發、高效能的Web伺服器、遊戲伺服器等應用。

在本文中，我們將使用Ratchet函式庫來實作WebSocket。 Ratchet提供了基於標準的RFC6455 WebSocket協定的實現，並且具有易用性、靈活性、高可拓展性等特點。同時，Ratchet也支援WebSockets的子協議，例如STOMP、WAMP等，提供了完善的文件和範例程式碼，方便開發者快速上手。

三、實作即時通訊的範例程式碼

下面我們透過一個簡單的聊天室應用程式來示範如何使用PHP和WebSocket實現即時通訊。

安裝Ratchet

在本機或伺服器端安裝Ratchet，可以透過Composer進行安裝：

composer require cboden/ratchet

登入後複製

編寫WebSocket伺服器

建立一個PHP 檔案server.php，程式碼如下：

<?php
require dirname(__DIR__) . '/vendor/autoload.php';

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetWebSocketMessageComponentTrait;

class Chat implements MessageComponentInterface
{
    use MessageComponentTrait;

    protected $clients;

    public function __construct()
    {
        $this->clients = new SplObjectStorage();
    }

    public function onOpen(ConnectionInterface $conn)
    {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})
";
    }

    public function onClose(ConnectionInterface $conn)
    {
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected
";
    }

    public function onError(ConnectionInterface $conn, Exception $e)
    {
        echo "An error has occurred: {$e->getMessage()}
";
        $conn->close();
    }

    public function onMessage(ConnectionInterface $from, $msg)
    {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }
}

$server = new RatchetWebSocketWsServer(new Chat());
$loop = ReactEventLoopFactory::create();
$socket = new ReactSocketServer('0.0.0.0:8080', $loop);
$server = new RatchetServerIoServer($server, $socket, $loop);
echo "Server started
";
$server->run();

登入後複製

上面的程式碼建立了一個簡單的聊天室伺服器，監聽8080端口，等待客戶端連接。當客戶端連接時，會呼叫onOpen方法，並將客戶端連接物件儲存到一個ObjectStorage物件中。當客戶端傳送訊息時，會呼叫onMessage方法，將訊息傳送給所有連接到伺服器的客戶端。當客戶端斷開連線時，會呼叫onClose方法，將客戶端連線物件從ObjectStorage物件中刪除。

寫WebSocket客戶端

建立一個HTML 檔案client.html，程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Chat Room</title>
    <style>
        #messages {
            margin-bottom: 10px;
            padding: 5px;
            border: 1px solid #ddd;
            overflow-y: scroll;
            height: 200px;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="input-message" placeholder="Write a message...">
        <button id="btn-send">Send</button>
    </div>
    <div id="messages"></div>

    <script>
        var conn = new WebSocket('ws://localhost:8080');
        var messages = document.getElementById('messages');
        var inputMessage = document.getElementById('input-message');
        var btnSend = document.getElementById('btn-send');

        conn.onopen = function(e) {
            messages.innerHTML += '<div>Connected to server</div>'
        };

        conn.onmessage = function(e) {
            messages.innerHTML += '<div>' + e.data + '</div>'
        };

        conn.onerror = function(e) {
            console.log('An error occurred: ' + e.data);
        };

        conn.onclose = function(e) {
            messages.innerHTML += '<div>Connection closed</div>'
        };

        btnSend.onclick = function() {
            if (inputMessage.value) {
                conn.send(inputMessage.value);
                inputMessage.value = '';
            }
        };

        inputMessage.addEventListener('keydown', function(e) {
            if (e.keyCode === 13 && inputMessage.value.trim()) {
                conn.send(inputMessage.value);
                inputMessage.value = '';
            }
        });
    </script>
</body>
</html>

登入後複製

上面的程式碼建立了一個簡單的聊天室客戶端，透過WebSocket和伺服器建立連接，並監聽伺服器的訊息。當使用者在文字方塊中輸入訊息並點擊傳送按鈕或按下回車鍵時，會向伺服器發送訊息，並將訊息顯示到聊天視窗中。