SSE技术实战总结：从基础到高级的应用技巧分享

我的写法，亲测靠谱

在实际项目中，我经常用到SSE（Server-Sent Events）来实现服务器向客户端推送实时数据。这种技术在很多场景下非常实用，比如实时聊天、股票行情更新等。下面是我总结的一些最佳实践和踩坑经验。

基本用法，简单明了

首先，咱们来看看SSE的基本用法。SSE的API其实很简单，主要是EventSource对象。我一般这样处理：

const eventSource = new EventSource('https://jztheme.com/api/sse');

eventSource.onmessage = function(event) {
  console.log('新消息:', event.data);
};

eventSource.onerror = function(error) {
  console.error('SSE错误:', error);
};

这段代码中，我们创建了一个EventSource对象，并连接到指定的URL。然后通过onmessage事件处理器来处理接收到的消息，onerror事件处理器来处理错误。这种写法的好处是简单明了，容易上手。

这几种错误写法，别再踩坑了

虽然SSE的API简单，但还是有一些常见的错误写法，我在这里列出来，希望大家能避开这些坑。

1. 忽略错误处理

很多人在使用SSE时会忽略错误处理，这是非常危险的。我之前就因为这个原因导致应用出问题，折腾了半天才发现。正确的做法是一定要加上onerror事件处理器：

eventSource.onerror = function(error) {
  console.error('SSE错误:', error);
  // 这里可以添加重连逻辑或其他处理
};

2. 不关闭连接

另一个常见的错误是不关闭SSE连接。如果页面卸载或用户离开页面，SSE连接如果不关闭，可能会导致资源浪费和潜在的问题。我一般会在页面卸载时关闭连接：

window.addEventListener('beforeunload', () => {
  eventSource.close();
});

3. 使用fetch代替EventSource

有些人可能会尝试用fetch来替代EventSource，这样做虽然可以实现类似的功能，但性能和稳定性都不如SSE。fetch更适合用于一次性请求，而SSE则适合长时间的实时数据推送。所以，不要试图用fetch来替代EventSource。

实际项目中的坑

在实际项目中，我遇到过一些具体的坑，这里分享一下。

1. 跨域问题

跨域问题是SSE的一个常见坑。如果后端没有正确配置CORS（跨源资源共享），SSE请求会失败。我在项目中就遇到过这个问题，解决方法是在后端加上CORS配置：

// 假设你使用的是Express
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

2. 服务器重启问题

如果你的服务器需要定期重启，SSE连接可能会断开。为了避免这种情况，我一般会在客户端实现重连逻辑：

let reconnectInterval = 5000; // 5秒重连一次

function connect() {
  const eventSource = new EventSource('https://jztheme.com/api/sse');
  eventSource.onmessage = function(event) {
    console.log('新消息:', event.data);
  };
  eventSource.onerror = function(error) {
    console.error('SSE错误:', error);
    eventSource.close();
    setTimeout(connect, reconnectInterval);
  };
}

connect();

3. 消息格式问题

有时候，后端发送的消息格式可能不符合预期。我一般会在客户端做一层解析，确保消息格式正确：

eventSource.onmessage = function(event) {
  try {
    const data = JSON.parse(event.data);
    console.log('新消息:', data);
  } catch (error) {
    console.error('消息格式错误:', error);
  }
};

总结

以上就是我在使用SSE过程中总结的一些实战经验和踩坑经历。SSE是一个非常实用的技术，但也有一些需要注意的地方。希望这些经验对你有帮助。如果有更好的方案或者补充，欢迎在评论区交流。