Swoole en action : créez rapidement un salon de discussion basé sur WebSocket
- WBOYoriginal
- 2023-06-14 16:20:081276parcourir
À l'ère d'Internet, les forums de discussion sont devenus un lieu important de communication et de socialisation. L'émergence de la technologie WebSocket a rendu la communication en temps réel plus fluide et plus stable. Aujourd'hui, nous présentons comment utiliser le framework Swoole pour créer rapidement une salle de discussion basée sur WebSocket.
Swoole est un framework de communication réseau coroutine PHP haute performance, écrit en langage C, intégrant des E/S asynchrones, une coroutine, une communication réseau et d'autres fonctions, permettant au code PHP comme Node.js de gérer efficacement l'asynchrone piloté par les événements programmation concurrente. On peut dire que Swoole est un outil important pour développer des applications réseau à haute concurrence.
Ci-dessous, nous présenterons étape par étape comment utiliser Swoole pour mettre en œuvre une salle de discussion basée sur WebSocket et prendre en charge le chat en ligne à plusieurs personnes.
- Préparation de l'environnement
Avant de commencer, vous devez vous assurer que vous avez installé l'extension Swoole et activé le support WebSocket.
La méthode d'installation est la suivante :
pecl install swoole
Ou compiler et installer :
wget https://pecl.php.net/get/swoole-{version}.tgz
tar xzvf swoole-{version}.tgz
cd swoole-{version}
phpize
./configure --enable-async-redis --enable-coroutine --enable-openssl --enable-http2 --enable-sockets
make && make installSi Docker est utilisé, vous pouvez ajouter les instructions suivantes dans le Dockerfile : #🎜 🎜#
RUN pecl install swoole
&& docker-php-ext-enable swoole
&& docker-php-ext-install pcntl
- Client Page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket ChatRoom Demo</title>
<style>
* {
margin: 0;
padding: 0;
}
.container {
margin: 30px auto;
width: 800px;
height: 600px;
border: 1px solid #aaa;
border-radius: 5px;
overflow: hidden;
}
.message-box {
width: 800px;
height: 500px;
border-bottom: 1px solid #aaa;
overflow-y: scroll;
}
.input-box {
width: 800px;
height: 100px;
border-top: 1px solid #aaa;
}
.input-text {
width: 600px;
height: 80px;
margin: 10px;
padding: 10px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #aaa;
outline: none;
}
.send-btn {
width: 100px;
height: 100%;
margin: 0 10px;
background-color: #4CAF50;
border: none;
color: white;
font-size: 18px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div class="message-box"></div>
<div class="input-box">
<textarea class="input-text"></textarea>
<button class="send-btn">Send</button>
</div>
</div>
<script>
// 初始化WebSocket
let socket = new WebSocket('ws://localhost:9502');
// 监听连接成功事件
socket.onopen = function (event) {
console.log('WebSocket connection established.');
}
// 监听服务端发送的消息
socket.onmessage = function (event) {
let message_box = document.querySelector('.message-box');
message_box.innerHTML += `<p>${event.data}</p>`;
message_box.scrollTop = message_box.scrollHeight;
}
// 监听连接关闭事件
socket.onclose = function (event) {
console.log('WebSocket connection closed.');
}
// 发送消息
let send_btn = document.querySelector('.send-btn');
let input_text = document.querySelector('.input-text');
send_btn.addEventListener('click', function (event) {
if (input_text.value.trim() == '') return;
socket.send(input_text.value);
input_text.value = '';
});
</script>
</body>
</html>Dans ce code, nous divisons la page du salon de discussion en deux parties : la zone d'affichage du message et la zone de saisie du message. Dans le même temps, la logique associée à la connexion WebSocket et à l'envoi de messages est définie. Il convient de noter que lors du déploiement dans un environnement local, l'adresse de WebSocket doit être modifiée en adresse IP locale au lieu de localhost . Si vous souhaitez utiliser un environnement en ligne, vous devez remplacer l'adresse WebSocket par l'adresse IP publique du serveur.
- 服务端代码
- Ensuite, nous écrivons le code côté serveur. Grâce à la bibliothèque de classes fournie par Swoole, nous pouvons facilement créer un serveur WebSocket. Le code est le suivant : rrreee
WebSocket的地址为本地IP地址，而不是localhost。如果你想使用在线环境，则需要将WebSocket地址改为服务器公网IP。接下来，我们编写服务端代码。通过 Swoole 提供的类库，我们可以很方便地创建一个 WebSocket 服务器。代码如下：
<?php
// 创建WebSocket服务器
$server = new SwooleWebsocketServer("0.0.0.0", 9502);
// 监听WebSocket连接打开事件
$server->on('open', function (SwooleWebsocketServer $server, $request) {
echo "connection open: {$request->fd}
";
});
// 监听WebSocket消息事件
$server->on('message', function (SwooleWebsocketServer $server, $frame) {
echo "received message: {$frame->data}
";
// 广播消息
foreach ($server->connections as $fd) {
$server->push($fd, $frame->data);
}
});
// 监听WebSocket连接关闭事件
$server->on('close', function (SwooleWebsocketServer $server, $fd) {
echo "connection close: {$fd}
";
});
// 启动WebSocket服务器
$server->start();首先，我们创建了一个 WebSocket 服务器，并将其绑定在0.0.0.0:9502的地址上，以等待客户端连接。通过on方法监听了 WebSocket 连接打开、消息、连接关闭三个事件，并已经实现了对于这三个事件的处理逻辑。
在 open 事件中，我们使用了 Swoole 记录的客户端 fd，将其输出至控制台。
在 message 事件中，我们获得了客户端传来的信息，使用了 echo 将其输出到控制台，并通过 foreach 遍历已经建立连接的客户端，将消息广播给所有客户端。
在 close 事件中，我们又一次使用了 Swoole 记录的客户端 fd，将其输出至控制台。
最后，我们使用 startCode côté serveur
0.0.0.0:9502 pour attendre les connexions client. Les trois événements d'ouverture de connexion WebSocket, de message et de fermeture de connexion sont surveillés via la méthode on, et la logique de traitement de ces trois événements a été implémentée. Dans l'événement open, nous utilisons le client fd enregistré par Swoole pour le sortir sur la console. Dans l'événement message, nous obtenons les informations du client, utilisons echo pour les afficher sur la console et passons foreach traverse les clients qui ont établi des connexions et diffuse le message à tous les clients. #🎜🎜##🎜🎜#Dans l'événement close, nous utilisons à nouveau le client fd enregistré par Swoole pour le sortir sur la console. #🎜🎜##🎜🎜#Enfin, nous utilisons la méthode start pour démarrer le serveur WebSocket. #🎜🎜##🎜🎜##🎜🎜#Conclusion#🎜🎜##🎜🎜##🎜🎜#Jusqu'à présent, nous avons mis en place une salle de discussion en ligne multi-personnes basée sur WebSocket. Dans la page client, vous pouvez envoyer n'importe quel message, et le message sera diffusé à tous les clients en ligne pour affichage. #🎜🎜##🎜🎜#Grâce au framework Swoole, nous pouvons facilement créer un serveur WebSocket efficace, qui fournit un moyen pratique d'obtenir des performances élevées, une faible latence et une communication fiable en temps réel. #🎜🎜#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!