Echtzeit-Online-Chat mit Workerman- und HTML5-WebSocket-Technologie-Workerman-php.cn

Echtzeit-Online-Chat mit Workerman- und HTML5-WebSocket-Technologie

WBOY

Freigeben： 2023-09-09 11:00:41

Original

1023 Leute haben es durchsucht

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

Mit Workerman und HTML5 WebSocket-Technologie Echtzeit-Online-Chat erreichen

Einführung:
Mit der rasanten Entwicklung des Internets und der Beliebtheit von Smartphones ist Echtzeit-Online-Chat zu einem unverzichtbaren Bestandteil des täglichen Lebens der Menschen geworden. Um den Bedürfnissen der Benutzer gerecht zu werden, sind Webentwickler ständig auf der Suche nach effizienteren Chat-Lösungen in Echtzeit. In diesem Artikel erfahren Sie, wie Sie das PHP-Framework Workerman und die HTML5-WebSocket-Technologie kombinieren, um ein einfaches Echtzeit-Online-Chat-System zu implementieren.

1. Einführung in Workerman:
Workerman ist ein PHP-entwicklerfreundliches, leistungsstarkes asynchrones IO-Framework, das leistungsstarke TCP/UDP-Echtzeitkommunikationsanwendungen implementieren kann. Im Vergleich zur herkömmlichen PHP-Entwicklungsmethode verfügt Workerman über höhere Parallelitätsfähigkeiten und einen geringeren Ressourcenverbrauch und eignet sich sehr gut für die Implementierung von Echtzeit-Online-Chat-Systemen.

2. Einführung in HTML5 WebSocket:
WebSocket ist ein Vollduplex-Kommunikationsprotokoll, das auf dem TCP-Protokoll basiert und eine dauerhafte Verbindung zwischen dem Client und dem Server herstellen kann, um eine Echtzeit-Datenübertragung zu erreichen. Die neu hinzugefügte WebSocket-Technologie von HTML5 hat einen sehr wichtigen Anwendungswert bei der Übertragung von Echtzeit-Chat und anderen Echtzeitdaten.

3. Umgebungsvorbereitung:

Server-Betriebssystem: Linux
PHP-Version: 7.0 und höher
Install Workerman:
```
$ composer require workerman/workerman
```
Nach dem Login kopieren

4. Serverseitige Implementierung:

Erstellen die chat.php Datei, serverseitigen Code schreiben:

<?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();

Nach dem Login kopieren

WebSocket-Dienst starten:
```
$ php chat.php start
```
Nach dem Login kopieren

5. Clientseitige Implementierung:

Erstellen Sie die Datei chat.html und schreiben Sie clientseitigen Code:

<!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>

Nach dem Login kopieren

Verwenden Sie einen Browser, um die HTML-Datei zu öffnen und den Online-Chat in Echtzeit zu starten.

6. Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie mithilfe der Workerman- und HTML5-WebSocket-Technologie einen Online-Chat in Echtzeit erreichen. Durch die Verwendung des leistungsstarken Workerman-Frameworks und der bidirektionalen Kommunikationsfunktionen von WebSocket können wir problemlos ein einfaches Online-Chat-System implementieren. Zusätzlich zum Chat-System können wir mithilfe der WebSocket-Technologie auch weitere Echtzeit-Kommunikationsanwendungen implementieren, z. B. Echtzeitspiele, Echtzeit-Börsenkurse usw. Ich hoffe, dass dieser Artikel bei der Entwicklung von Echtzeit-Online-Chat-Systemen hilfreich sein und weitere Ideen und Anwendungen inspirieren wird.

Referenzen:

Offizielle Workerman-Dokumentation: https://www.workerman.net/doc
HTML5 WebSocket-Tutorial: https://www.runoob.com/html/html5-websocket.html

Das obige ist der detaillierte Inhalt vonEchtzeit-Online-Chat mit Workerman- und HTML5-WebSocket-Technologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!