使用sse技术实现长链接(二)

发表于 更新于 分类于 ， ， ， ， 阅读次数：

本篇主要介绍使用sse创建长连接来实现服务器推送功能。

本文通过EventSource讲解客户端（浏览器）实现思路。

基础

下面给出最小的 EventSource 客户端示例（适用于浏览器控制台或页面脚本）：

1
2
3
4
5
6
7
8
9
10
11
<script>
  const es = new EventSource('/sse');

  es.onopen = () => console.log('SSE connected');
  es.onmessage = e => console.log('message:', e.data);
  es.onerror = e => console.error('SSE error', e);

  // 监听自定义事件
  es.addEventListener('welcome', e => console.log('welcome event:', e.data));
  // 关闭连接：es.close();
</script>

要点：

  • 浏览器端 EventSource 会自动重连，若服务器发送 id: 字段，浏览器会在重连时带上 Last-Event-ID。
  • 如果存在跨域（CORS），后端需要允许 GET 并返回合适的 Access-Control-Allow-Origin / Access-Control-Allow-Credentials 头。

在前端框架中的简短示例（React Hook）

1
2
3
4
5
6
7
8
9
10
// useSSE.js
import { useEffect } from 'react';

export default function useSSE(url, onMessage) {
  useEffect(() => {
    const es = new EventSource(url);
    es.onmessage = e => onMessage && onMessage(e.data);
    return () => es.close();
  }, [url]);
}

浏览器测试


系列导航

参考链接