워커맨과 HTML5 WebSocket 기술을 활용한 실시간 온라인 채팅-Workerman-php.cn

워커맨과 HTML5 WebSocket 기술을 활용한 실시간 온라인 채팅

WBOY

풀어 주다： 2023-09-09 11:00:41

원래의

981명이 탐색했습니다.

利用workerman和HTML5 WebSocket技术实现实时在线聊天

Workerman과 HTML5 WebSocket 기술을 사용하여 실시간 온라인 채팅 구현

소개:
인터넷의 급속한 발전과 스마트폰의 대중화로 인해 실시간 온라인 채팅은 사람들의 일상생활에서 없어서는 안 될 부분이 되었습니다. 사용자의 요구 사항을 충족하기 위해 웹 개발자는 보다 효율적이고 실시간 채팅 솔루션을 끊임없이 찾고 있습니다. 이 기사에서는 PHP 프레임워크인 Workerman과 HTML5 WebSocket 기술을 결합하여 간단한 실시간 온라인 채팅 시스템을 구현하는 방법을 소개합니다.

1. Workerman 소개:
Workerman은 고성능 TCP/UDP 실시간 통신 애플리케이션을 구현할 수 있는 PHP 개발자 친화적인 고성능 비동기 IO 프레임워크입니다. 전통적인 PHP 개발 방법과 비교하여 Workerman은 동시성 기능이 높고 리소스 소비가 적으며 실시간 온라인 채팅 시스템을 구현하는 데 매우 적합합니다.

2. HTML5 WebSocket 소개:
WebSocket은 TCP 프로토콜을 기반으로 하는 전이중 통신 프로토콜로, 클라이언트와 서버 간에 지속적인 연결을 설정하여 실시간 데이터 전송을 달성할 수 있습니다. 새로 추가된 HTML5의 WebSocket 기술은 실시간 채팅 및 기타 실시간 데이터 전송에 있어 매우 중요한 응용 가치를 가지고 있습니다.

3. 환경 준비:

서버 운영 체제: linux
PHP 버전: 7.0 이상
Workerman 설치:
```
$ composer require workerman/workerman
```
로그인 후 복사

4. 서버 측 구현:

chat.php 만들기 파일, 서버측 코드 작성:

<?php 
require_once __DIR__.'/vendor/autoload.php'; // 加载Workerman的自动加载文件

use WorkermanWorker;

// 创建一个Worker监听2346端口，使用WebSocket协议通讯
$ws_worker = new Worker("websocket://0.0.0.0:2346");

$ws_worker->count = 4; // 设置进程数

// 客户端与服务器建立连接时触发
$ws_worker->onConnect = function($connection){
 echo "Connection established: " . $connection->id . "
";
};

// 客户端向服务器发送消息时触发
$ws_worker->onMessage = function($connection, $data){
 echo "Received message: " . $data . "
";

 // 向所有在线用户发送消息
 foreach($connection->worker->connections as $clientConnection){
     $clientConnection->send($data);
 }
};

// 客户端断开连接时触发
$ws_worker->onClose = function($connection){
 echo "Connection closed: " . $connection->id . "
";
};

Worker::runAll();

로그인 후 복사

WebSocket 서비스 시작:
```
$ php chat.php start
```
로그인 후 복사

5. 클라이언트측 구현:

chat.html 파일 생성 및 클라이언트측 코드 작성:

<!DOCTYPE html>
<html>
<head>
 <title>实时在线聊天</title>
 <script>
     var ws = new WebSocket("ws://localhost:2346");

     ws.onopen = function(event){
         console.log("Connected to WebSocket server.");
     };

     ws.onmessage = function(event){
         var message = event.data;
         console.log("Received message: " + message);
         
         // 在页面上显示接收到的消息
         var messageBox = document.getElementById("message-box");
         var newMessage = document.createElement("p");
         newMessage.innerText = message;
         messageBox.appendChild(newMessage);
     };

     function sendMessage(){
         var message = document.getElementById("message-input").value;
         ws.send(message);
         document.getElementById("message-input").value = "";
     }
 </script>
</head>
<body>
 <div id="message-box"></div>
 <input id="message-input" type="text" placeholder="输入消息">
 <button onclick="sendMessage()">发送</button>
</body>
</html>

로그인 후 복사

브라우저를 사용하여 채팅 html 파일을 열어 실시간 온라인 채팅을 시작하세요.

6. 요약:
이 글에서는 Workerman과 HTML5 WebSocket 기술을 사용하여 실시간 온라인 채팅을 구현하는 방법을 소개합니다. 고성능 Workerman 프레임워크와 WebSocket의 양방향 통신 기능을 사용하여 간단한 온라인 채팅 시스템을 쉽게 구현할 수 있습니다. 채팅 시스템 외에도 WebSocket 기술을 사용하여 실시간 게임, 실시간 주식 시세 등과 같은 더 많은 실시간 통신 애플리케이션을 구현할 수도 있습니다. 이 기사가 실시간 온라인 채팅 시스템을 개발하는 데 도움이 되고 더 많은 아이디어와 응용 프로그램에 영감을 주기를 바랍니다.

참고 자료: