超碰人人人人人,亚洲AV午夜福利精品一区二区,亚洲欧美综合区丁香五月1区,日韩欧美亚洲系列

概述

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

但是項目中有時候存在尷尬的場景：

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

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

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

原理

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

其實說白了還是 http 連接，不同的是這是一個長連接，并且返回數(shù)據(jù)的格式不太一樣，僅此而已。

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

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

開發(fā)

服務(wù)端

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

// 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ā)送初始連接確認消息
    ctx.body = `data: Connected\n\n`;

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

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

module.exports = SseController;

客戶端

通過 EventSource 類訪問接口，實現(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.');
}

結(jié)論

其實在項目中使用 SSE 要比 WebSocket 快很多，這里說的是開發(fā)效率。

由于 SSE 是單向通信，一般來說要比 WebSocket 占用的資源更少。目前 SSE 我使用過的場景只有一個，就是已讀未讀消息的更新。

當(dāng)然，有人說使用 SSE 只是將客戶端的輪詢換到了服務(wù)端，但其實并非如此。一個最根本的區(qū)別在于，輪詢即使空數(shù)據(jù)客戶端也要請求，而SSE則是有數(shù)據(jù)的時候向客戶端推送(例子不是)。

閱讀原文：原文鏈接