什么是JavaScript中的服務(wù)器發(fā)送事件？

在 Web 應(yīng)用程序開(kāi)發(fā)中，經(jīng)常需要將服務(wù)器上的數(shù)據(jù)實(shí)時(shí)顯示在客戶(hù)端上。愛(ài)掏網(wǎng) - it200.com以往的做法是輪詢(xún)，在客戶(hù)端不斷地向服務(wù)器發(fā)送請(qǐng)求，服務(wù)器返回?cái)?shù)據(jù)，這樣會(huì)占用大量的帶寬和服務(wù)器資源。愛(ài)掏網(wǎng) - it200.com然而，現(xiàn)在有一個(gè)更好的解決方案——服務(wù)器發(fā)送事件（Server-Sent Events，簡(jiǎn)稱(chēng) SSE）。愛(ài)掏網(wǎng) - it200.com

服務(wù)器發(fā)送事件（SSE）機(jī)制是一種基于HTTP協(xié)議的服務(wù)器推送技術(shù)。愛(ài)掏網(wǎng) - it200.com它允許服務(wù)器向客戶(hù)端推送任意數(shù)量的消息，從而能夠?qū)崿F(xiàn)服務(wù)器主動(dòng)推送數(shù)據(jù)到客戶(hù)端的效果。愛(ài)掏網(wǎng) - it200.comSSE 常用于實(shí)時(shí)性要求較高的應(yīng)用場(chǎng)景，如股票交易、拍賣(mài)等，通常被認(rèn)為是 WebSocket 技術(shù)的一種替代方案，使用 SSE 比使用 WebSocket 更加輕量級(jí)。愛(ài)掏網(wǎng) - it200.com

SSE 與 WebSocket 不同，SSE 采用的是單向通信的方式。愛(ài)掏網(wǎng) - it200.com當(dāng)客戶(hù)端向指定的 URL 發(fā)送一個(gè) SSE 請(qǐng)求時(shí)，瀏覽器會(huì)在建立連接之后一直等待直到服務(wù)器發(fā)送一條消息為止。愛(ài)掏網(wǎng) - it200.com這種方式避免了 WebSocket 的雙向通信所引發(fā)的一些安全問(wèn)題，并且不需要額外的握手流程，可以快速地建立連接和傳輸數(shù)據(jù)。愛(ài)掏網(wǎng) - it200.com

使用 SSE 需要借助一個(gè)新的瀏覽器 API：EventSource，它定義了與服務(wù)器建立 SSE 連接的方法。愛(ài)掏網(wǎng) - it200.com

要建立 SSE 連接，只需要在客戶(hù)端代碼中創(chuàng)建一個(gè) EventSource 對(duì)象，然后調(diào)用它的 open 方法，傳入一個(gè)服務(wù)器地址作為參數(shù)：

const source = new EventSource('/sse')

如果服務(wù)器設(shè)置了 CORS（跨域資源共享）響應(yīng)頭，那么需要將 EventSource 構(gòu)造函數(shù)的第一個(gè)參數(shù)設(shè)置為完整的 URL 。愛(ài)掏網(wǎng) - it200.com在服務(wù)器端，需要監(jiān)聽(tīng)請(qǐng)求的 URL，并向客戶(hù)端發(fā)送 SSE 事件。愛(ài)掏網(wǎng) - it200.com下面是一個(gè)簡(jiǎn)單的 Node.js 例子，監(jiān)聽(tīng) /sse 路徑的 GET 請(qǐng)求，并且每秒鐘向客戶(hù)端推送一條消息：

const http = require('http')

const server = http.createServer((req, res) => {
  if (req.url === '/sse') {
    res.writeHead(200, {
      'Content-Type': 'text/event-stream',
      'Cache-Control': 'no-cache',
      'Connection': 'keep-alive'
    })
    let id = 0
    setInterval(() => {
      res.write(`id: {id}\n`)
      res.write(`data:{new Date().toISOString()}\n\n`)
      id++
    }, 1000)
  } else {
    res.writeHead(404)
    res.end()
  }
})

server.listen(3000, () => {
  console.log('Server is listening on http://localhost:3000')
})

上面的代碼使用了 setInterval 方法每秒鐘向客戶(hù)端推送一條消息，由于 SSE 是單向通信，因此只需要將消息以特定格式發(fā)送給客戶(hù)端即可。愛(ài)掏網(wǎng) - it200.com

在客戶(hù)端，可以監(jiān)聽(tīng) EventSource 對(duì)象的 message 事件，當(dāng)服務(wù)器向客戶(hù)端發(fā)送消息時(shí)，會(huì)觸發(fā)該事件：

source.onmessage = event => {
  console.log(event.data)
}

event.data 屬性包含服務(wù)器發(fā)送的數(shù)據(jù)。愛(ài)掏網(wǎng) - it200.comSSE 支持多種類(lèi)型的消息，例如：普通文本、JSON、HTML 等。愛(ài)掏網(wǎng) - it200.com

當(dāng)客戶(hù)端與服務(wù)器的 SSE 連接發(fā)生錯(cuò)誤時(shí)，會(huì)觸發(fā) EventSource 對(duì)象的 error 事件。愛(ài)掏網(wǎng) - it200.com通過(guò)該事件的 event.target.readyState 屬性可以獲取當(dāng)前連接的狀態(tài)：

• 0 ：連接已經(jīng)關(guān)閉。愛(ài)掏網(wǎng) - it200.com
• 1 ：正在連接。愛(ài)掏網(wǎng) - it200.com
• 2 ：已經(jīng)建立連接，可以接收服務(wù)器發(fā)送的數(shù)據(jù)。愛(ài)掏網(wǎng) - it200.com

與 XMLHttpRequest 對(duì)象不同，EventSource對(duì)象支持重連機(jī)制，當(dāng)連接斷開(kāi)時(shí)，瀏覽器會(huì)自動(dòng)發(fā)起新的連接請(qǐng)求。愛(ài)掏網(wǎng) - it200.com可以通過(guò) EventSource.retry 屬性來(lái)控制重連策略，例如：

const source = new EventSource('/sse')
source.retry = 3000 // 每隔 3 秒嘗試重新連接一次

SSE 的優(yōu)點(diǎn)

相對(duì)于輪詢(xún)、Comet 等技術(shù)，SSE 有以下幾點(diǎn)優(yōu)點(diǎn)：

• 省去了客戶(hù)端不斷向服務(wù)器發(fā)送請(qǐng)求的過(guò)程，減少帶寬和服務(wù)器資源的損耗。愛(ài)掏網(wǎng) - it200.com
• SSE 與 WebSocket 相比，SSE 協(xié)議更加輕量級(jí)。愛(ài)掏網(wǎng) - it200.com不需要進(jìn)行復(fù)雜的握手流程，可以快速建立連接和傳輸數(shù)據(jù)。愛(ài)掏網(wǎng) - it200.com
• SSE 可以支持自定義事件、重連機(jī)制、超時(shí)機(jī)制等豐富的特性。愛(ài)掏網(wǎng) - it200.com
• SSE 提供了對(duì)跨域請(qǐng)求的支持，可以安全地將信息發(fā)送給任何站點(diǎn)，而不必?fù)?dān)心安全問(wèn)題。愛(ài)掏網(wǎng) - it200.com

SSE 的缺點(diǎn)

盡管 SSE 提供了一種實(shí)時(shí)推送數(shù)據(jù)的便捷方式，但是它的缺點(diǎn)也是存在的：

• SSE 采用的單向通信方式，只能從服務(wù)器向客戶(hù)端發(fā)送數(shù)據(jù)，不支持雙向通信。愛(ài)掏網(wǎng) - it200.com
• SSE 的兼容性在一定程度上依賴(lài)于瀏覽器。愛(ài)掏網(wǎng) - it200.com雖然現(xiàn)代瀏覽器基本上都支持 SSE，但是特定的瀏覽器和版本可能不支持 SSE。愛(ài)掏網(wǎng) - it200.com

結(jié)論

SSE 是一種比較新的服務(wù)器推送技術(shù)，與傳統(tǒng)的輪詢(xún)方式相比，SSE 更加高效，并且可以實(shí)現(xiàn)實(shí)時(shí)推送數(shù)據(jù)的需求。愛(ài)掏網(wǎng) - it200.com相對(duì)于 WebSocket 技術(shù)而言，SSE 的協(xié)議更加輕量級(jí)，適用于一些不需要復(fù)雜的雙向通信的應(yīng)用場(chǎng)景。愛(ài)掏網(wǎng) - it200.com雖然 SSE 的兼容性存在一定問(wèn)題，但是該技術(shù)在開(kāi)發(fā)實(shí)時(shí)應(yīng)用時(shí)還是值得考慮的。愛(ài)掏網(wǎng) - it200.com