精品熟人妻一区二区三区四区不卡-精品爽黄69天堂a-精品水蜜桃久久久久久久-精品丝袜国产自在线拍-精品丝袜国产自在线拍a-精品丝袜国产自在线拍免费看

概述

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

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

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

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

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

原理

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

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

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

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

開(kāi)發(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ī)制來(lái)定期發(fā)送更新
    const timer = setInterval(() => {
      ctx.body += `data: ${new Date().toLocaleTimeString()}\n\n`;
    }, 2000);

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

module.exports = SseController;

客戶(hù)端

通過(guò) EventSource 類(lèi)訪(fǎng)問(wèn)接口，實(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.');
}

結(jié)論

其實(shí)在項(xiàng)目中使用 SSE 要比 WebSocket 快很多，這里說(shuō)的是開(kāi)發(fā)效率。

由于 SSE 是單向通信，一般來(lái)說(shuō)要比 WebSocket 占用的資源更少。目前 SSE 我使用過(guò)的場(chǎng)景只有一個(gè)，就是已讀未讀消息的更新。

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

閱讀原文：原文鏈接