如何使用webman创建一个text/eventstream响应, 使服务端持续向客户端发送数据

伯符 2023-02-23

问题描述

如题, 最近看到一个Content-type类型:`text/eventstream`, 可以持续向客户端发送数据, 使用webman作为服务端应当如何实现?

客户端如下:

  const eventSource = new EventSource("http://example.cc/api/test");
  eventSource.onmessage = function (e) {
    console.log(e);
  };

 3504  1 19

1个回答

walkor 2023-02-23

打赏

一个请求多个响应的这种需要用webman自定义进程来做。

创建 process/EventSource.php

<?php
namespace process;

use Workerman\Connection\TcpConnection;
use Workerman\Protocols\Http\Request;
use Workerman\Protocols\Http\ServerSentEvents;
use Workerman\Protocols\Http\Response;
use Workerman\Timer;

class EventSource
{
    public function onMessage(TcpConnection $connection, Request $request)
    {
        // 如果Accept头是text/event-stream则说明是SSE请求
        if ($request->header('accept') === 'text/event-stream') {
            // 首先发送一个 Content-Type: text/event-stream 头的响应
            $connection->send(new Response(200, ['Content-Type' => 'text/event-stream']));
            // 定时向客户端推送数据
            $timer_id = Timer::add(2, function () use ($connection, &$timer_id){
                // 连接关闭的时候要将定时器删除，避免定时器不断累积导致内存泄漏
                if ($connection->getStatus() !== TcpConnection::STATUS_ESTABLISHED) {
                    Timer::del($timer_id);
                    return;
                }
                // 发送message事件，事件携带的数据为hello，消息id可以不传
                $connection->send(new ServerSentEvents(['event' => 'message', 'data' => 'hello', 'id'=>1]));
            });
            return;
        }
        $connection->send('ok');
    }
}

config/process.php 加入配置

return [
    // ... 其它配置 ...

    'event-source' => [
        'listen' => 'http://0.0.0.0:8686',
        'handler' => \process\EventSource::class,
    ]
];

前端测试代码

var source = new EventSource('http://127.0.0.1:8686');
source.addEventListener('message', function (event) {
  var data = event.data;
  console.log(data); // 输出 hello
}, false);