Cipta aplikasi sembang masa nyata menggunakan PHP dan WebSocket

Dengan perkembangan Internet, permintaan untuk komunikasi masa nyata juga semakin meningkat. Apl sembang langsung popular kerana kedekatan dan kemudahannya. Artikel ini akan menerangkan cara mencipta aplikasi sembang masa nyata yang boleh dipercayai menggunakan PHP dan WebSocket.

Apakah itu WebSocket?

WebSocket ialah protokol untuk komunikasi dupleks penuh antara penyemak imbas web dan pelayan web. Ini bermakna ia membenarkan komunikasi dua hala dengan pelayan dan bukannya permintaan dan respons melalui protokol HTTP. Menggunakan WebSocket, komunikasi masa nyata yang cekap dan cekap adalah mungkin, yang sangat penting untuk aplikasi sembang masa nyata.

Cara mencipta pelayan WebSocket menggunakan PHP

Untuk mencipta pelayan WebSocket, kami akan menggunakan perpustakaan Ratchet. Ratchet ialah perpustakaan WebSocket PHP berdasarkan komponen Symfony yang boleh membantu kami membuat pelayan WebSocket dengan cepat dan mudah. Untuk menggunakan Ratchet, anda perlu memasang Komposer dalam PHP, yang merupakan pengurus pergantungan aplikasi PHP. Jika anda belum memasang Komposer, pasang dahulu.

Buat folder projek PHP baharu dan gunakan arahan Komposer berikut untuk memasang Ratchet:

composer require cboden/ratchet

Setelah Ratchet dipasang, kita boleh mula menulis kod pelayan WebSocket. Berikut ialah contoh mudah:

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

use RatchetMessageComponentInterface;
use RatchetConnectionInterface;
use RatchetServerIoServer;
use RatchetHttpHttpServer;
use RatchetWebSocketWsServer;

class Chat implements MessageComponentInterface {
    protected $clients;

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

    public function onOpen(ConnectionInterface $conn) {
        $this->clients->attach($conn);
        echo "New connection! ({$conn->resourceId})
";
    }

    public function onMessage(ConnectionInterface $from, $msg) {
        foreach ($this->clients as $client) {
            if ($from !== $client) {
                $client->send($msg);
            }
        }
    }

    public function onClose(ConnectionInterface $conn) {
        $this->clients->detach($conn);
        echo "Connection {$conn->resourceId} has disconnected
";
    }

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

$server = IoServer::factory(
    new HttpServer(
        new WsServer(
            new Chat()
        )
    ),
    8080
);

echo "Server started at port 8080...
";

$server->run();

Dalam contoh ini, kami mentakrifkan kelas bernama "Sembang" yang melaksanakan antara muka MessageComponentInterface Ratchet. Kami menggunakan SplObjectStorage untuk menyimpan sambungan klien, dan apabila klien menyambung ke pelayan, kami menggunakan fungsi onOpen() untuk melampirkannya pada storan. Apabila mesej dihantar ke pelayan, kami menggunakan fungsi onMessage() untuk menghantar mesej kepada semua pelanggan lain. Apabila pelanggan memutuskan sambungan, kami menggunakan fungsi onClose() untuk mengalih keluar klien daripada storan.

Akhir sekali, kami menggunakan kelas IoServer untuk mengikat pelayan WebSocket ke port 8080 dan memulakan pelayan. Kini, kami telah berjaya mencipta pelayan WebSocket yang ringkas dan boleh menyambungkannya ke pelayar web dengan menggunakan JavaScript WebSocket API.

Cara membuat klien menggunakan JavaScript dan API WebSocket

Sekarang kita mempunyai pelayan WebSocket, kita perlu menulis kod JavaScript untuk menyambung kepadanya. Kami akan menggunakan API WebSocket.

Berikut ialah contoh klien WebSocket mudah:

let ws = new WebSocket('ws://localhost:8080');

ws.onopen = () => {
    console.log('Connected to WebSocket server');
};

ws.onmessage = evt => {
    console.log('Received message: ' + evt.data);
};

ws.onclose = () => {
    console.log('Disconnected from WebSocket server');
};

ws.onerror = error => {
    console.error('WebSocket error: ' + error);
};

function sendMsg() {
    let input = document.getElementById('message');
    let msg = input.value;
    ws.send(msg);
    input.value = '';
}

Kami menggunakan pembina WebSocket untuk mencipta contoh WebSockets baharu dan menyambungkannya ke pelayan WebSocket yang ditentukan. Kami menggunakan pengendali acara onopen, onmessage, onclose dan onerror untuk mengendalikan keadaan dan mesej WebSocket yang berbeza. Kami juga mentakrifkan fungsi yang dipanggil "sendMsg" untuk menghantar mesej yang dimasukkan pengguna ke pelayan. Fungsi ini memanggil fungsi send() WebSocket untuk menghantar data.

Akhir sekali, kita perlu mencipta borang ringkas dalam halaman HTML dengan input teks dan butang hantar supaya kita boleh menghantar mesej. Berikut ialah kod HTML:

<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Chat App</title>
    <script src="chat.js"></script>
</head>
<body>
    <h1>WebSocket Chat App</h1>
    <div id="messages"></div>
    <input type="text" id="message">
    <button onclick="sendMsg()">Send</button>
</body>
</html>

Dengan menggunakan halaman HTML dengan kod JavaScript, kami kini boleh mencipta aplikasi sembang langsung yang lengkap. Apabila pengguna memasukkan mesej dalam penyemak imbas dan mengklik butang hantar, mesej itu dihantar ke pelayan melalui WebSocket dan dipaparkan dalam semua pelayar klien lain yang bersambung.

Ringkasan

Dalam artikel ini, kami mencipta aplikasi sembang masa nyata menggunakan PHP dan WebSocket. Kami menggunakan perpustakaan Ratchet untuk mencipta pelayan WebSocket dengan cepat dan API WebSocket JavaScript untuk mencipta klien. Menggunakan API Ratchet dan WebSocket, kami boleh mencapai komunikasi masa nyata yang cekap dengan mudah untuk mencipta aplikasi sembang masa nyata yang boleh dipercayai.

Atas ialah kandungan terperinci Cipta aplikasi sembang masa nyata menggunakan PHP dan WebSocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!