如何利用PHP和WebSocket開發即時協作工具-php教程-PHP中文網

如何利用PHP和WebSocket開發即時協作工具

PHPz

發布： 2023-12-17 22:46:02

原創

803 人瀏覽過

如何利用PHP和WebSocket開發即時協作工具

隨著網路及行動裝置的普及，人們越來越需要即時協作工具來提高工作效率。在這種背景下，即時協作工具中的即時通訊和協同編輯等功能成為越來越受歡迎的需求。本文將介紹如何借助PHP和WebSocket實現基於Web的即時協作工具。同時將提供相關程式碼實例。

WebSocket簡介

WebSocket是一種新型的Web通訊協議，它基於TCP協定而不是HTTP協議，能夠提供雙向通訊的能力。相較於Ajax輪詢技術，WebSocket具有即時性強、通訊效率高等優點。

在此之前，如果想要即時推送資料到瀏覽器端，通常會使用長輪詢技術，即客戶端向伺服器發送請求並一直等待回應，直到有新資料時再返回響應。這種方式存在的問題是請求和回應是成對的，如果請求頻繁則會給伺服器帶來很大的壓力。而WebSocket在通訊建立後，可以保持長時間的連接，可以實現伺服器主動向客戶端推送訊息的功能。

WebSocket的通訊協定採用類似HTTP的握手來啟動一個新的會話，然後兩端進行雙向資料傳輸。 WebSocket通訊協定可以透過正常的HTTP協定建立連接，然後轉換到WebSocket連接，避免了透過特殊的方式或連接埠連接的需求。

WebSocket的實作

首先，在服務端的PHP程式碼中，我們需要建立一個WebSocketServer類，並實作相關方法：

class WebSocketServer {
    public function __construct($host, $port){
        $this->host = $host;
        $this->port = $port;
        $this->sockets = array();
        $this->users = array();
    }

    public function run(){
        $server = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
        socket_bind($server, $this->host, $this->port);
        socket_listen($server);

        $this->sockets[] = $server;
        echo "WebSocket服务器运行在 $this->host:$this->port
";

        while(true){
            $new_sockets = $this->sockets;
            $write = NULL;
            $except = NULL;
            socket_select($new_sockets, $write, $except, NULL);
            foreach($new_sockets as $socket){
                if ($socket == $server){
                    $client = socket_accept($server);
                    $this->sockets[] = $client;
                    $this->users[] = array('socket'=>$client);
                } else {
                    $bytes = @socket_recv($socket, $buffer, 1024, MSG_DONTWAIT);
                    if ($bytes == 0) {
                        $index = $this->find_user_by_socket($socket);
                        if ($index >= 0) {
                            array_splice($this->users, $index, 1);
                        }
                        socket_close($socket);
                        $key = array_search($socket, $this->sockets);
                        array_splice($this->sockets, $key, 1);
                    } else {
                        $index = $this->find_user_by_socket($socket);
                        if($index >= 0) {
                            $msg = $buffer;
                            $this->handle_message($msg, $this->users[$index]);
                        }
                    }
                }
            }
        }
    }

    private function find_user_by_socket($socket){
        $found = -1;
        foreach($this->users as $index => $user){
            if ($user['socket'] == $socket){
                $found = $index;
                break;
            }
        }
        return $found;
    }

    private function handle_message($msg, $user) {
        // 处理新消息
    }
}

登入後複製

WebSocket協定中，一則訊息以4~10位元組的長度頭開始，後面是實際的資料。在上面的程式碼中，我們需要解析這個長度頭，然後讀取對應長度的資料部分即可。

private function handle_message($msg, $user) {
    if(strlen($msg) === 0) {
        return;
    }

    $code = ord(substr($msg, 0, 1)) & 0x0F;
    switch ($code){
        case 0x01: // 文本数据
            $msg = substr($msg, 1);
            break;
        case 0x02: // 二进制数据
            $msg = substr($msg, 1);
            break;
        case 0x08: // 连接关闭
            $index = $this->find_user_by_socket($user['socket']);
            if ($index >= 0) {
                array_splice($this->users, $index, 1);
            }
            socket_close($user['socket']);
            $key = array_search($user['socket'], $this->sockets);
            array_splice($this->sockets, $key, 1);
            return;
        case 0x09: // ping
        case 0x0A: // pong
            return;
        default:
            return;
    }

    // 处理新消息
}

登入後複製

在handle_message方法中，我們可以處理從客戶端收到的新訊息，例如轉儲和發送到其他客戶端。

WebSocket的客戶端實作

在客戶端，我們需要使用JavaScript來建立WebSocket的連線以及發送和接收訊息。以下是連接到WebSocket伺服器的JavaScript程式碼：

var ws = new WebSocket("ws://localhost:8080/");
ws.onopen = function() {
    console.log("Connected to WebSocket server");
};

ws.onmessage = function(evt) {
    console.log("Received message: " + evt.data);
};

ws.onclose = function(evt) {
    console.log("Disconnected from WebSocket server");
};

登入後複製

在上面的程式碼中，我們使用了WebSocket建構函式來建立一個WebSocket對象，並將其連接到WebSocket伺服器上。我們也設定了幾個事件偵聽器（onopen、onmessage和onclose），以便監聽WebSocket連線狀態及收到的訊息。

當我們想要將資料傳送到WebSocket伺服器時，可以使用WebSocket物件的send方法：

ws.send("Hello, WebSocket server!");

登入後複製

當接收到來自WebSocket伺服器的新訊息時，會觸發onmessage事件，我們可以從事件物件中取得到收到的資料。

即時協作工具的應用

有了WebSocket通訊的支持，我們可以進行實際的協作工具應用的開發了。在協作工具中，需要實作以下幾個功能：

使用者登入/登出
發送即時聊天訊息
多使用者協同編輯相同文件
提交更改回饋給其他使用者

我們可以將這些功能分別實現成不同的PHP類別並根據實際業務需求進行細化。以下是一個例子：

class WebSocketChat {

    private $users = array();

    public function onOpen($user){
        $this->users[$user['id']] = $user;
        $this->sendToAll(array('type'=>'notice','from'=>'System','msg'=>"{$user['name']}进入聊天室"));
    }

    public function onMessage($user, $msg){
        $this->sendToAll(array('type'=>'msg','from'=>$user['name'],'msg'=>$msg));
    }

    public function onClose($user){
        unset($this->users[$user['id']]);
        $this->sendToAll(array('type'=>'notice','from'=>'System','msg'=>"{$user['name']}离开聊天室"));
    }

    private function sendToAll($msg){
        foreach($this->users as $user){
            $this->send($user, $msg);
        }
    }

    private function send($user, $msg){
        socket_write($user['socket'], $this->encode(json_encode($msg)));
    }

    private function encode($msg){
        $len = strlen($msg);
        if($len <= 125){

        }

        if($len <= 65535){

        }


    }
}

登入後複製

在上面的範例中，我們實作了一個簡單的聊天室，包含了登入、登出、傳送訊息等功能。在WebSocketChat類別中，我們維護了一個使用者列表，並在使用者連線時透過onOpen方法新增一個使用者。在接收到用戶發送的訊息時，我們呼叫sendToAll方法，將訊息傳送給所有連接的用戶。當使用者中斷連線時，我們將該使用者從使用者清單中移除，並通知其他使用者該使用者已離開。