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

집

PHP 프레임워크

Workerman

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

Sep 09, 2023 am 11:00 AM

workerman 실시간 채팅 html websocket

利用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 만들기 파일, 서버측 코드 작성:

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

use WorkermanWorker;

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

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

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

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

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

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

Worker::runAll();

로그인 후 복사

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

5. 클라이언트측 구현:

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;title&gt;实时在线聊天&lt;/title&gt;
 &lt;script&gt;
     var ws = new WebSocket(&quot;ws://localhost:2346&quot;);

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

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

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

로그인 후 복사

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

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

참고 자료: