26、Hyperf 3 快速使用 - Hyperf 3 WebSocket 服务

作者: 温新

阅读: 383

时间: 2023-04-25 16:01:45

hi，我是温新，一名 PHPer

Hypref 版本：Hyperf 3.0

学习目标：学习 Hyperf 3 WebSocket 服务

第一步：安装组件

composer require hyperf/websocket-server

**第二步：配置文件配置 websocket 服务 **

<?php
// config/autoload/server.php    
'servers' => [
	// websocket 服务
    [
        // 服务名称，注意这个名称，后续要用到
        'name'      => 'ws',
        'type'      => Server::SERVER_WEBSOCKET,
        'host'      => '0.0.0.0',
        'port'      => 9509,
        // TCP 连接
        'sock_type' => SWOOLE_SOCK_TCP,
        'callbacks' => [
            // 这个配置是官方文档中的配置，但没发现有什么作用，
            // 如果照搬官方文档中的代码，这一段就会引起报错
            //Event::ON_HAND_SHAKE => [Hyperf\WebSocketServer\Server::class, 'onHandShake'],
            
            Event::ON_OPEN    => [\App\Controller\Server\WebSocketServerController::class, 'onOpen'],
            Event::ON_MESSAGE => [\App\Controller\Server\WebSocketServerController::class, 'onMessage'],
            Event::ON_CLOSE   => [\App\Controller\Server\WebSocketServerController::class, 'onClose'],
        ]
    ],
],

第三步：添加服务路由

<?php
// config/routes.php

// 注意：这里的 ws 要和配置文件中 websocket 服务的 name 值一样
Router::addServer('ws', function () {
    Router::get('/', \App\Controller\Server\WebSocketServerController::class);
});

第四步：创建 websocket 服务类

<?php
// App\Controller\Server\WebSocketServerController.php
    
namespace App\Controller\Server;

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

class WebSocketServerController implements OnMessageInterface,OnOpenInterface,OnCloseInterface
{
    public function onOpen($server, $request): void
    {
        echo $request->fd . ' 号客户端已连接' . PHP_EOL;
    }

    public function onMessage($server, $frame): void
    {
        $message = '发给 ' . $frame->fd . ' 号客户端的消息：' . $frame->data;
        $server->push($frame->fd, $message);
    }

    public function onClose($server, int $fd, int $reactorId): void
    {
        echo $fd . '断开连接,处理线程是 ' . $reactorId . PHP_EOL;
    }
}

第五步：启动服务

php bin/hyperf.php start

第六步：创建 websocket 客户端

该文件位置随意在哪

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>websocket</title>
</head>
<body>
    <div>
        <textarea name="content" id="content" cols="30" rows="10"></textarea>
        <button onclick="send();">发送</button>
    </div>
    <ul id="messageList"></ul>

    <script>
        let ws = new WebSocket('ws://192.168.31.90:9509')
        ws.onopen = event => {
            console.log('连接服务器成功');
        }

        ws.onmessage = event => {
            let data = event.data;
            let ul = document.getElementById('messageList');
            let li = document.createElement('li');
            li.innerHTML = data;
            ul.appendChild(li);
        }

        ws.onclose = event => {
            console.log('客户端连接关闭');
        }

        function send() {
            let obj = document.getElementById('content');
            let content = obj.value;
            ws.send(content);
            obj.value = '';
        }
    </script>
</body>
</html>

这个服务端的案例记得保留，后续会使用协程 websocket 客户端连接。

本篇文章结束，我是温新。

请登录后再评论