,,

消息提醒別再用 WebSocket 和輪詢，有更好的方案SSE！

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2025年4月27日 8:34 本文熱度 355

概述

前端向后端請(qǐng)求數(shù)據(jù)常規(guī)來說都是使用 http 連接，除非是實(shí)時(shí)性非常高的項(xiàng)目，例如IM系統(tǒng)等需要使用到WebSocket。

但是項(xiàng)目中有時(shí)候存在尷尬的場(chǎng)景：

庫存信息
已讀未讀消息
實(shí)時(shí)同步數(shù)據(jù)
......

這種實(shí)時(shí)性比較高，但是數(shù)據(jù)量比較小的內(nèi)容，使用 http 輪詢會(huì)讓系統(tǒng)增加非常多的資源損耗，而使用 WebSocket 則顯得非常沒必要。

所以 SSE 應(yīng)運(yùn)而生。~~(事實(shí)上SSE技術(shù)產(chǎn)生的時(shí)間非常早)~~

原理

基于HTTP：SSE是基于HTTP的，這意味著它可以利用現(xiàn)有的HTTP基礎(chǔ)設(shè)施，如緩存、代理等。
單向通信：SSE是一種單向通信協(xié)議，意味著數(shù)據(jù)只能從服務(wù)器流向客戶端。這與WebSocket不同，后者支持雙向通信。

其實(shí)說白了還是 http 連接，不同的是這是一個(gè)長(zhǎng)連接，并且返回?cái)?shù)據(jù)的格式不太一樣，僅此而已。

SSE采用事件流格式數(shù)據(jù)，每條消息由一行或多行組成，每一行都包含字段名和值，用冒號(hào)分隔。

并且 SSE 內(nèi)置的自動(dòng)重連機(jī)制。如果由于任何原因連接斷開，瀏覽器會(huì)自動(dòng)嘗試重新建立連接。

開發(fā)

服務(wù)端

服務(wù)端主要是需要修改請(qǐng)求頭，其他的就是修改一下推送信息機(jī)制。

// app/controller/sse.js
const Controller = require('egg').Controller;

class SseController extends Controller {
  async stream() {
    const { ctx } = this;
    
    // 設(shè)置響應(yīng)頭
    ctx.set('Content-Type', 'text/event-stream');
    ctx.set('Cache-Control', 'no-cache');
    ctx.set('Connection', 'keep-alive');

    // 發(fā)送初始連接確認(rèn)消息
    ctx.body = `data: Connected\n\n`;

    // 可以在這里設(shè)置定時(shí)器或者其他機(jī)制來定期發(fā)送更新
    const timer = setInterval(() => {
      ctx.body += `data: ${new Date().toLocaleTimeString()}\n\n`;
    }, 2000);

    // 清理資源
    ctx.res.on('close', () => {
      clearInterval(timer);
    });
  }
}

module.exports = SseController;

客戶端

通過 EventSource 類訪問接口，實(shí)現(xiàn)一下數(shù)據(jù)回傳以后的邏輯。

if ('EventSource' in window) {
  var eventSource = new EventSource('/api/getMessage');

  // 響應(yīng)數(shù)據(jù)連接
  eventSource.onmessage = function(event) {
    console.log('New message:', event.data);
  };

  // 連接異常
  eventSource.onerror = function(event) {
    console.error('Error occurred:', event);
    eventSource.close();
  };
} else {
  console.log('Your browser does not support SSE.');
}