Rumah  >  Artikel  >  pembangunan bahagian belakang  >  Tutorial pembangunan PHP Websocket, membina fungsi soal selidik masa nyata

Tutorial pembangunan PHP Websocket, membina fungsi soal selidik masa nyata

WBOY
WBOYasal
2023-12-17 14:46:17985semak imbas

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

Tutorial pembangunan PHP Websocket, membina fungsi soal selidik masa nyata, memerlukan contoh kod khusus

Teknologi websocket ialah protokol rangkaian baru yang boleh membina fungsi komunikasi masa nyata dalam aplikasi web. Tidak seperti protokol HTTP tradisional, protokol Websocket boleh mencapai komunikasi dua hala dan boleh menghantar dan menerima data tanpa gangguan. Dalam artikel ini, kami akan memperkenalkan cara membina fungsi tinjauan masa nyata menggunakan teknologi PHP dan Websocket, serta menyediakan contoh kod khusus.

  1. Pasang Ratchet pada pelayan

Ratchet ialah perpustakaan PHP untuk membangunkan aplikasi Websocket. Sebelum memulakan, anda perlu memasang Ratchet pada pelayan anda. Gunakan arahan berikut:

composer require cboden/ratchet
  1. Tulis kod pelayan Websocket

Pertama, kita perlu mencipta pelayan Ratchet WebSocket. Dalam contoh ini, kami akan meletakkan semua kod dalam fail PHP. Dalam fail ini, kami akan mencipta kelas yang akan melanjutkan kelas RatchetWebSocketWsServer. Dalam pembina, kami akan memulakan pembolehubah contoh $clients yang akan menyimpan klien yang disambungkan. $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 接口非常简单,它只有四个方法,分别是 onOpenonCloseonMessageonError。这些方法会在客户端连接到服务器时、从服务器断开连接时、接收到新消息时和遇到错误时调用。在上面的代码中,我们只是简单地输出了一些日志,但在处理实际逻辑时,你可以根据需要进行更改。

接下来,我们需要将 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', ...)

Berikut ialah kod pelayan:
    <?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. Kod di atas mentakrifkan kelas bernama PollServer, yang melaksanakan antara muka RatchetMessageComponentInterface. Antara muka MessageComponentInterface adalah sangat mudah Ia hanya mempunyai empat kaedah, iaitu onOpen, onClose, onMessage dan onError. Kaedah ini dipanggil apabila klien menyambung ke pelayan, apabila ia memutuskan sambungan daripada pelayan, apabila mesej baharu diterima dan apabila ralat ditemui. Dalam kod di atas, kami hanya mengeluarkan beberapa log, tetapi anda boleh mengubahnya mengikut keperluan apabila berurusan dengan logik sebenar. </code.> </li> </ol>Seterusnya, kita perlu menghantar kelas <code>PollServer kepada pembina kelas RatchetWebSocketWsServer. Ini akan mencipta pelayan WebSocket baharu yang akan berkomunikasi dengan klien menggunakan protokol WebSocket.

    Akhir sekali, kita perlu menentukan laluan supaya pelanggan boleh menyambung ke pelayan. Dalam kod di atas, kami mentakrifkan laluan bernama /poll. Dalam persekitaran pengeluaran, anda harus menggunakan nama domain dan port sebenar untuk pelayan WebSocket.

      Menulis kod sisi klien

      Dalam contoh ini, kami akan menggunakan JavaScript untuk menulis kod sisi klien. Mula-mula, tambah kod berikut dalam fail HTML untuk membuat sambungan 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>

      Kod di atas mencipta objek WebSocket baharu bernama connection dan menggunakan ws://localhost: 8080/poll sebagai URL pelayan. Dalam persekitaran pengeluaran, anda harus menggantikan URL ini dengan nama domain dan port pelayan sebenar.

        Seterusnya, kami menambah beberapa pendengar acara untuk mengendalikan penubuhan sambungan, penerimaan mesej, pemutusan sambungan dan peristiwa ralat. Apabila mesej diterima, kami menggunakan JSON.parse untuk menghuraikan mesej ke dalam objek JavaScript dan logkannya pada konsol.
        1. Laksanakan fungsi soal selidik masa nyata

        Sekarang kami telah mencipta pelayan dan pelanggan WebSocket, kami perlu melaksanakan fungsi soal selidik masa nyata. Pertimbangkan contoh kod berikut: 🎜rrreee🎜Dalam kod di atas, kami mengendalikan mesej yang dihantar oleh pelanggan dalam kaedah onMessage. Kaedah ini menyahkod mesej dan menyemak medan action menggunakan pernyataan switch. Jika tindakan adalah sama dengan undi, maka kami mengemas kini kiraan undian dan menghantar kemas kini kepada semua pelanggan menggunakan kaedah siaran. 🎜🎜Dalam kaedah siaran, kami menggunakan gelung untuk mengulangi semua pelanggan dan menghantar mesej kepada setiap pelanggan. Kaedah ini menghantar mesej berkod JSON kepada klien, yang akan digunakan dengan pengendali acara yang didaftarkan dalam pengendali acara connection.addEventListener('message', ...). Contoh Kod Penuh Borang HTML , digunakan untuk menghantar keputusan undian ke pelayan. Apabila pengguna menyerahkan borang, kami menghantar keputusan pengundian sebagai objek JSON kepada sambungan WebSocket pada pelayan. 🎜🎜Kami mengemas kini keputusan pengundian dalam HTML apabila pelanggan menerima mesej kemas kini. 🎜🎜🎜Ringkasan🎜🎜🎜Dalam artikel ini, kami memperkenalkan cara membina fungsi tinjauan masa nyata menggunakan teknologi PHP dan Websocket, dan memberikan contoh kod khusus. Teknologi websocket boleh digunakan untuk melaksanakan pelbagai fungsi komunikasi masa nyata, seperti bilik sembang, permainan, kemas kini masa nyata, dsb. Jika anda ingin mengetahui lebih lanjut tentang teknologi Websocket, kami mengesyorkan anda menyemak dokumentasi Ratchet, yang menyediakan banyak panduan dan contoh terperinci tentang pembangunan Websocket. 🎜

      Atas ialah kandungan terperinci Tutorial pembangunan PHP Websocket, membina fungsi soal selidik masa nyata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan:
    Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn