Workerman 기반 온라인 채팅 시스템의 사격 기능을 구현하는 방법
- 王林원래의
- 2023-09-08 09:09:22832검색
Workerman 기반 온라인 채팅 시스템의 사격 기능 구현 방법
인터넷의 발전과 소셜 미디어의 대중화로 사격은 점점 더 대중적인 상호 작용 방법이 되었습니다. 단마쿠는 사용자가 입력한 메시지를 비디오나 채팅 인터페이스에 스크롤 형식으로 표시하는 것을 말합니다. 채팅방에서 사격 기능을 사용하면 사용자의 상호작용 경험을 향상시키고 채팅을 더욱 흥미롭고 생동감 있게 만들 수 있습니다. 이번 글에서는 Workerman을 기반으로 온라인 채팅 시스템의 사격 기능을 구현하는 방법을 소개하고, 해당 코드 예제를 첨부하겠습니다.
1. 환경 준비
시작하기 전에 다음 환경과 도구가 있는지 확인해야 합니다.
- PHP 환경: Workerman은 PHP 기반의 고성능 TCP/UDP 통신 프레임워크이므로 PHP 환경에는 다음이 필요합니다. 미리 준비하도록 합니다. XAMPP 또는 WAMP와 같은 통합 환경을 사용하거나 자체 PHP 환경을 구축할 수 있습니다.
- workerman 프레임워크: 시작하기 전에 작곡가를 통해 설치하거나 GitHub에서 직접 Workerman 최신 버전을 다운로드할 수 있습니다.
2. 기본 채팅방 만들기
먼저 기본 채팅방을 만들고 Workerman 프레임워크를 사용하여 클라이언트 연결 및 메시지 전송을 처리해야 합니다.
- 채팅방 서버 생성
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();위 코드에서는 기본 워커맨 서버를 생성하고 포트 8080을 수신했습니다. 새로운 연결이 설정되면 onConnect 콜백 함수가 실행됩니다. 클라이언트가 보낸 메시지가 수신되면 onMessage 콜백 함수가 실행됩니다.
- 클라이언트 페이지 생성
<!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>위 코드에서는 간단한 채팅방 클라이언트 페이지를 생성합니다. 사용자는 "보내기" 버튼을 클릭하여 입력 상자에 메시지를 입력하고 서버로 보낼 수 있습니다. 서버로부터 메시지를 받으면 브라우저 콘솔에 표시됩니다.
3. 사격 기능 구현
사격 기능을 구현하려면 채팅방 서버와 클라이언트 코드를 적절하게 수정해야 합니다. 샘플 코드는 다음과 같습니다.
- 채팅방 서버 수정
// 添加一个数组来保存接收到的消息
$messages = [];
$worker->onMessage = function($connection, $data) use (&$messages) {
$messages[] = $data;
foreach ($worker->connections as $client) {
// 向所有客户端广播弹幕消息
$client->send($data);
}
echo "Received message: " . $data . "
";
};위 코드에서는 수신된 메시지를 보관하기 위해 $messages 배열을 추가했습니다. 새 메시지가 수신되면 이를 배열에 저장하고 루프를 통해 모든 클라이언트에 메시지를 보냅니다.
- 클라이언트 페이지 수정
<!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>위 코드에서는 사격 스타일을 설정하는 스타일 시트를 추가했습니다. 메시지를 받으면 새로운 사격 요소를 생성하고 애니메이션 효과, 시작 위치 및 텍스트를 설정합니다. 그런 다음 페이지에 사격을 추가하고 사격의 재생 순서를 관리하기 위해 사격 배열을 유지합니다. 페이지 지연을 방지하기 위해 글머리 기호 채팅 표시를 최대 10개로 제한하고 글머리 기호 채팅 애니메이션이 끝나면 페이지와 배열에서 해당 내용을 제거합니다.
4. 실행 및 테스트
- 채팅방 서버 시작
명령줄에 채팅방 서버가 있는 디렉터리를 입력하고 다음 명령을 실행합니다.
php chat_room.php start
- 클라이언트 페이지 열기
열기 브라우저의 클라이언트 터미널 페이지에서 메시지를 입력하고 보내기 버튼을 클릭합니다. 채팅방 서버는 수신된 메시지를 연결된 모든 클라이언트에게 보내고 이를 페이지에 표시합니다.
요약
이 글에서는 Workerman을 기반으로 온라인 채팅 시스템의 탄막 기능을 구현하는 방법을 소개합니다. 해당 코드와 스타일 시트를 추가함으로써 사격 메시지를 수신하고 표시하는 기능을 실현할 수 있습니다. 이러한 사격 기능은 채팅방의 상호작용성과 재미를 향상시켜 사용자를 더욱 활동적이고 참여하게 만들 수 있습니다. 이 기사의 샘플 코드가 독자가 자신의 채팅방 사격 기능을 신속하게 구현하는 데 도움이 되기를 바랍니다.
위 내용은 Workerman 기반 온라인 채팅 시스템의 사격 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!