How to develop real-time collaboration tools using PHP and WebSocket

With the popularity of the Internet and mobile devices, people increasingly need real-time collaboration tools to improve work efficiency. Against this background, features such as instant messaging and collaborative editing in real-time collaboration tools have become increasingly popular requirements. This article will introduce how to implement a real-time web-based collaboration tool with the help of PHP and WebSocket. Relevant code examples will also be provided.

Introduction to WebSocket

WebSocket is a new type of Web communication protocol. It is based on the TCP protocol instead of the HTTP protocol and can provide two-way communication capabilities. Compared with Ajax polling technology, WebSocket has the advantages of strong real-time performance and high communication efficiency.

Prior to this, if you want to push data to the browser in real time, you usually use long polling technology, that is, the client sends a request to the server and waits for the response until there is new data before returning. response. The problem with this approach is that requests and responses are in pairs. If requests are frequent, it will put a lot of pressure on the server. WebSocket can maintain a long-term connection after communication is established, and can realize the function of the server actively pushing messages to the client.

WebSocket's communication protocol uses a handshake similar to HTTP to start a new session, and then both ends perform two-way data transmission. The WebSocket communication protocol can establish a connection through the normal HTTP protocol and then convert to a WebSocket connection, avoiding the need to connect through a special method or port.

Implementation of WebSocket

First, in the PHP code on the server side, we need to create a WebSocketServer class and implement related methods:

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) {
        // 处理新消息
    }
}

In the WebSocket protocol, a message begins with It starts with a length header of 4~10 bytes, followed by the actual data. In the above code, we need to parse the length header and then read the data part of the corresponding length.

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;
    }

    // 处理新消息
}

In the handle_message method, we can handle new messages received from the client, such as dumping and sending to other clients.

Client-side implementation of WebSocket

On the client side, we need to use JavaScript to create a WebSocket connection and send and receive messages. The following is the JavaScript code to connect to the WebSocket server:

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");
};

In the above code, we use the WebSocket constructor to create a WebSocket object and connect it to the WebSocket server. We also set up several event listeners (onopen, onmessage and onclose) to monitor the WebSocket connection status and received messages.

When we want to send data to the WebSocket server, we can use the send method of the WebSocket object:

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

When a new message from the WebSocket server is received, the onmessage event is triggered, we The received data can be obtained from the event object.

Application of real-time collaboration tools

With the support of WebSocket communication, we can develop actual collaboration tool applications. In the collaboration tool, the following functions need to be implemented:

• User login/logout
• Send instant chat message
• Multiple users collaboratively edit the same document
• Submit changes and feedback to other users

We can implement these functions into different PHP classes and refine them according to actual business needs. The following is an example:

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){

        }


    }
}

In the above example, we implemented a simple chat room, including login, logout, sending messages and other functions. In the WebSocketChat class, we maintain a list of users and add a new user through the onOpen method when the user connects. When receiving a message from a user, we call the sendToAll method to send the message to all connected users. When a user disconnects, we remove the user from the user list and notify other users that the user has left.

Conclusion

In this article, we introduced how to implement a web-based real-time collaboration tool with the help of PHP and WebSocket, and provided relevant code examples. With the popularity of the Internet and mobile devices, the demand for real-time collaboration tools will become more and more popular. Developers can conduct secondary development based on actual needs to better meet user needs.

The above is the detailed content of How to develop real-time collaboration tools using PHP and WebSocket. For more information, please follow other related articles on the PHP Chinese website!