SSE(Server-Sent Events) 使用

2021-08-01

字数统计: 496字 | 阅读时长≈ 2分

一、什么是SSE?

Server-Sent Events,简称SSE.基于HTTP协议,支持单向通信,以文本流式信息的形式实现从服务端向浏览器推送消息。SSE并不是新兴的技术，早已经被HTML5纳入标准。

SSE连接本质是由客户端发送一个请求头accept: text/event-stream的http长连接请求，服务端连接建立，并响应Content-Type: text/event-stream。

SSE Support

SSE协议Client/Server交互流程图

SSE

二、消息传输格式

格式：[field]: content\n
一个message可以有多个field，每个message最后用\n分割 field字段有下列选项
field字段类型

event: 事件类型
data: 数据值，多个使用换行符(\n)附加
id: 数值不为null时,附加给lastEventId属性
retry: 由十进制整数组成,单位毫秒

三、简易SSE服务端

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
header('Connection: keep-alive');

ob_end_flush();
ob_implicit_flush();

function buildMessage(string $data, ?string $event = null, ?string $id = null, ?int $retry = null): string {
    $message = '';
    if ($id !== null) {
        $message .= "id: {$id}\n";
    }

    if ($event !== null) {
        $message .= "event: {$event}\n";
    }

    if ($retry !== null) {
        $message .= "retry: {$retry}\n";
    }

    foreach (explode("\n", $data) as $line) {
        $message .= "data: {$line}\n";
    }
    return $message . "\n";
}

for ($i = 0; $i <= 100; $i++) {
  echo buildMessage('now:' . time(), 'time', $i);
  sleep(1);
}

四、客户端连接SSE服务

在浏览器中，我们可以通过Javascript Api的EventSource对象连接SSE服务。而在非浏览器的环境，我们需要建立http长连接，流式读取数据即可。

withCredentials 在跨域请求时，携带cookie等凭证信息

var es = new EventSource('http://localhost:8888', { withCredentials: true })
es.addEventListener('open', function(event) {
    console.log('opened....', event)
});
es.addEventListener('message', function(event) {
    console.log('receive', event.data)
})
es.addEventListener('close', function(event) {
    console.log('closed', event)
})

五、参考链接

本文作者： 暮秋人
本文链接： https://muqiuren.pages.dev/2021/08/how-to-use-server-sent-events/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！