eventSource（事件源）和WebSocket都是用于實(shí)現(xiàn)服務(wù)器與客戶端之間的實(shí)時(shí)通信的技術(shù)，但它們?cè)谝恍┓矫嬗兴煌?/p>

eventSource

eventSource是HTML5中的一種技術(shù)，它允許服務(wù)器向客戶端發(fā)送單向的、持久的、自動(dòng)的消息。它基于HTTP協(xié)議，使用長(zhǎng)輪詢（long-polling）機(jī)制來實(shí)現(xiàn)實(shí)時(shí)通信。以下是eventSource的一些特點(diǎn)和優(yōu)勢(shì)：

• 簡(jiǎn)單易用：使用eventSource非常簡(jiǎn)單，只需要在客戶端創(chuàng)建一個(gè)eventSource對(duì)象，并指定服務(wù)器的URL即可。

• 自動(dòng)重連：當(dāng)連接斷開時(shí)，eventSource會(huì)自動(dòng)嘗試重新連接服務(wù)器，確保通信的持久性。

• 單向通信：eventSource只支持服務(wù)器向客戶端的單向通信，客戶端無法向服務(wù)器發(fā)送消息。

• 自動(dòng)解析：eventSource可以自動(dòng)解析服務(wù)器發(fā)送的文本數(shù)據(jù)，無需手動(dòng)處理。

下面是一個(gè)使用eventSource的簡(jiǎn)單示例：

const eventSource = new EventSource('/stream'); // 創(chuàng)建eventSource對(duì)象，指定服務(wù)器URL


eventSource.onmessage = function(event) {
  console.log('Received message:', event.data); // 處理接收到的消息
};


eventSource.onerror = function(error) {
  console.error('Error:', error); // 處理錯(cuò)誤
};

EventSource本身并不支持直接設(shè)置請(qǐng)求頭

你可以使用EventSource的polyfill庫(kù)來實(shí)現(xiàn)設(shè)置請(qǐng)求頭的功能。Polyfill庫(kù)是一個(gè)用于填充瀏覽器功能缺失的庫(kù)，它可以模擬或擴(kuò)展瀏覽器的特性。

一個(gè)常用的EventSource polyfill庫(kù)是event-source-polyfill。它可以在不支持EventSource的瀏覽器中提供類似的功能，并且支持設(shè)置請(qǐng)求頭。你可以通過以下代碼示例來了解如何使用event-source-polyfill來設(shè)置請(qǐng)求頭：

// 引入eventsource-polyfill庫(kù)
import EventSource from 'eventsource-polyfill';


// 創(chuàng)建一個(gè)新的EventSource對(duì)象，并設(shè)置請(qǐng)求頭
const eventSource = new EventSource('/your-event-stream', {
  headers: {
    'Authorization': 'Bearer your-token',
    'Custom-Header': 'custom-value'
  }
});


// 監(jiān)聽事件
eventSource.onmessage = function(event) {
  console.log('Received message:', event.data);
};


eventSource.onerror = function(error) {
  console.error('Error:', error);
};

在上面的示例中，我們使用eventsource-polyfill庫(kù)創(chuàng)建了一個(gè)新的EventSource對(duì)象，并通過headers選項(xiàng)設(shè)置了請(qǐng)求頭。你可以根據(jù)需要添加自定義的請(qǐng)求頭。

WebSocket

WebSocket是一種全雙工的通信協(xié)議，它提供了雙向的、持久的、實(shí)時(shí)的通信通道。WebSocket基于TCP協(xié)議，通過建立一個(gè)持久的連接，實(shí)現(xiàn)服務(wù)器與客戶端之間的雙向通信。以下是WebSocket的一些特點(diǎn)和優(yōu)勢(shì)：

• 雙向通信：WebSocket支持服務(wù)器與客戶端之間的雙向通信，可以實(shí)現(xiàn)實(shí)時(shí)的雙向數(shù)據(jù)傳輸。

• 持久連接：WebSocket通過建立一個(gè)持久的連接，避免了HTTP的短連接問題，減少了通信的開銷。

• 高效性能：WebSocket使用二進(jìn)制幀傳輸數(shù)據(jù)，相比于eventSource的文本傳輸，具有更高的性能。

• 自定義協(xié)議：WebSocket可以使用自定義的協(xié)議，不僅限于HTTP協(xié)議。

下面是一個(gè)使用WebSocket的簡(jiǎn)單示例：

const socket = new WebSocket('ws://localhost:8080'); // 創(chuàng)建WebSocket對(duì)象，指定服務(wù)器URL


socket.onopen = function() {
  console.log('WebSocket connection established.'); // 連接建立成功
};


socket.onmessage = function(event) {
  console.log('Received message:', event.data); // 處理接收到的消息
};


socket.onerror = function(error) {
  console.error('Error:', error); // 處理錯(cuò)誤
};