찾다

집  >  기사  >  PHP 프레임워크  >  Swoole 실행: WebSocket을 기반으로 신속하게 채팅방 만들기

Swoole 실행: WebSocket을 기반으로 신속하게 채팅방 만들기

WBOY
WBOY원래의
2023-06-14 16:20:081299검색

인터넷 시대에 채팅방은 사람들이 소통하고 사교하는 중요한 장소가 되었습니다. WebSocket 기술의 출현으로 실시간 통신이 더욱 원활하고 안정적으로 이루어졌습니다. 오늘은 Swoole 프레임워크를 활용하여 WebSocket 기반의 채팅방을 빠르게 구축하는 방법을 소개합니다.

Swoole은 C 언어로 작성된 고성능 PHP 코루틴 네트워크 통신 프레임워크로, 비동기 IO, 코루틴, 네트워크 통신 및 기타 기능을 통합하여 PHP 코드가 Node.js 프로그래밍만큼 효율적으로 이벤트 기반 비동기 동시성을 처리할 수 있도록 합니다. Swoole은 동시성 높은 네트워크 애플리케이션을 개발하는 데 중요한 도구라고 할 수 있습니다.

아래에서는 Swoole을 사용하여 WebSocket 기반의 채팅방을 구현하고 다자간 온라인 채팅을 지원하는 방법을 단계별로 소개하겠습니다.

  1. 환경 준비

시작하기 전에 Swoole 확장 프로그램을 설치하고 WebSocket 지원을 활성화했는지 확인해야 합니다.

설치 방법은 다음과 같습니다. 

pecl install swoole

또는 컴파일 및 설치: 

wget https://pecl.php.net/get/swoole-{version}.tgz

tar xzvf swoole-{version}.tgz

cd swoole-{version}

phpize

./configure --enable-async-redis --enable-coroutine --enable-openssl --enable-http2 --enable-sockets

make && make install

Docker를 사용하는 경우 Dockerfile에 다음 문을 추가할 수 있습니다. 

RUN pecl install swoole 
    && docker-php-ext-enable swoole 
    && docker-php-ext-install pcntl
  1. Client page

먼저 작성해야 합니다. 채팅방에 메시지 보내기 페이지입니다. 코드는 다음과 같습니다. 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>WebSocket ChatRoom Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .container {
            margin: 30px auto;
            width: 800px;
            height: 600px;
            border: 1px solid #aaa;
            border-radius: 5px;
            overflow: hidden;
        }
        .message-box {
            width: 800px;
            height: 500px;
            border-bottom: 1px solid #aaa;
            overflow-y: scroll;
        }
        .input-box {
            width: 800px;
            height: 100px;
            border-top: 1px solid #aaa;
        }
        .input-text {
            width: 600px;
            height: 80px;
            margin: 10px;
            padding: 10px;
            font-size: 20px;
            border-radius: 5px;
            border: 1px solid #aaa;
            outline: none;
        }
        .send-btn {
            width: 100px;
            height: 100%;
            margin: 0 10px;
            background-color: #4CAF50;
            border: none;
            color: white;
            font-size: 18px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="message-box"></div>
        <div class="input-box">
            <textarea class="input-text"></textarea>
            <button class="send-btn">Send</button>
        </div>
    </div>
    <script>
        // 初始化WebSocket
        let socket = new WebSocket('ws://localhost:9502');

        // 监听连接成功事件
        socket.onopen = function (event) {
            console.log('WebSocket connection established.');
        }

        // 监听服务端发送的消息
        socket.onmessage = function (event) {
            let message_box = document.querySelector('.message-box');
            message_box.innerHTML += `<p>${event.data}</p>`;
            message_box.scrollTop = message_box.scrollHeight;
        }

        // 监听连接关闭事件
        socket.onclose = function (event) {
            console.log('WebSocket connection closed.');
        }

        // 发送消息
        let send_btn = document.querySelector('.send-btn');
        let input_text = document.querySelector('.input-text');
        send_btn.addEventListener('click', function (event) {
            if (input_text.value.trim() == '') return;
            socket.send(input_text.value);
            input_text.value = '';
        });
    </script>
</body>
</html>

이 코드에서는 채팅방 페이지를 메시지 표시 상자와 메시지 입력 상자의 두 부분으로 나눕니다. 동시에 WebSocket 연결 및 메시지 전송 관련 로직이 정의됩니다.

로컬 환경에 배포할 경우 WebSocket의 주소를 localhost가 아닌 로컬 IP 주소로 수정해야 한다는 점에 유의하세요. 온라인 환경을 사용하려면 WebSocket 주소를 서버의 공인 IP로 변경해야 합니다. WebSocket的地址为本地IP地址，而不是localhost。如果你想使用在线环境，则需要将WebSocket地址改为服务器公网IP。

  1. 服务端代码

接下来，我们编写服务端代码。通过 Swoole 提供的类库，我们可以很方便地创建一个 WebSocket 服务器。代码如下：

<?php
// 创建WebSocket服务器
$server = new SwooleWebsocketServer("0.0.0.0", 9502);

// 监听WebSocket连接打开事件
$server->on('open', function (SwooleWebsocketServer $server, $request) {
    echo "connection open: {$request->fd}
";
});

// 监听WebSocket消息事件
$server->on('message', function (SwooleWebsocketServer $server, $frame) {
    echo "received message: {$frame->data}
";

    // 广播消息
    foreach ($server->connections as $fd) {
        $server->push($fd, $frame->data);
    }
});

// 监听WebSocket连接关闭事件
$server->on('close', function (SwooleWebsocketServer $server, $fd) {
    echo "connection close: {$fd}
";
});

// 启动WebSocket服务器
$server->start();

首先，我们创建了一个 WebSocket 服务器，并将其绑定在0.0.0.0:9502的地址上，以等待客户端连接。通过on方法监听了 WebSocket 连接打开、消息、连接关闭三个事件，并已经实现了对于这三个事件的处理逻辑。

在 open 事件中，我们使用了 Swoole 记录的客户端 fd，将其输出至控制台。

在 message 事件中，我们获得了客户端传来的信息，使用了 echo 将其输出到控制台，并通过 foreach 遍历已经建立连接的客户端，将消息广播给所有客户端。

在 close 事件中，我们又一次使用了 Swoole 记录的客户端 fd，将其输出至控制台。

最后，我们使用 start

    서버측 코드
    1. 다음으로 서버측 코드를 작성합니다. Swoole에서 제공하는 클래스 라이브러리를 통해 WebSocket 서버를 쉽게 생성할 수 있습니다. 코드는 다음과 같습니다.
    rrreee

    먼저 WebSocket 서버를 생성하고 0.0.0.0:9502 주소에 바인딩하여 클라이언트 연결을 기다립니다. WebSocket 연결 열기, 메시지, 연결 닫기의 세 가지 이벤트를 on 메서드를 통해 모니터링하고, 이 세 가지 이벤트에 대한 처리 로직을 구현했습니다.

    open 이벤트에서는 Swoole이 기록한 클라이언트 fd를 사용하여 콘솔에 출력합니다.

    🎜message 이벤트에서는 클라이언트로부터 정보를 얻고 echo를 사용하여 이를 콘솔에 출력한 다음 foreach Traverse를 전달합니다. 연결을 설정하고 모든 클라이언트에게 메시지를 브로드캐스트하는 클라이언트입니다. 🎜🎜 close 이벤트에서는 Swoole이 기록한 클라이언트 fd를 다시 한 번 사용하여 콘솔에 출력합니다. 🎜🎜마지막으로 start 메서드를 사용하여 WebSocket 서버를 시작합니다. 🎜🎜🎜결론🎜🎜🎜지금까지 WebSocket 기반으로 다자간 온라인 채팅방을 구현해보았습니다. 클라이언트 페이지에서 어떤 메시지든 보낼 수 있으며, 메시지는 표시를 위해 모든 온라인 클라이언트에 브로드캐스트됩니다. 🎜🎜Swoole 프레임워크를 통해 우리는 효율적인 WebSocket 서버를 쉽게 생성할 수 있으며, 이는 고성능, 짧은 대기 시간 및 안정적인 실시간 통신을 달성하기 위한 편리한 수단을 제공합니다. 🎜

위 내용은 Swoole 실행: WebSocket을 기반으로 신속하게 채팅방 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：비동기 작업을 구현하는 Swoole 네트워크 프로그래밍 기술다음 기사：비동기 작업을 구현하는 Swoole 네트워크 프로그래밍 기술

관련 기사

더보기