番外篇、使用 Hyperf3 实现 WebSocket 消息推送

作者: 温新

分类: 【Hyperf 3 基础系列】

阅读: 1486

时间: 2023-03-16 13:19:01

hi,我是温新,一名 PHPer

本篇文章使用 ChatGPT 实现一个基于 Hyperf 3 的消息推送功能。

说明:使用 gpt 3.5

问题:对于 Hyperf 3.0 版本,gpt 的实现并不是那么准备,但写的比较详细。下面是 gpt 的实现,我对代码进行了改动,但是不是很大。

以下是 gpt 实现的过程。

WebSocket 服务端

创建 WebSocket 服务端的步骤如下:

  1. config/autoload/server.php 文件中配置 WebSocket 服务:
'servers' => [
    [
        'name' => 'websocket',
        'type' => Server::SERVER_WEBSOCKET,
        'host' => '0.0.0.0',
        'port' => 9510,
        'sock_type' => SWOOLE_SOCK_TCP,
        'callbacks' => [
            Event::ON_OPEN => [App\WebSocket\WebSocketServer::class, 'onOpen'],
            Event::ON_MESSAGE => [App\WebSocket\WebSocketServer::class, 'onMessage'],
            Event::ON_CLOSE => [App\WebSocket\WebSocketServer::class, 'onClose'],
        ],
        'settings' => [
            'enable_coroutine' => true,
            'worker_num' => swoole_cpu_num(),
        ],
    ],
]

在上面的代码中,我们创建了一个监听在 9501 端口的 WebSocket 服务,同时指定了连接握手回调函数、消息回调函数和关闭回调函数。

  1. 创建 WebSocket 服务端处理类 App\WebSocket\WebSocketServer
<?php

namespace App\WebSocket;

use Hyperf\Contract\OnCloseInterface;
use Hyperf\Contract\OnMessageInterface;
use Hyperf\Contract\OnOpenInterface;

class WebSocketServer implements OnMessageInterface,OnOpenInterface,OnCloseInterface
{
    /**
     * 监听 WebSocket 连接事件.
     */
    public function onOpen($server, $request): void
    {
        // 新用户连接,可以记录用户信息,如连接 ID
        $server->push($request->fd, 'Welcome to Hyperf WebSocket Server!');
    }

    /**
     * 监听 WebSocket 消息事件.
     */
    public function onMessage($server, $frame): void
    {
        // 处理消息推送逻辑
        $message = $frame->data;
        $server->push($frame->fd, 'Received: ' . $message);
    }

    /**
     * 监听 WebSocket 关闭事件.
     */
    public function onClose($server, int $fd, int $reactorId): void
    {
        // 用户断开连接,可以清除用户信息
    }
}

在上面的代码中,我们使用 @WebSocket 注解将这个类声明为 WebSocket 处理类,并实现了连接握手回调函数 onHandShake、消息回调函数 onMessage 和连接关闭回调函数 onClose

onMessage 方法中,我们将客户端发送的消息加上前缀 "Hello, ",然后使用 $sender->push() 方法向客户端发送回复消息。

WebSocket 客户端

这是 gpt 给出的实现,如下:

const ws = new WebSocket('ws://localhost:9501');

ws.addEventListener('open', (event) => {
    console.log('WebSocket connected.');
});

ws.addEventListener('message', (event) => {
    console.log('Received:', event.data);
});

ws.addEventListener('close', (event) => {
    console.log('WebSocket disconnected.');
});

ws.addEventListener('error', (event) => {
    console.error('WebSocket error:', event);
});

对它进行修改,如下:

<script>
    const ws = new WebSocket('ws://localhost:9510');

    ws.addEventListener('open', (event) => {
        console.log('WebSocket connected.');
    });

    ws.addEventListener('message', (event) => {
        console.log('Received:', event.data);
    });

    ws.addEventListener('close', (event) => {
        console.log('WebSocket disconnected.');
    });

    ws.addEventListener('error', (event) => {
        console.error('WebSocket error:', event);
    });

    ws.send('message');
</script>
请登录后再评论