Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman-Workerman-php.cn

Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman

王林

Lepaskan： 2023-09-08 09:09:22

asal

895 orang telah melayarinya

Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman

Bagaimana untuk melaksanakan fungsi rentetan sistem sembang dalam talian berdasarkan Workerman

Dengan perkembangan Internet dan populariti media sosial, rentetan telah menjadi cara interaksi yang semakin popular. Danmaku merujuk kepada paparan mesej yang dimasukkan pengguna dalam bentuk tatal pada antara muka video atau sembang. Menggunakan fungsi barrage dalam bilik sembang boleh meningkatkan pengalaman interaktif pengguna dan menjadikan sembang lebih menarik dan meriah. Artikel ini akan memperkenalkan cara melaksanakan fungsi rentak sistem sembang dalam talian berdasarkan Workerman, dan melampirkan contoh kod yang sepadan.

1. Persediaan persekitaran

Sebelum bermula, kita perlu memastikan bahawa kita mempunyai persekitaran dan alatan berikut:

Persekitaran PHP: Workerman ialah rangka kerja komunikasi TCP/UDP berprestasi tinggi berdasarkan PHP, jadi persekitaran PHP memerlukan untuk disediakan lebih awal. Anda boleh menggunakan persekitaran bersepadu seperti XAMPP atau WAMP, atau anda boleh membina persekitaran PHP anda sendiri.
rangka kerja pekerja: Sebelum memulakan, anda perlu memasang rangka kerja pekerja Anda boleh memasangnya melalui komposer, atau memuat turun versi terkini pekerja terus daripada GitHub.

2. Cipta bilik sembang asas

Pertama, kita perlu mencipta ruang sembang asas dan menggunakan rangka kerja pekerja untuk mengendalikan sambungan pelanggan dan penghantaran mesej.

Cipta pelayan bilik sembang

require_once __DIR__ . '/vendor/autoload.php';

use WorkermanWorker;

$worker = new Worker("websocket://0.0.0.0:8080");

$worker->onWorkerStart = function($worker) {
    echo "Chat room started
";
};

$worker->onConnect = function($connection) {
    echo "New connection
";
};

$worker->onMessage = function($connection, $data) {
    echo "Received message: " . $data . "
";
    $connection->send("Hello, " . $data);
};

Worker::runAll();

Salin selepas log masuk

Dalam kod di atas, kami mencipta pelayan pekerja asas dan mendengar port 8080. Apabila sambungan baharu diwujudkan, fungsi panggil balik onConnect akan dilaksanakan Apabila mesej yang dihantar oleh klien diterima, fungsi panggil balik onMessage akan dilaksanakan.

Buat halaman pelanggan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Room</title>
</head>
<body>
    <input type="text" id="message" placeholder="Input your message">
    <button onclick="sendMessage()">Send</button>

    <script>
        var socket = new WebSocket("ws://127.0.0.1:8080");
        socket.onopen = function() {
            console.log("Connected to server");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);

            document.getElementById("message").value = "";
        };

        socket.onmessage = function(event) {
            var message = event.data;
            console.log("Received message: " + message);
        };
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami mencipta halaman pelanggan bilik sembang yang mudah. Pengguna boleh memasukkan mesej dalam kotak input dan menghantarnya ke pelayan dengan mengklik butang "Hantar". Apabila mesej diterima daripada pelayan, ia dipaparkan dalam konsol penyemak imbas.

3. Laksanakan fungsi barrage

Untuk melaksanakan fungsi barrage, kita perlu membuat pengubahsuaian yang sesuai pada pelayan bilik sembang dan kod pelanggan. Berikut ialah kod contoh:

Ubah suai pelayan bilik sembang

// 添加一个数组来保存接收到的消息
$messages = [];

$worker->onMessage = function($connection, $data) use (&$messages) {
    $messages[] = $data;
    foreach ($worker->connections as $client) {
        // 向所有客户端广播弹幕消息
        $client->send($data);
    }
    echo "Received message: " . $data . "
";
};

Salin selepas log masuk

Dalam kod di atas, kami telah menambahkan tatasusunan $mesej untuk menyimpan mesej yang diterima. Apabila mesej baharu diterima, kami menyimpannya dalam tatasusunan dan menghantar mesej kepada semua pelanggan melalui gelung.

Ubah suai halaman pelanggan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Chat Room with Danmaku</title>
    <style>
        .danmaku {
            position: absolute;
            font-size: 20px;
            color: red;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <input type="text" id="message" placeholder="Input your message">
    <button onclick="sendMessage()">Send</button>

    <script>
        var socket = new WebSocket("ws://127.0.0.1:8080");
        var danmakus = [];

        socket.onopen = function() {
            console.log("Connected to server");
        };

        function sendMessage() {
            var message = document.getElementById("message").value;
            socket.send(message);

            document.getElementById("message").value = "";
        };

        socket.onmessage = function(event) {
            var message = event.data;
            console.log("Received message: " + message);

            // 创建一个新的弹幕
            var danmaku = document.createElement("div");
            danmaku.textContent = message;
            danmaku.className = "danmaku";

            // 设置弹幕的起始位置和动画效果
            danmaku.style.top = Math.floor(Math.random() * (window.innerHeight - 30)) + "px";
            danmaku.style.left = window.innerWidth + "px";
            danmaku.style.animationDuration = (Math.random() * 10 + 5) + "s";

            // 添加弹幕到页面
            document.body.appendChild(danmaku);

            // 添加弹幕到数组
            danmakus.push(danmaku);

            // 监听弹幕动画结束事件，删除已经播放完成的弹幕
            danmaku.addEventListener("animationend", function() {
                document.body.removeChild(danmaku);
                danmakus.splice(danmakus.indexOf(danmaku), 1);
            });

            // 避免弹幕过多导致页面卡顿，最多显示10条弹幕
            if (danmakus.length > 10) {
                var removedDanmaku = danmakus.shift();
                document.body.removeChild(removedDanmaku);
            }
        };
    </script>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menambah helaian gaya untuk menetapkan gaya rentak. Apabila menerima mesej, kami mencipta elemen barrage baharu dan menetapkan kesan animasi, kedudukan permulaan dan teksnya. Kemudian tambahkan rentetan pada halaman dan simpan pelbagai rentetan untuk mengurus susunan main balik rentetan. Untuk mengelakkan lag halaman, kami mengehadkan paparan sehingga 10 bullet chat dan mengalih keluarnya daripada halaman dan tatasusunan apabila animasi bullet chat tamat.

4. Jalankan dan uji

Mulakan pelayan bilik sembang

Masukkan direktori di mana pelayan bilik sembang terletak pada baris arahan dan laksanakan arahan berikut:

php chat_room.php start

Salin selepas log masuk

Buka halaman pelanggan

klien dalam pelayar Pada halaman terminal, masukkan mesej dan klik butang Hantar. Pelayan bilik sembang akan menghantar mesej yang diterima kepada semua pelanggan yang disambungkan dan memaparkannya pada halaman sebagai rentetan.

Ringkasan

Artikel ini memperkenalkan cara melaksanakan fungsi rentak sistem sembang dalam talian berdasarkan Workerman. Dengan menambahkan kod dan helaian gaya yang sepadan, kami boleh melaksanakan fungsi menerima dan memaparkan mesej bertubi-tubi. Fungsi rentetan sedemikian boleh meningkatkan interaktiviti dan keseronokan bilik sembang, menjadikan pengguna lebih aktif dan terlibat. Saya harap kod contoh dalam artikel ini dapat membantu pembaca melaksanakan fungsi sembang bilik sembang mereka sendiri dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!