简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
집
기사
Q&A
강의
주제
다운로드
게임
사전
최근 업데이트

집  >  기사  >  백엔드 개발  >  PHP Websocket 개발 튜토리얼, 실시간 설문지 기능 구축

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

WBOY
WBOY원래의
2023-12-17 14:46:17983검색

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

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

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

  1. 서버에 Ratchet 설치

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

composer require cboden/ratchet
  1. 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 服务器使用真实的域名和端口。

  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', ...)

다음은 서버 코드입니다. 
    <?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. 위 코드는 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를 사용하여 메시지를 JavaScript 개체로 구문 분석하고 콘솔에 기록합니다.
        1. 실시간 설문 기능 구현

      WebSocket 서버와 클라이언트를 생성했으니 이제 실시간 설문 기능을 구현해야 합니다. 다음 코드 예제를 살펴보세요. 🎜rrreee🎜위 코드에서는 onMessage 메서드에서 클라이언트가 보낸 메시지를 처리합니다. 이 메소드는 메시지를 디코딩하고 switch 문을 사용하여 action 필드를 확인합니다. action이 vote와 같으면 투표 수를 업데이트하고 broadcast 메서드를 사용하여 모든 클라이언트에 업데이트를 보냅니다. 🎜🎜broadcast 메서드에서는 루프를 사용하여 모든 클라이언트를 반복하고 각 클라이언트에 메시지를 보냅니다. 이 메소드는 connection.addEventListener('message', ...) 이벤트 핸들러에 등록된 이벤트 핸들러와 함께 사용되는 JSON 인코딩 메시지를 클라이언트에 보냅니다. 🎜🎜🎜전체 코드 예제🎜🎜🎜다음은 이 문서에 있는 모든 코드 예제의 전체 버전입니다. 🎜🎜server.php: 🎜rrreee🎜index.html: 🎜rrreee🎜위 코드 예제에서는 간단한 코드를 제공했습니다. 투표 결과를 서버로 보내는 데 사용되는 HTML 양식입니다. 사용자가 양식을 제출하면 투표 결과를 JSON 개체로 서버의 WebSocket 연결에 보냅니다. 🎜🎜클라이언트가 업데이트 메시지를 받으면 투표 결과를 HTML로 업데이트합니다. 🎜🎜🎜요약🎜🎜🎜이 글에서는 PHP와 Websocket 기술을 활용하여 실시간 설문조사 기능을 구축하는 방법을 소개하고 구체적인 코드 예시를 제공했습니다. 웹소켓 기술을 활용해 채팅방, 게임, 실시간 업데이트 등 다양한 실시간 커뮤니케이션 기능을 구현할 수 있다. Websocket 기술에 대해 더 자세히 알아보려면 Websocket 개발에 대한 자세한 가이드와 예제를 제공하는 Ratchet의 설명서를 확인하는 것이 좋습니다. 🎜

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

    php JavaScript json html switch 构造函数 循环 接口 对象 事件 http websocket
    성명：
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
    이전 기사：PHP 인터페이스와 ECharts를 사용하여 반응형 통계 차트를 생성하는 방법다음 기사：PHP 인터페이스와 ECharts를 사용하여 반응형 통계 차트를 생성하는 방법

    관련 기사

    더보기