Maison > Article > cadre php > Comment implémenter la fonction de barrage du système de chat en ligne basé sur Workerman

Comment implémenter la fonction de barrage du système de chat en ligne basé sur Workerman

王林original: 2023-09-08 09:09:22832parcourir

Avec le développement d'Internet et la popularité des médias sociaux, le barrage est devenu un moyen d'interaction de plus en plus populaire. Danmaku fait référence à l'affichage des messages saisis par l'utilisateur sous forme de défilement sur une interface vidéo ou de chat. L'utilisation de la fonction de barrage dans une salle de discussion peut améliorer l'expérience interactive de l'utilisateur et rendre la discussion plus intéressante et plus vivante. Cet article présentera comment implémenter la fonction de barrage du système de chat en ligne basé sur Workerman et joindra des exemples de code correspondants.

1. Préparation de l'environnement

Avant de commencer, nous devons nous assurer que nous disposons de l'environnement et des outils suivants :

Environnement PHP : Workerman est un framework de communication TCP/UDP haute performance basé sur PHP, l'environnement PHP a donc besoin à préparer à l'avance. Vous pouvez utiliser des environnements intégrés tels que XAMPP ou WAMP, ou créer votre propre environnement PHP.
workerman framework : Avant de commencer, vous devez installer le framework Workerman. Vous pouvez l'installer via Composer ou télécharger la dernière version de Workerman directement depuis GitHub.

2. Créer une salle de discussion de base

Tout d'abord, nous devons créer une salle de discussion de base et utiliser le framework Workerman pour gérer les connexions clients et l'envoi de messages.

Créer un serveur de salle de discussion

require_once __DIR__ . '/vendor/autoload.php';

use WorkermanWorker;

$worker = new Worker("websocket://0.0.0.0:8080");

$worker->onWorkerStart = function($worker) {
    echo "Chat room started
";
};

$worker->onConnect = function($connection) {
    echo "New connection
";
};

$worker->onMessage = function($connection, $data) {
    echo "Received message: " . $data . "
";
    $connection->send("Hello, " . $data);
};

Worker::runAll();

Dans le code ci-dessus, nous avons créé un serveur Workerman de base et écouté le port 8080. Lorsqu'une nouvelle connexion est établie, la fonction de rappel onConnect sera exécutée. Lorsqu'un message envoyé par le client est reçu, la fonction de rappel onMessage sera exécutée.

Créer une page client

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Room</title>
</head>
<body>
    <input type="text" id="message" placeholder="Input your message">
    <button onclick="sendMessage()">Send</button>

    <script>
        var socket = new WebSocket("ws://127.0.0.1:8080");
        socket.onopen = function() {
            console.log("Connected to server");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);

            document.getElementById("message").value = "";
        };

        socket.onmessage = function(event) {
            var message = event.data;
            console.log("Received message: " + message);
        };
    </script>
</body>
</html>

Dans le code ci-dessus, nous créons une simple page client de salle de discussion. L'utilisateur peut saisir un message dans la zone de saisie et l'envoyer au serveur en cliquant sur le bouton "Envoyer". Lorsqu'un message est reçu du serveur, il est affiché dans la console du navigateur.

3. Implémenter la fonction de barrage

Pour implémenter la fonction de barrage, nous devons apporter les modifications appropriées au serveur de la salle de discussion et au code client. Voici l'exemple de code :

Modifier le serveur de la salle de discussion

// 添加一个数组来保存接收到的消息
$messages = [];

$worker->onMessage = function($connection, $data) use (&$messages) {
    $messages[] = $data;
    foreach ($worker->connections as $client) {
        // 向所有客户端广播弹幕消息
        $client->send($data);
    }
    echo "Received message: " . $data . "
";
};

Dans le code ci-dessus, nous avons ajouté un tableau $messages pour contenir les messages reçus. Lorsqu'un nouveau message est reçu, nous l'enregistrons dans un tableau et envoyons le message à tous les clients via une boucle.

Modifier la page client

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Room with Danmaku</title>
    <style>
        .danmaku {
            position: absolute;
            font-size: 20px;
            color: red;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <input type="text" id="message" placeholder="Input your message">
    <button onclick="sendMessage()">Send</button>

    <script>
        var socket = new WebSocket("ws://127.0.0.1:8080");
        var danmakus = [];

        socket.onopen = function() {
            console.log("Connected to server");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);

            document.getElementById("message").value = "";
        };

        socket.onmessage = function(event) {
            var message = event.data;
            console.log("Received message: " + message);

            // 创建一个新的弹幕
            var danmaku = document.createElement("div");
            danmaku.textContent = message;
            danmaku.className = "danmaku";

            // 设置弹幕的起始位置和动画效果
            danmaku.style.top = Math.floor(Math.random() * (window.innerHeight - 30)) + "px";
            danmaku.style.left = window.innerWidth + "px";
            danmaku.style.animationDuration = (Math.random() * 10 + 5) + "s";

            // 添加弹幕到页面
            document.body.appendChild(danmaku);

            // 添加弹幕到数组
            danmakus.push(danmaku);

            // 监听弹幕动画结束事件，删除已经播放完成的弹幕
            danmaku.addEventListener("animationend", function() {
                document.body.removeChild(danmaku);
                danmakus.splice(danmakus.indexOf(danmaku), 1);
            });

            // 避免弹幕过多导致页面卡顿，最多显示10条弹幕
            if (danmakus.length > 10) {
                var removedDanmaku = danmakus.shift();
                document.body.removeChild(removedDanmaku);
            }
        };
    </script>
</body>
</html>

Dans le code ci-dessus, nous avons ajouté une feuille de style pour définir le style du barrage. Lors de la réception du message, nous créons un nouvel élément de barrage et définissons son effet d'animation, sa position de départ et son texte. Ajoutez ensuite les barrages à la page et conservez un tableau de barrages pour gérer l'ordre de lecture des barrages. Afin d'éviter le décalage de page, nous limitons l'affichage de 10 discussions à puces maximum et les supprimons de la page et du tableau à la fin de l'animation de discussion à puces.

4. Exécutez et testez

Démarrez le serveur de la salle de discussion

Entrez le répertoire où se trouve le serveur de la salle de discussion sur la ligne de commande et exécutez la commande suivante :

php chat_room.php start

Ouvrez la page client

Ouvrir le client dans le navigateur Sur la page du terminal, saisissez le message et cliquez sur le bouton Envoyer. Le serveur de la salle de discussion enverra le message reçu à tous les clients connectés et l'affichera sur la page sous forme de barrage.

Résumé

Cet article présente comment implémenter la fonction de barrage du système de chat en ligne basé sur Workerman. En ajoutant le code et la feuille de style correspondants, nous pouvons réaliser la fonction de réception et d'affichage des messages de barrage. Une telle fonction de barrage peut améliorer l'interactivité et le plaisir des salons de discussion, rendant les utilisateurs plus actifs et engagés. J'espère que l'exemple de code de cet article pourra aider les lecteurs à implémenter rapidement leur propre fonction de barrage de salle de discussion.

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!

php composer 回调函数循环样式表 github udp Workerman

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment décider : comparaison des plateformes de développement Swoole et WorkermanArticle suivant：Comment décider : comparaison des plateformes de développement Swoole et Workerman

Articles Liés

Voir plus