Workermanをベースにしたオンラインチャットシステムの弾幕機能の実装方法-Workerman-php.cn

Workermanをベースにしたオンラインチャットシステムの弾幕機能の実装方法

王林

リリース： 2023-09-08 09:09:22

オリジナル

858 人が閲覧しました

Workermanをベースにしたオンラインチャットシステムの弾幕機能の実装方法

Workerman をベースにしたオンラインチャットシステムの弾幕機能の実装方法

インターネットの発展とソーシャルメディアの普及に伴い、弾幕機能はますます重要になってきています。人気の交流の歓迎された形式。弾幕とは、ユーザーが入力したメッセージをビデオまたはチャットインターフェイス上でスクロール形式で表示することを指します。チャットルームで弾幕機能を使用すると、ユーザーのインタラクティブなエクスペリエンスが向上し、チャットがより面白く、活気のあるものになります。この記事では、Workerman をベースにしたオンラインチャットシステムの弾幕機能の実装方法と、対応するコード例を紹介します。

1. 環境の準備

始める前に、次の環境とツールがあることを確認する必要があります:

PHP 環境: Workerman は高機能です。パフォーマンス PHP ベースの TCP/UDP 通信フレームワークを使用するため、事前に PHP 環境を準備する必要があります。 XAMPP や WAMP などの統合環境を使用することも、独自の PHP 環境を構築することもできます。
workerman フレームワーク: 開始する前に、workerman フレームワークをインストールする必要があります。composer を通じてインストールするか、GitHub から直接 workman の最新バージョンをダウンロードできます。

2. 基本的なチャットルームを作成する

まず、基本的なチャットルームを作成し、workerman フレームワークを使用してクライアント接続とメッセージ送信を処理する必要があります。

チャットルームサーバーの作成

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

ログイン後にコピー

上記のコードでは、基本的なワーカーマンサーバーを作成し、ポート 8080 をリッスンしました。新規接続確立時にはonConnectコールバック関数が実行され、クライアントから送信されたメッセージ受信時にはonMessageコールバック関数が実行されます。

クライアントページの作成

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

ログイン後にコピー

上記のコードでは、単純なチャットルームのクライアントページを作成しました。ユーザーは入力ボックスにメッセージを入力し、「送信」ボタンをクリックしてサーバーに送信できます。サーバーからメッセージを受信すると、ブラウザのコンソールに表示されます。

3. 弾幕機能の実装

弾幕機能を実装するには、チャットルームサーバーとクライアントのコードを適切に変更する必要があります。サンプルコードは次のとおりです。

チャットルームサーバーを変更する

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

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

ログイン後にコピー

上記のコードでは、受信したメッセージを保存するための配列 $messages を追加しました。新しいメッセージを受信すると、それを配列に保存し、ループを通じてすべてのクライアントにメッセージを送信します。

クライアントページの変更

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

ログイン後にコピー

上記のコードでは、弾幕のスタイルを設定するためのスタイルシートを追加しました。メッセージを受信すると、新しい弾幕要素を作成し、そのアニメーション効果、開始位置、テキストを設定します。次に、弾幕をページに追加し、弾幕の配列を保持して、弾幕の再生順序を管理します。ページのラグを避けるために、弾丸チャットの表示を最大 10 個に制限し、弾丸チャットのアニメーションが終了するとページと配列から削除します。

4. 実行とテスト

チャットルームサーバーの起動

チャットルームサーバーが配置されているディレクトリをコマンドラインに入力し、実行します。次のコマンド:

php chat_room.php start

ログイン後にコピー

クライアントページを開く

ブラウザでクライアントページを開き、メッセージを入力して送信ボタンをクリックします。チャットルームサーバーは、受信したメッセージを接続されているすべてのクライアントに送信し、ページ上に集中砲火として表示します。

概要

この記事では、Workermanをベースとしたオンラインチャットシステムの弾幕機能の実装方法を紹介します。対応するコードとスタイルシートを追加することで、弾幕メッセージを受信して表示する機能を実装できます。このような弾幕機能により、チャットルームの双方向性と楽しさが向上し、ユーザーがよりアクティブで積極的に参加できるようになります。この記事のサンプルコードが、読者が独自のチャットルームの集中砲火機能をすぐに実装するのに役立つことを願っています。

以上がWorkermanをベースにしたオンラインチャットシステムの弾幕機能の実装方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。