Chat en ligne en temps réel utilisant la technologie Workerman et HTML5 WebSocket-Workerman-php.cn

Chat en ligne en temps réel utilisant la technologie Workerman et HTML5 WebSocket

WBOY

Libérer： 2023-09-09 11:00:41

original

1016 Les gens l'ont consulté

利用workerman和HTML5 WebSocket技术实现实时在线聊天

Utiliser la technologie Workerman et HTML5 WebSocket pour réaliser un chat en ligne en temps réel

Introduction :
Avec le développement rapide d'Internet et la popularité des smartphones, le chat en ligne en temps réel est devenu un élément indispensable de la vie quotidienne des gens. Afin de répondre aux besoins des utilisateurs, les développeurs web recherchent constamment des solutions de chat plus efficaces et en temps réel. Cet article explique comment combiner le framework PHP Workerman et la technologie HTML5 WebSocket pour implémenter un système de chat en ligne simple en temps réel.

1. Introduction à Workerman :
Workerman est un framework d'E/S asynchrones hautes performances convivial pour les développeurs PHP qui peut implémenter des applications de communication en temps réel TCP/UDP hautes performances. Par rapport à la méthode de développement PHP traditionnelle, Workerman a des capacités de concurrence plus élevées et une consommation de ressources inférieure, et est très approprié pour la mise en œuvre de systèmes de chat en ligne en temps réel.

2. Introduction à HTML5 WebSocket :
WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut établir une connexion persistante entre le client et le serveur pour réaliser une transmission de données en temps réel. La technologie WebSocket nouvellement ajoutée dans HTML5 a une valeur d'application très importante dans le chat en temps réel et d'autres transmissions de données en temps réel.

3. Préparation de l'environnement :

Système d'exploitation du serveur : Linux
Version PHP : 7.0 et supérieure
Installer Workerman :
```
$ composer require workerman/workerman
```
Copier après la connexion

4. Implémentation côté serveur :

Créer le chat .php , Écrivez le code côté serveur :

<?php 
require_once __DIR__.'/vendor/autoload.php'; // 加载Workerman的自动加载文件

use WorkermanWorker;

// 创建一个Worker监听2346端口，使用WebSocket协议通讯
$ws_worker = new Worker("websocket://0.0.0.0:2346");

$ws_worker->count = 4; // 设置进程数

// 客户端与服务器建立连接时触发
$ws_worker->onConnect = function($connection){
 echo "Connection established: " . $connection->id . "
";
};

// 客户端向服务器发送消息时触发
$ws_worker->onMessage = function($connection, $data){
 echo "Received message: " . $data . "
";

 // 向所有在线用户发送消息
 foreach($connection->worker->connections as $clientConnection){
     $clientConnection->send($data);
 }
};

// 客户端断开连接时触发
$ws_worker->onClose = function($connection){
 echo "Connection closed: " . $connection->id . "
";
};

Worker::runAll();

Copier après la connexion

Démarrez le service WebSocket :
```
$ php chat.php start
```
Copier après la connexion

5. Implémentation côté client :

Créez le fichier chat.html et écrivez le code côté client :

<!DOCTYPE html>
<html>
<head>
 <title>实时在线聊天</title>
 <script>
     var ws = new WebSocket("ws://localhost:2346");

     ws.onopen = function(event){
         console.log("Connected to WebSocket server.");
     };

     ws.onmessage = function(event){
         var message = event.data;
         console.log("Received message: " + message);
         
         // 在页面上显示接收到的消息
         var messageBox = document.getElementById("message-box");
         var newMessage = document.createElement("p");
         newMessage.innerText = message;
         messageBox.appendChild(newMessage);
     };

     function sendMessage(){
         var message = document.getElementById("message-input").value;
         ws.send(message);
         document.getElementById("message-input").value = "";
     }
 </script>
</head>
<body>
 <div id="message-box"></div>
 <input id="message-input" type="text" placeholder="输入消息">
 <button onclick="sendMessage()">发送</button>
</body>
</html>

Copier après la connexion

Utilisez un navigateur pour ouvrir le fichier HTML du chat afin de démarrer le chat en ligne en temps réel.

6. Résumé :
Cet article explique comment utiliser la technologie Workerman et HTML5 WebSocket pour réaliser un chat en ligne en temps réel. En utilisant le framework Workerman hautes performances et les capacités de communication bidirectionnelle de WebSocket, nous pouvons facilement mettre en œuvre un système de chat en ligne simple. En plus du système de chat, nous pouvons également utiliser la technologie WebSocket pour mettre en œuvre davantage d'applications de communication en temps réel, telles que des jeux en temps réel, des cotations boursières en temps réel, etc. J'espère que cet article sera utile pour développer des systèmes de chat en ligne en temps réel et inspirera davantage d'idées et d'applications.

Références :