検索

ホームページ  >  記事  >  バックエンド開発  >  PHP Websocket開発チュートリアル、リアルタイムアンケート機能の構築

PHP Websocket開発チュートリアル、リアルタイムアンケート機能の構築

WBOY
WBOYオリジナル
2023-12-17 14:46:171024ブラウズ

PHP Websocket开发教程，构建实时问卷调查功能

PHP Websocket 開発チュートリアル、リアルタイムのアンケート機能の構築、特定のコード例が必要

Websocket テクノロジは、Web アプリケーションに組み込むことができる新しいネットワーク プロトコルです。 -時間通信機能。従来の HTTP プロトコルとは異なり、Websocket プロトコルは双方向通信を実現でき、中断することなくデータを送受信できます。この記事では、PHPとWebsocket技術を利用したリアルタイムアンケート機能の構築方法と具体的なコード例を紹介します。

  1. サーバーへの Ratchet のインストール

Ratchet は、Websocket アプリケーションを開発するための PHP ライブラリです。始める前に、サーバーに Ratchet をインストールする必要があります。次のコマンドを使用します。 

composer require cboden/ratchet
  1. Websocket サーバー コードの書き込み

まず、Ratchet WebSocket サーバーを作成する必要があります。この例では、すべてのコードを PHP ファイルに配置します。このファイルでは、RatchetWebSocketWsServer クラスを拡張するクラスを作成します。コンストラクターでは、接続されたクライアントを格納するインスタンス変数 $clients を初期化します。

次はサーバー コードです: 

<?php

require __DIR__ . '/vendor/autoload.php'; // 引入 ratchet

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetWebSocketWsServer;

class PollServer implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo 'Client ' . $conn->resourceId . ' connected
';
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo 'Client ' . $conn->resourceId . ' disconnected
';
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
        // 在这里处理逻辑...
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        echo "An error has occurred: {$e->getMessage()}
";
        $conn->close();
    }
}

$server = new RatchetApp('localhost', 8080); // 创建一个新的 WebSocket 服务器
$server->route('/poll', new WsServer(new PollServer())); // 定义路由
$server->run(); // 启动服务器

上記のコードは、RatchetMessageComponentInterface インターフェイスを実装する PollServer という名前のクラスを定義します。 MessageComponentInterface インターフェイスは非常にシンプルで、メソッドは onOpen、onClose、onMessage、onError## の 4 つだけです。 # 。これらのメソッドは、クライアントがサーバーに接続するとき、サーバーから切断するとき、新しいメッセージを受信するとき、およびエラーが発生するときに呼び出されます。上記のコードではログを出力するだけですが、実際のロジックを扱う際に必要に応じて変更してください。

次に、

PollServer クラスを RatchetWebSocketWsServer クラスのコンストラクターに渡す必要があります。これにより、WebSocket プロトコルを使用してクライアントと通信する新しい WebSocket サーバーが作成されます。

最後に、クライアントがサーバーに接続できるようにルートを定義する必要があります。上記のコードでは、

/poll という名前のルートを定義します。運用環境では、WebSocket サーバーの実際のドメイン名とポートを使用する必要があります。

    クライアント側コードの作成
この例では、JavaScript を使用してクライアント側コードを作成します。まず、HTML ファイルに次のコードを追加して WebSocket 接続を作成します。 

<!DOCTYPE html>
<html>
<head>
    <title>Real-time Poll</title>
</head>
<body>
    <h1>Real-time Poll</h1>
    <script>
        const connection = new WebSocket('ws://localhost:8080/poll'); // 替换为真实的域名和端口

        connection.addEventListener('open', () => {
            console.log('Connected');
        });

        connection.addEventListener('message', event => {
            const message = JSON.parse(event.data);
            console.log('Received', message);
        });

        connection.addEventListener('close', () => {
            console.log('Disconnected');
        });

        connection.addEventListener('error', error => {
            console.error(error);
        });
    </script>
</body>
</html>

上記のコードは、

connection という名前の新しい WebSocket オブジェクトを作成し、ws:/ /localhost を使用します。サーバー URL として 8080/poll を指定します。運用環境では、この URL を実際のサーバーのドメイン名とポートに置き換える必要があります。

次に、接続の確立、メッセージの受信、接続の切断、およびエラー イベントを処理するために、いくつかのイベント リスナーを追加しました。メッセージを受信すると、

JSON.parse を使用してメッセージを JavaScript オブジェクトに解析し、コンソールに記録します。

    リアルタイムアンケート機能の実装
WebSocketサーバーとクライアントが作成できたので、次はリアルタイムアンケート機能を実装する必要があります。次のコード例を考えてみましょう。 

public function onMessage(ConnectionInterface $from, $msg) {
    echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
    $data = json_decode($msg, true);
    switch ($data['action']) {
        case 'vote':
            $vote = $data['vote'];
            $this->broadcast([
                'action' => 'update',
                'votes' => [
                    'yes' => $this->getVoteCount('yes'),
                    'no' => $this->getVoteCount('no')
                ]
            ]);
            break;
    }
}

private function broadcast($message) {
    foreach ($this->clients as $client) {
        $client->send(json_encode($message));
    }
}

private function getVoteCount($option) {
    // 在这里查询投票选项的数量...
}

上記のコードでは、クライアントから送信されたメッセージを

onMessage メソッドで処理します。このメソッドはメッセージをデコードし、switch ステートメントを使用して action フィールドをチェックします。 action が vote と等しい場合、投票数を更新し、broadcast メソッドを使用してすべてのクライアントに更新を送信します。

broadcast メソッドでは、ループを使用してすべてのクライアントをループし、メッセージを各クライアントに送信します。このメソッドは、JSON エンコードされたメッセージをクライアントに送信します。このメッセージは、connection.addEventListener('message', ...) イベント ハンドラーに登録されたイベント ハンドラーで使用されます。

    完全なコード例
以下は、この記事のすべてのコード例の完全版です:

server.php: 

<?php

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

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetWebSocketWsServer;

class PollServer implements MessageComponentInterface {
    protected $clients;

    public function __construct() {
        $this->clients = new SplObjectStorage;
    }

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo 'Client ' . $conn->resourceId . ' connected
';
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo 'Client ' . $conn->resourceId . ' disconnected
';
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        echo 'Received message ' . $msg . ' from client ' . $from->resourceId . "
";
        $data = json_decode($msg, true);
        switch ($data['action']) {
            case 'vote':
                $vote = $data['vote'];
                $this->broadcast([
                    'action' => 'update',
                    'votes' => [
                        'yes' => $this->getVoteCount('yes'),
                        'no' => $this->getVoteCount('no')
                    ]
                ]);
                break;
        }
    }

    public function onError(ConnectionInterface $conn, Exception $e) {
        echo "An error has occurred: {$e->getMessage()}
";
        $conn->close();
    }

    private function broadcast($message) {
        foreach ($this->clients as $client) {
            $client->send(json_encode($message));
        }
    }

    private function getVoteCount($option) {
        // 在这里查询投票选项的数量...
    }
}

$server = new RatchetApp('localhost', 8080);
$server->route('/poll', new WsServer(new PollServer()));
$server->run();

index .html: 

<!DOCTYPE html>
<html>
<head>
    <title>Real-time Poll</title>
</head>
<body>
    <h1>Real-time Poll</h1>
    <form>
        <label><input type="radio" name="vote" value="yes"> Yes</label>
        <label><input type="radio" name="vote" value="no"> No</label>
        <button type="submit">Vote</button>
    </form>
    <ul>
        <li>Yes: <span id="yes-votes">0</span></li>
        <li>No: <span id="no-votes">0</span></li>
    </ul>
    <script>
        const connection = new WebSocket('ws://localhost:8080/poll');

        connection.addEventListener('open', () => {
            console.log('Connected');
        });

        connection.addEventListener('message', event => {
            const message = JSON.parse(event.data);
            if (message.action === 'update') {
                document.getElementById('yes-votes').textContent = message.votes.yes;
                document.getElementById('no-votes').textContent = message.votes.no;
            }
        });

        connection.addEventListener('close', () => {
            console.log('Disconnected');
        });

        connection.addEventListener('error', error => {
            console.error(error);
        });

        document.querySelector('form').addEventListener('submit', event => {
            event.preventDefault();
            const vote = document.querySelector('input[name="vote"]:checked').value;
            connection.send(JSON.stringify({
                action: 'vote',
                vote: vote
            }));
        });
    </script>
</body>
</html>

上記のコード例では、投票結果をサーバーに送信するための単純な HTML フォームを提供しています。ユーザーがフォームを送信すると、投票結果が JSON オブジェクトとしてサーバー上の WebSocket 接続に送信されます。

クライアントが更新メッセージを受信すると、HTML 内の投票結果を更新します。

    概要
この記事では、PHP と Websocket テクノロジを使用してリアルタイム アンケート機能を構築する方法と、具体的なコード例を紹介しました。 Websocket テクノロジーを使用すると、チャット ルーム、ゲーム、リアルタイム アップデートなど、さまざまなリアルタイム通信機能を実装できます。 Websocket テクノロジーについてさらに詳しく知りたい場合は、Ratchet のドキュメントを参照することをお勧めします。このドキュメントには、Websocket 開発に関する詳細なガイドと例が多数掲載されています。

以上がPHP Websocket開発チュートリアル、リアルタイムアンケート機能の構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php JavaScript json html switch 构造函数 循环 接口 对象 事件 http websocket
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：PHP インターフェースと ECharts を使用して応答性の高い統計グラフを生成する方法次の記事：PHP インターフェースと ECharts を使用して応答性の高い統計グラフを生成する方法

関連記事

続きを見る