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

ホームページ

PHPフレームワーク

Workerman

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

王林

Sep 08, 2023 am 09:09 AM

workermanオンラインチャット弾幕機能

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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Workermanの組み込みWebsocketクライアントの主な機能は何ですか？Mar 18, 2025 pm 04:20 PM

WorkermanのWebSocketクライアントは、非同期通信、高性能、スケーラビリティ、セキュリティなどの機能とのリアルタイム通信を強化し、既存のシステムと簡単に統合します。

リアルタイムのコラボレーションツールを構築するためにWorkermanを使用する方法は？Mar 18, 2025 pm 04:15 PM

この記事では、リアルタイムのコラボレーションツールを構築するために、高性能PHPサーバーであるWorkermanを使用して説明します。インストール、サーバーのセットアップ、リアルタイム機能の実装、既存のシステムとの統合をカバーし、Workermanのキーfを強調します

低遅延アプリケーションのためにWorkermanを最適化する最良の方法は何ですか？Mar 18, 2025 pm 04:14 PM

この記事では、非同期プログラミング、ネットワーク構成、リソース管理、データ転送の最小化、負荷分散、定期的な更新に焦点を当てた低遅延アプリケーションのWorkermanの最適化について説明します。

WorkermanおよびMySQLとのリアルタイムデータの同期を実装する方法は？Mar 18, 2025 pm 04:13 PM

この記事では、WorkermanとMySQLを使用したリアルタイムデータ同期の実装、セットアップ、ベストプラクティス、データの一貫性の確保、一般的な課題への対処に焦点を当てています。

サーバーレスアーキテクチャでWorkermanを使用するための重要な考慮事項は何ですか？Mar 18, 2025 pm 04:12 PM

この記事では、Swaremanをサーバーレスアーキテクチャに統合し、スケーラビリティ、ステートレス性、コールドスタート、リソース管理、統合の複雑さに焦点を当てています。 Workermanは、高い並行性を通じてパフォーマンスを向上させ、Cold STAを減らします

Workermanで高性能のeコマースプラットフォームを構築する方法は？Mar 18, 2025 pm 04:11 PM

この記事では、Workermanを使用して高性能のeコマースプラットフォームの構築について説明し、Websocketのサポートやスケーラビリティなどの機能に焦点を当て、リアルタイムの相互作用と効率を向上させます。

WorkermanのWebsocketサーバーの高度な機能は何ですか？Mar 18, 2025 pm 04:08 PM

WorkermanのWebSocketサーバーは、一般的な脅威に対するスケーラビリティ、低レイテンシ、セキュリティ対策などの機能とのリアルタイム通信を強化します。

リアルタイム分析ダッシュボードを構築するためにWorkermanを使用する方法は？Mar 18, 2025 pm 04:07 PM

この記事では、高性能PHPサーバーであるWorkermanを使用して、リアルタイム分析ダッシュボードを構築することについて説明します。これは、React、Vue.JS、Angularなどのフレームワークとのインストール、サーバーのセットアップ、データ処理、フロントエンドの統合をカバーしています。キーfeatur

See all articles