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

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 服务，同时指定了连接握手回调函数、消息回调函数和关闭回调函数。

2. 创建 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>