Rumah > Artikel > rangka kerja php > Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman
Bagaimana untuk melaksanakan fungsi barrage sistem sembang dalam talian berdasarkan Workerman
- 王林asal
- 2023-09-08 09:09:22876semak imbas
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();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>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 . "
";
};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>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
- Buka halaman pelanggan
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!