Swole in action: cepat buat ruang sembang berdasarkan WebSocket-Swoole-php.cn

Swole in action: cepat buat ruang sembang berdasarkan WebSocket

WBOY

Lepaskan： 2023-06-14 16:20:08

asal

1325 orang telah melayarinya

Dalam era Internet, bilik sembang telah menjadi tempat penting untuk orang ramai berkomunikasi dan bersosial. Kemunculan teknologi WebSocket telah menjadikan komunikasi masa nyata lebih lancar dan lebih stabil. Hari ini, kami memperkenalkan cara menggunakan rangka kerja Swoole untuk membina ruang sembang dengan cepat berdasarkan WebSocket.

Swoole ialah rangka kerja komunikasi rangkaian coroutine PHP berprestasi tinggi, ditulis dalam bahasa C, menyepadukan IO tak segerak, coroutine, komunikasi rangkaian dan fungsi lain, membolehkan kod PHP diproses dengan cekap seperti Node.js Event-driven pengaturcaraan serentak tak segerak. Boleh dikatakan bahawa Swoole ialah alat penting untuk membangunkan aplikasi rangkaian konkurensi tinggi.

Di bawah, kami akan memperkenalkan langkah demi langkah cara menggunakan Swoole untuk melaksanakan bilik sembang berdasarkan WebSocket dan menyokong sembang dalam talian berbilang orang.

Persediaan alam sekitar

Sebelum anda bermula, anda perlu memastikan anda telah memasang sambungan Swoole dan mendayakan sokongan WebSocket.

Kaedah pemasangan adalah seperti berikut:

pecl install swoole

Salin selepas log masuk

atau susun dan pasang:

wget https://pecl.php.net/get/swoole-{version}.tgz

tar xzvf swoole-{version}.tgz

cd swoole-{version}

phpize

./configure --enable-async-redis --enable-coroutine --enable-openssl --enable-http2 --enable-sockets

make && make install

Salin selepas log masuk

Jika Docker digunakan, anda boleh menambah pernyataan berikut dalam Dockerfile:

RUN pecl install swoole 
    && docker-php-ext-enable swoole 
    && docker-php-ext-install pcntl

Salin selepas log masuk

Halaman Pelanggan

Pertama, kita perlu menulis halaman untuk menghantar mesej ke ruang sembang. Kodnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket ChatRoom Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 30px auto;
            width: 800px;
            height: 600px;
            border: 1px solid #aaa;
            border-radius: 5px;
            overflow: hidden;
        }
        .message-box {
            width: 800px;
            height: 500px;
            border-bottom: 1px solid #aaa;
            overflow-y: scroll;
        }
        .input-box {
            width: 800px;
            height: 100px;
            border-top: 1px solid #aaa;
        }
        .input-text {
            width: 600px;
            height: 80px;
            margin: 10px;
            padding: 10px;
            font-size: 20px;
            border-radius: 5px;
            border: 1px solid #aaa;
            outline: none;
        }
        .send-btn {
            width: 100px;
            height: 100%;
            margin: 0 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message-box"></div>
        <div class="input-box">
            <textarea class="input-text"></textarea>
            <button class="send-btn">Send</button>
        </div>
    </div>
    <script>
        // 初始化WebSocket
        let socket = new WebSocket('ws://localhost:9502');

        // 监听连接成功事件
        socket.onopen = function (event) {
            console.log('WebSocket connection established.');
        }

        // 监听服务端发送的消息
        socket.onmessage = function (event) {
            let message_box = document.querySelector('.message-box');
            message_box.innerHTML += `<p>${event.data}</p>`;
            message_box.scrollTop = message_box.scrollHeight;
        }

        // 监听连接关闭事件
        socket.onclose = function (event) {
            console.log('WebSocket connection closed.');
        }

        // 发送消息
        let send_btn = document.querySelector('.send-btn');
        let input_text = document.querySelector('.input-text');
        send_btn.addEventListener('click', function (event) {
            if (input_text.value.trim() == '') return;
            socket.send(input_text.value);
            input_text.value = '';
        });
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod ini, kami membahagikan halaman bilik sembang kepada dua bahagian: kotak paparan mesej dan kotak input mesej. Pada masa yang sama, logik berkaitan sambungan WebSocket dan penghantaran mesej ditakrifkan.

Perlu diingat bahawa apabila menggunakan dalam persekitaran setempat, alamat WebSocket perlu diubah suai kepada alamat IP tempatan dan bukannya localhost. Jika anda ingin menggunakan persekitaran dalam talian, anda perlu menukar alamat WebSocket kepada IP awam pelayan.

Kod sebelah pelayan

Seterusnya, kami menulis kod sebelah pelayan. Melalui perpustakaan kelas yang disediakan oleh Swoole, kami boleh membuat pelayan WebSocket dengan mudah. Kodnya adalah seperti berikut:

<?php
// 创建WebSocket服务器
$server = new SwooleWebsocketServer("0.0.0.0", 9502);

// 监听WebSocket连接打开事件
$server->on('open', function (SwooleWebsocketServer $server, $request) {
    echo "connection open: {$request->fd}
";
});

// 监听WebSocket消息事件
$server->on('message', function (SwooleWebsocketServer $server, $frame) {
    echo "received message: {$frame->data}
";

    // 广播消息
    foreach ($server->connections as $fd) {
        $server->push($fd, $frame->data);
    }
});

// 监听WebSocket连接关闭事件
$server->on('close', function (SwooleWebsocketServer $server, $fd) {
    echo "connection close: {$fd}
";
});

// 启动WebSocket服务器
$server->start();

Salin selepas log masuk

Mula-mula, kami mencipta pelayan WebSocket dan mengikatnya ke alamat 0.0.0.0:9502 untuk menunggu sambungan pelanggan. Tiga peristiwa pembukaan sambungan WebSocket, mesej dan penutupan sambungan dipantau melalui kaedah on dan logik pemprosesan untuk ketiga-tiga peristiwa ini telah dilaksanakan.

Dalam acara open, kami menggunakan klien fd yang dirakam oleh Swoole untuk mengeluarkannya ke konsol.

Dalam acara message, kami mendapat maklumat daripada pelanggan, menggunakan echo untuk mengeluarkannya ke konsol dan menggunakan foreach untuk melintasi pelanggan yang telah mewujudkan sambungan dan menghantar mesej Siarkan kepada semua pelanggan.

Dalam acara close, kami sekali lagi menggunakan klien fd yang dirakam oleh Swoole untuk mengeluarkannya ke konsol.

Akhir sekali, kami memulakan pelayan WebSocket menggunakan kaedah start.

Kesimpulan

Setakat ini, kami telah melaksanakan ruang sembang dalam talian berbilang orang berdasarkan WebSocket. Dalam halaman pelanggan, anda boleh menghantar sebarang mesej dan mesej itu akan disiarkan kepada semua pelanggan dalam talian untuk paparan.

Melalui rangka kerja Swoole, kami boleh mencipta pelayan WebSocket yang cekap dengan mudah, yang menyediakan cara yang mudah untuk mencapai prestasi tinggi, kependaman rendah dan komunikasi masa nyata yang boleh dipercayai.

Atas ialah kandungan terperinci Swole in action: cepat buat ruang sembang berdasarkan WebSocket. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!