suchen

Heim  >  Artikel  >  Backend-Entwicklung  >  PHP-Websocket-Entwicklungs-Tutorial, Aufbau einer Echtzeit-Fragebogenfunktion

PHP-Websocket-Entwicklungs-Tutorial, Aufbau einer Echtzeit-Fragebogenfunktion

WBOY
WBOYOriginal
2023-12-17 14:46:171021Durchsuche

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

PHP Websocket-Entwicklungs-Tutorial, Aufbau einer Echtzeit-Fragebogenfunktion, erfordert spezifische Codebeispiele

Websocket-Technologie ist ein neues Netzwerkprotokoll, das Echtzeit-Kommunikationsfunktionen in Webanwendungen erstellen kann. Im Gegensatz zum herkömmlichen HTTP-Protokoll kann das Websocket-Protokoll eine bidirektionale Kommunikation erreichen und Daten ununterbrochen senden und empfangen. In diesem Artikel stellen wir vor, wie man mithilfe der PHP- und Websocket-Technologie eine Echtzeit-Umfragefunktion erstellt, und stellen spezifische Codebeispiele bereit.

  1. Ratchet auf dem Server installieren

Ratchet ist eine PHP-Bibliothek zum Entwickeln von Websocket-Anwendungen. Bevor Sie beginnen, müssen Sie Ratchet auf Ihrem Server installieren. Verwenden Sie den folgenden Befehl: 

composer require cboden/ratchet
  1. Schreiben Sie den Websocket-Servercode

Zuerst müssen wir einen Ratchet WebSocket-Server erstellen. In diesem Beispiel werden wir den gesamten Code in eine PHP-Datei einfügen. In dieser Datei erstellen wir eine Klasse, die die Klasse RatchetWebSocketWsServer erweitert. Im Konstruktor initialisieren wir eine Instanzvariable $clients, die die verbundenen Clients speichert. $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(); // 启动服务器

上述代码定义了一个名为 PollServer 的类，该类实现了 RatchetMessageComponentInterface 接口。 MessageComponentInterface 接口非常简单，它只有四个方法，分别是 onOpen、onClose、onMessage 和 onError。这些方法会在客户端连接到服务器时、从服务器断开连接时、接收到新消息时和遇到错误时调用。在上面的代码中，我们只是简单地输出了一些日志，但在处理实际逻辑时，你可以根据需要进行更改。

接下来，我们需要将 PollServer 类传递给 RatchetWebSocketWsServer 类的构造函数中。这将创建一个新的 WebSocket 服务器，该服务器将使用 WebSocket 协议与客户端进行通信。

最后，我们需要定义一个路由，以便客户端可以连接到服务器。在上面的代码中，我们定义了一个名为 /poll 的路由。在生产环境中，你应该为 WebSocket 服务器使用真实的域名和端口。

  1. 编写客户端代码

在本示例中，我们将使用 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:8080/poll 作为服务器 URL。在生产环境中，你应该将此 URL 替换为真实的服务器域名和端口。

接下来，我们添加了几个事件侦听器，用于处理连接建立、接收消息、连接断开和错误事件。在接收到消息时，我们使用 JSON.parse 将消息解析为 JavaScript 对象，并在控制台上记录。

  1. 实现实时问卷调查功能

现在我们已经创建了 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', ...)

Das Folgende ist der Servercode: 
    <?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();
  1. Der obige Code definiert eine Klasse mit dem Namen PollServer, die die Schnittstelle RatchetMessageComponentInterface implementiert. Die MessageComponentInterface-Schnittstelle ist sehr einfach. Sie verfügt nur über vier Methoden, nämlich onOpen, onClose, onMessage und onError. Diese Methoden werden aufgerufen, wenn der Client eine Verbindung zum Server herstellt, wenn er die Verbindung zum Server trennt, wenn eine neue Nachricht empfangen wird und wenn ein Fehler auftritt. Im obigen Code geben wir einfach einige Protokolle aus, aber Sie können es bei Bedarf ändern, wenn Sie sich mit der eigentlichen Logik befassen.
Als nächstes müssen wir die Klasse PollServer an den Konstruktor der Klasse RatchetWebSocketWsServer übergeben. Dadurch wird ein neuer WebSocket-Server erstellt, der über das WebSocket-Protokoll mit dem Client kommuniziert.

Abschließend müssen wir eine Route definieren, damit Clients eine Verbindung zum Server herstellen können. Im obigen Code definieren wir eine Route mit dem Namen /poll. In einer Produktionsumgebung sollten Sie den echten Domänennamen und Port für den WebSocket-Server verwenden.

    Clientseitigen Code schreiben

    In diesem Beispiel verwenden wir JavaScript, um clientseitigen Code zu schreiben. Fügen Sie zunächst den folgenden Code in die HTML-Datei ein, um eine WebSocket-Verbindung zu erstellen: 

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

    Der obige Code erstellt ein neues WebSocket-Objekt mit dem Namen connection und verwendet ws://localhost: 8080/poll als Server-URL. In einer Produktionsumgebung sollten Sie diese URL durch den echten Serverdomänennamen und -port ersetzen.

      Als nächstes haben wir mehrere Ereignis-Listener hinzugefügt, um Verbindungsaufbau, Nachrichtenempfang, Verbindungstrennung und Fehlerereignisse zu verarbeiten. Wenn eine Nachricht empfangen wird, verwenden wir JSON.parse, um die Nachricht in ein JavaScript-Objekt zu analysieren und auf der Konsole zu protokollieren.
        1. Implementieren Sie die Echtzeit-Fragebogenfunktion

      Da wir nun den WebSocket-Server und -Client erstellt haben, müssen wir die Echtzeit-Fragebogenfunktion implementieren. Betrachten Sie das folgende Codebeispiel: 🎜rrreee🎜Im obigen Code verarbeiten wir die vom Client gesendete Nachricht in der Methode onMessage. Diese Methode dekodiert die Nachricht und überprüft das Feld action mithilfe einer switch-Anweisung. Wenn action gleich vote ist, aktualisieren wir die Stimmenzahl und senden die Aktualisierung mithilfe der Methode broadcast an alle Clients. 🎜🎜Bei der broadcast-Methode verwenden wir eine Schleife, um alle Clients zu durchlaufen und die Nachricht an jeden Client zu senden. Diese Methode sendet eine JSON-codierte Nachricht an den Client, die mit dem im Ereignishandler connection.addEventListener('message', ...) registrierten Ereignishandler verwendet wird. 🎜🎜🎜Vollständige Codebeispiele🎜🎜🎜Hier sind die Vollversionen aller Codebeispiele in diesem Artikel: 🎜🎜server.php: 🎜rrreee🎜index.html: 🎜rrreee🎜Im obigen Codebeispiel haben wir ein einfaches bereitgestellt HTML-Formular, das zum Senden von Abstimmungsergebnissen an den Server verwendet wird. Wenn der Benutzer das Formular absendet, senden wir die Abstimmungsergebnisse als JSON-Objekt an eine WebSocket-Verbindung auf dem Server. 🎜🎜Wir aktualisieren die Abstimmungsergebnisse in HTML, wenn der Kunde die Aktualisierungsnachricht erhält. 🎜🎜🎜Zusammenfassung🎜🎜🎜In diesem Artikel haben wir vorgestellt, wie man mithilfe von PHP und Websocket-Technologie eine Echtzeit-Umfragefunktion erstellt, und spezifische Codebeispiele bereitgestellt. Mithilfe der Websocket-Technologie können verschiedene Echtzeit-Kommunikationsfunktionen wie Chatrooms, Spiele, Echtzeit-Updates usw. implementiert werden. Wenn Sie mehr über die Websocket-Technologie erfahren möchten, empfehlen wir Ihnen, sich die Dokumentation von Ratchet anzusehen, die viele detaillierte Anleitungen und Beispiele zur Websocket-Entwicklung enthält. 🎜

    Das obige ist der detaillierte Inhalt vonPHP-Websocket-Entwicklungs-Tutorial, Aufbau einer Echtzeit-Fragebogenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    php JavaScript json html switch 构造函数 循环 接口 对象 事件 http websocket
    Stellungnahme：
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Vorheriger Artikel：So verwenden Sie die PHP-Schnittstelle und ECharts, um responsive statistische Diagramme zu erstellenNächster Artikel：So verwenden Sie die PHP-Schnittstelle und ECharts, um responsive statistische Diagramme zu erstellen

    In Verbindung stehende Artikel

    Mehr sehen