Comment développer des outils de collaboration en temps réel à l'aide de PHP et WebSocket

Avec la popularité d'Internet et des appareils mobiles, les gens ont de plus en plus besoin d'outils de collaboration en temps réel pour améliorer l'efficacité du travail. Dans ce contexte, des fonctionnalités telles que la messagerie instantanée et l'édition collaborative dans les outils de collaboration en temps réel sont devenues des exigences de plus en plus populaires. Cet article explique comment implémenter un outil de collaboration Web en temps réel à l'aide de PHP et WebSocket. Des exemples de codes pertinents seront également fournis.

Introduction à WebSocket

WebSocket est un nouveau type de protocole de communication Web. Il est basé sur le protocole TCP au lieu du protocole HTTP et peut fournir des capacités de communication bidirectionnelle. Par rapport à la technologie d'interrogation Ajax, WebSocket présente les avantages d'excellentes performances en temps réel et d'une efficacité de communication élevée.

Avant cela, si vous souhaitiez transmettre des données au navigateur en temps réel, vous utilisiez généralement une technologie d'interrogation longue, c'est-à-dire que le client envoyait une requête au serveur et attendait une réponse jusqu'à ce que de nouvelles données soient disponibles avant de renvoyer une réponse. . Le problème avec cette approche est que les requêtes et les réponses sont par paires. Si les requêtes sont fréquentes, cela mettra beaucoup de pression sur le serveur. WebSocket peut maintenir une connexion à long terme une fois la communication établie et peut réaliser la fonction du serveur envoyant activement des messages au client.

Le protocole de communication de WebSocket utilise une poignée de main de type HTTP pour démarrer une nouvelle session, puis les deux extrémités effectuent une transmission de données bidirectionnelle. Le protocole de communication WebSocket peut établir une connexion via le protocole HTTP normal, puis se convertir en connexion WebSocket, évitant ainsi d'avoir besoin de se connecter via une méthode ou un port spécial.

Implémentation de WebSocket

Tout d'abord, dans le code PHP côté serveur, nous devons créer une classe WebSocketServer et implémenter les méthodes associées :

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

Dans le protocole WebSocket, un message commence par un en-tête de longueur de 4 à 10 octets. , suivi des données réelles. Dans le code ci-dessus, nous devons analyser l'en-tête de longueur, puis lire la partie données de la longueur correspondante.

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

    // 处理新消息
}

Dans la méthode handle_message, nous pouvons gérer les nouveaux messages reçus du client, comme le dumping et l'envoi à d'autres clients.

Implémentation côté client de WebSocket

Côté client, nous devons utiliser JavaScript pour créer une connexion WebSocket et envoyer et recevoir des messages. Voici le code JavaScript pour se connecter au serveur WebSocket :

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

Dans le code ci-dessus, nous utilisons le constructeur WebSocket pour créer un objet WebSocket et le connecter au serveur WebSocket. Nous avons également mis en place plusieurs écouteurs d'événements (onopen, onmessage et onclose) pour surveiller l'état de la connexion WebSocket et les messages reçus.

Lorsque nous voulons envoyer des données au serveur WebSocket, nous pouvons utiliser la méthode d'envoi de l'objet WebSocket :

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

Lorsqu'un nouveau message du serveur WebSocket est reçu, l'événement onmessage est déclenché et nous pouvons récupérer le message reçu. message de l’objet événement aux données.

Application d'outils de collaboration en temps réel

Avec le support de la communication WebSocket, nous pouvons développer de véritables applications d'outils de collaboration. Dans les outils de collaboration, les fonctions suivantes doivent être implémentées :

• Connexion/déconnexion de l'utilisateur
• Envoyer des messages de chat instantané
• Plusieurs utilisateurs modifient le même document en collaboration
• Soumettre les modifications et les commentaires aux autres utilisateurs

Nous pouvons les séparer fonctions séparément Implémenté dans différentes classes PHP et affiné en fonction des besoins réels de l'entreprise. Voici un exemple :

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

        }


    }
}

Dans l'exemple ci-dessus, nous avons implémenté une salle de discussion simple, comprenant la connexion, la déconnexion, l'envoi de messages et d'autres fonctions. Dans la classe WebSocketChat, nous maintenons une liste d'utilisateurs et ajoutons un nouvel utilisateur via la méthode onOpen lorsque l'utilisateur se connecte. Lors de la réception d'un message d'un utilisateur, nous appelons la méthode sendToAll pour envoyer le message à tous les utilisateurs connectés. Lorsqu'un utilisateur se déconnecte, nous le supprimons de la liste des utilisateurs et informons les autres utilisateurs qu'il est parti.

Conclusion

Dans cet article, nous avons présenté comment implémenter un outil de collaboration Web en temps réel à l'aide de PHP et WebSocket, et avons fourni des exemples de code pertinents. Avec la popularité d'Internet et des appareils mobiles, la demande d'outils de collaboration en temps réel deviendra de plus en plus populaire. Les développeurs pourront effectuer un développement secondaire basé sur les besoins réels pour mieux répondre aux besoins des utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!