So implementieren Sie die Sperrfunktion des auf Workerman basierenden Online-Chat-Systems
Mit der Entwicklung des Internets und der Popularität sozialer Medien ist Sperrfunktion zu einer immer beliebter werdenden Art der Interaktion geworden. Danmaku bezieht sich auf die Anzeige von vom Benutzer eingegebenen Nachrichten in scrollender Form auf einer Video- oder Chat-Oberfläche. Die Verwendung der Sperrfunktion in einem Chatroom kann das interaktive Erlebnis des Benutzers verbessern und den Chat interessanter und lebendiger gestalten. In diesem Artikel wird erläutert, wie die Sperrfunktion des Online-Chat-Systems basierend auf Workerman implementiert wird, und es werden entsprechende Codebeispiele beigefügt.
1. Umgebungsvorbereitung
Bevor wir beginnen, müssen wir sicherstellen, dass wir über die folgende Umgebung und Tools verfügen:
- PHP-Umgebung: Workerman ist ein leistungsstarkes TCP/UDP-Kommunikationsframework, das auf PHP basiert, daher benötigt die PHP-Umgebung im Voraus vorbereitet werden. Sie können integrierte Umgebungen wie XAMPP oder WAMP verwenden oder Ihre eigene PHP-Umgebung erstellen.
- Workerman-Framework: Bevor Sie beginnen, müssen Sie das Workerman-Framework installieren. Sie können es über Composer installieren oder die neueste Version von Workerman direkt von GitHub herunterladen.
2. Erstellen Sie einen einfachen Chatroom
Zuerst müssen wir einen einfachen Chatroom erstellen und das Workerman-Framework verwenden, um Clientverbindungen und das Versenden von Nachrichten zu verwalten.
- Chatroom-Server erstellen
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();Nach dem Login kopieren
Im obigen Code haben wir einen einfachen Workerman-Server erstellt und Port 8080 abgehört. Wenn eine neue Verbindung hergestellt wird, wird die Rückruffunktion onConnect ausgeführt. Wenn eine vom Client gesendete Nachricht empfangen wird, wird die Rückruffunktion onMessage ausgeführt.
- Kundenseite erstellen
<!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>Nach dem Login kopieren
Im obigen Code erstellen wir eine einfache Chatroom-Kundenseite. Der Benutzer kann eine Nachricht in das Eingabefeld eingeben und diese durch Klicken auf die Schaltfläche „Senden“ an den Server senden. Wenn eine Nachricht vom Server empfangen wird, wird sie in der Konsole des Browsers angezeigt.
3. Implementieren Sie die Sperrfunktion.
Um die Sperrfunktion zu implementieren, müssen wir entsprechende Änderungen am Chatroom-Server und Client-Code vornehmen. Hier ist der Beispielcode:
- Ändern Sie den Chatroom-Server
// 添加一个数组来保存接收到的消息
$messages = [];
$worker->onMessage = function($connection, $data) use (&$messages) {
$messages[] = $data;
foreach ($worker->connections as $client) {
// 向所有客户端广播弹幕消息
$client->send($data);
}
echo "Received message: " . $data . "
";
};Nach dem Login kopieren
Im obigen Code haben wir ein Array $messages hinzugefügt, um die empfangenen Nachrichten zu speichern. Wenn eine neue Nachricht empfangen wird, speichern wir sie in einem Array und senden die Nachricht über eine Schleife an alle Clients.
- Ändern Sie die Client-Seite
<!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>Nach dem Login kopieren
Im obigen Code haben wir ein Stylesheet hinzugefügt, um den Stil des Sperrfeuers festzulegen. Beim Empfang der Nachricht erstellen wir ein neues Sperrelement und legen dessen Animationseffekt, Startposition und Text fest. Fügen Sie dann die Sperrfeuer zur Seite hinzu und behalten Sie eine Reihe von Sperrfeuern bei, um die Wiedergabereihenfolge der Sperrfeuer zu verwalten. Um Seitenverzögerungen zu vermeiden, begrenzen wir die Anzeige von bis zu 10 Bullet-Chats und entfernen sie von der Seite und dem Array, wenn die Bullet-Chat-Animation endet.
4. Ausführen und testen
- Starten Sie den Chatroom-Server
Geben Sie in der Befehlszeile das Verzeichnis ein, in dem sich der Chatroom-Server befindet, und führen Sie den folgenden Befehl aus:
php chat_room.php start
Nach dem Login kopieren
- Öffnen Sie die Client-Seite
Öffnen Geben Sie auf der Terminalseite die Nachricht ein und klicken Sie auf die Schaltfläche „Senden“. Der Chatroom-Server sendet die empfangene Nachricht an alle verbundenen Clients und zeigt sie auf der Seite als Sperrnachricht an.
Zusammenfassung
In diesem Artikel wird erläutert, wie die Sperrfunktion des auf Workerman basierenden Online-Chat-Systems implementiert wird. Durch Hinzufügen des entsprechenden Codes und Stylesheets können wir die Funktion des Empfangens und Anzeigens von Sperrnachrichten realisieren. Eine solche Sperrfunktion kann die Interaktivität und den Spaß von Chatrooms verbessern und die Benutzer aktiver und engagierter machen. Ich hoffe, dass der Beispielcode in diesem Artikel den Lesern dabei helfen kann, schnell ihre eigene Chatroom-Sperrfunktion zu implementieren.
Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Sperrfunktion des Online-Chat-Systems basierend auf Workerman. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
