PHP Websocket 개발 튜토리얼, 실시간 설문지 기능 구축-PHP 튜토리얼-php.cn

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

PHP Websocket 개발 튜토리얼, 실시간 설문지 기능 구축, 특정 코드 예제 필요

Websocket 기술은 웹 애플리케이션에서 실시간 통신 기능을 구축할 수 있는 새로운 네트워크 프로토콜입니다. 기존 HTTP 프로토콜과 달리 Websocket 프로토콜은 양방향 통신이 가능하고 중단 없이 데이터를 보내고 받을 수 있습니다. 본 글에서는 PHP와 Websocket 기술을 활용하여 실시간 설문조사 기능을 구축하는 방법을 소개하고 구체적인 코드 예시를 제공하겠습니다.

서버에 Ratchet 설치

Ratchet은 Websocket 애플리케이션 개발을 위한 PHP 라이브러리입니다. 시작하기 전에 서버에 Ratchet을 설치해야 합니다. 다음 명령을 사용하세요.

composer require cboden/ratchet

로그인 후 복사

Websocket 서버 코드 작성

먼저 Ratchet WebSocket 서버를 생성해야 합니다. 이 예에서는 모든 코드를 PHP 파일에 넣습니다. 이 파일에서는 RatchetWebSocketWsServer 클래스를 확장하는 클래스를 생성합니다. 생성자에서 연결된 클라이언트를 저장할 인스턴스 변수 $clients를 초기화합니다. $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 服务器使用真实的域名和端口。

编写客户端代码

在本示例中，我们将使用 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 对象，并在控制台上记录。

实现实时问卷调查功能

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

다음은 서버 코드입니다.

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

로그인 후 복사

위 코드는 RatchetMessageComponentInterface 인터페이스를 구현하는 PollServer라는 클래스를 정의합니다. MessageComponentInterface 인터페이스는 onOpen, onClose, onMessage 및 오류 발생. 이러한 메서드는 클라이언트가 서버에 연결될 때, 서버와의 연결이 끊어질 때, 새 메시지가 수신될 때, 오류가 발생할 때 호출됩니다. 위 코드에서는 일부 로그만 출력했지만, 실제 로직을 처리할 때 필요에 따라 변경할 수 있습니다.

다음으로 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>
    <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>

로그인 후 복사

위 코드는 connection이라는 새 WebSocket 개체를 만들고 ws://localhost: 8080/poll을 사용합니다. 를 서버 URL로 사용하세요. 프로덕션 환경에서는 이 URL을 실제 서버 도메인 이름 및 포트로 바꿔야 합니다.

JSON.parse

onMessage

switch

action

vote

broadcast

connection.addEventListener('message', ...)

위 내용은 PHP Websocket 개발 튜토리얼, 실시간 설문지 기능 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!