Swoole en action : créez rapidement un salon de discussion basé sur WebSocket-Swoole-php.cn

Swoole en action : créez rapidement un salon de discussion basé sur WebSocket

WBOY

Libérer： 2023-06-14 16:20:08

original

1323 Les gens l'ont consulté

À 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

Copier après la connexion

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 install

Copier après la connexion

Si 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

Copier après la connexion

Tout d'abord, nous devons écrire une page pour envoyer des messages au salon de discussion. Le code est le suivant :

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

Copier après la connexion

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.

WebSocket

localhost

WebSocket

服务端代码

接下来，我们编写服务端代码。通过 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();

Copier après la connexion

首先，我们创建了一个 WebSocket 服务器，并将其绑定在0.0.0.0:9502的地址上，以等待客户端连接。通过on方法监听了 WebSocket 连接打开、消息、连接关闭三个事件，并已经实现了对于这三个事件的处理逻辑。

在 open 事件中，我们使用了 Swoole 记录的客户端 fd，将其输出至控制台。

在 message 事件中，我们获得了客户端传来的信息，使用了 echo 将其输出到控制台，并通过 foreach 遍历已经建立连接的客户端，将消息广播给所有客户端。

在 close 事件中，我们又一次使用了 Swoole 记录的客户端 fd，将其输出至控制台。

最后，我们使用 startCode côté 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 :

0.0.0.0:9502

on

open

message

echo

foreach

close

start

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!