了解 PHP 中的 WebSocket-php教程-PHP中文網

了解 PHP 中的 WebSocket

WBOY

發布： 2024-09-09 06:36:07

原創

697 人瀏覽過

Understanding WebSockets in PHP

WebSocket 透過單一 TCP 連線提供即時、全雙工通訊通道。與 HTTP 不同，HTTP 中客戶端向伺服器發送請求並等待回應，WebSocket 允許客戶端和伺服器之間進行連續通信，而無需多次請求。這非常適合需要即時更新的應用程序，例如聊天應用程式、即時通知和線上遊戲。

在本指南中，我們將探索 WebSocket、它們的工作原理以及如何在 PHP 中實現它們。

什麼是 WebSocket？

WebSockets 支援 Web 瀏覽器（或任何其他用戶端）和伺服器之間的互動式通訊。以下是 WebSocket 的關鍵面向：

全雙工通訊：客戶端和伺服器都可以隨時向對方發送訊息，使連線比傳統的 HTTP 輪詢更有效率。
持久連線：一旦建立，WebSocket 連線將保持開啟狀態，直到客戶端或伺服器明確關閉為止。
低延遲：由於 WebSocket 無需為每個請求打開新連接，因此可以減少延遲，使其成為即時通訊的理想選擇。

WebSocket 的工作原理

握手：通訊以 HTTP 請求開始。客戶端發送帶有 Upgrade 標頭的 HTTP 請求，將連線從 HTTP 切換到 WebSockets。
連線建立：一旦伺服器確認握手，連線就建立了，客戶端和伺服器都可以開始傳送和接收訊息。
訊息傳遞：資料透過幀傳輸，幀是輕量級的，可以來回發送，無需 HTTP 標頭的開銷。
連線終止：客戶端或伺服器都可以終止連線。

何時使用 WebSocket

即時應用程式：例如聊天應用程式、即時通知和協作編輯。
遊戲：適用於需要頻繁更新的多人線上遊戲。
即時動態：串流股票價格、運動比分或來自 IoT 設備的即時數據。
協作工具：適用於 Google Docs 等多個使用者需要即時查看更新的應用程式。

在 PHP 中實作 WebSocket

要在 PHP 中實作 WebSocket，您可以使用諸如 Ratchet 之類的函式庫，這是一個專門為使用 WebSocket 進行即時雙向通訊而設計的 PHP 函式庫。

使用 Ratchet 逐步實作 WebSocket

第 1 步：透過 Composer 安裝 Ratchet

首先，您需要安裝 Ratchet 庫。假設你已經安裝了 Composer，你可以執行以下指令：

composer require cboden/ratchet

登入後複製

第 2 步：用 PHP 建立 WebSocket 伺服器

讓我們建立一個簡單的 WebSocket 伺服器來處理連線和訊息。

在WebSocketServer.php中建立WebSocket伺服器類別：

<?php
use Ratchet\MessageComponentInterface;
use Ratchet\ConnectionInterface;

class WebSocketServer implements MessageComponentInterface {
    protected $clients;

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

    // Called when a new client connects
    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection: ({$conn->resourceId})\n";
    }

    // Called when a client sends a message
    public function onMessage(ConnectionInterface $from, $msg) {
        echo "New message: $msg\n";

        foreach ($this->clients as $client) {
            if ($from !== $client) {
                // Send the message to everyone except the sender
                $client->send($msg);
            }
        }
    }

    // Called when a connection is closed
    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection closed: ({$conn->resourceId})\n";
    }

    // Called if an error occurs
    public function onError(ConnectionInterface $conn, \Exception $e) {
        echo "Error: {$e->getMessage()}\n";
        $conn->close();
    }
}

登入後複製

此類實作 Ratchet 的 MessageComponentInterface，它定義了處理新連線、傳入訊息、關閉連線和錯誤的方法。

第 3 步：執行 WebSocket 伺服器

建立一個新的 PHP 腳本來啟動 WebSocket 伺服器，例如 start_server.php。

<?php
require __DIR__ . '/vendor/autoload.php';
use Ratchet\Http\HttpServer;
use Ratchet\Server\IoServer;
use Ratchet\WebSocket\WsServer;

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new WebSocketServer()
        )
    ),
    8080 // Port number for the WebSocket server
);

$server->run();

登入後複製

您可以透過執行以下腳本來啟動伺服器：

php start_server.php

登入後複製

伺服器現在將在 ws://localhost:8080 上運行。

第 4 步：建立前端以連接到 WebSocket 伺服器

現在，讓我們使用 jQuery 和 JavaScript 建立一個 HTML 檔案來連接到 WebSocket 伺服器。

建立 HTML 檔案index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Chat</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>WebSocket Chat</h2>
    <input type="text" id="message" placeholder="Enter your message">
    <button id="send">Send</button>
    <div id="chat"></div>

    <script>
        $(document).ready(function() {
            var ws = new WebSocket('ws://localhost:8080');

            // When receiving a message from the server
            ws.onmessage = function(event) {
                $('#chat').append('<p>' + event.data + '</p>');
            };

            // Sending a message to the server
            $('#send').click(function() {
                var msg = $('#message').val();
                ws.send(msg);
                $('#message').val('');
            });
        });
    </script>
</body>
</html>

登入後複製

這個簡單的介面允許您輸入訊息並將其發送到 WebSocket 伺服器。所有連接的用戶端都會收到該訊息並顯示它。