Real-time online chat using workerman and HTML5 WebSocket technology-Workerman-php.cn

Real-time online chat using workerman and HTML5 WebSocket technology

WBOY

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

Original

1017 people have browsed it

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

Using Workerman and HTML5 WebSocket technology to achieve real-time online chat

Introduction:
With the rapid development of the Internet and the popularity of smartphones, real-time online chat has become an integral part of people's daily lives. In order to meet the needs of users, web developers are constantly looking for more efficient and real-time chat solutions. This article will introduce how to combine the PHP framework Workerman and HTML5 WebSocket technology to implement a simple real-time online chat system.

1. Introduction to Workerman:
Workerman is a PHP developer-friendly high-performance asynchronous IO framework that can implement high-performance TCP/UDP real-time communication applications. Compared with the traditional PHP development method, Workerman has higher concurrency capabilities and lower resource consumption, and is very suitable for implementing real-time online chat systems.

2. Introduction to HTML5 WebSocket:
WebSocket is a full-duplex communication protocol based on the TCP protocol, which can establish a persistent connection between the client and the server to achieve real-time data transmission. The newly added WebSocket technology in HTML5 has very important application value in real-time chat and other real-time data transmission.

3. Environment preparation:

Server operating system: linux
PHP version: 7.0 and above
Install Workerman:
```
$ composer require workerman/workerman
```
Copy after login

4. Server-side implementation:

Create chat.php file and write server-side code:

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

Copy after login

Start the WebSocket service:
```
$ php chat.php start
```
Copy after login

5. Client implementation:

Create the chat.html file and write the client 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>

Copy after login

Use a browser to open the chat.html file to start real-time online chat.

6. Summary:
This article introduces how to use Workerman and HTML5 WebSocket technology to achieve real-time online chat. By using the high-performance Workerman framework and the two-way communication capabilities of WebSocket, we can easily implement a simple online chat system. In addition to the chat system, we can also use WebSocket technology to implement more real-time communication applications, such as real-time games, real-time stock quotes, etc. I hope this article will be helpful for developing real-time online chat systems and inspire more ideas and applications.

Reference:

Workerman official document: https://www.workerman.net/doc
HTML5 WebSocket tutorial: https://www.runoob .com/html/html5-websocket.html

The above is the detailed content of Real-time online chat using workerman and HTML5 WebSocket technology. For more information, please follow other related articles on the PHP Chinese website!