eventSource（事件源）和WebSocket都是用于实现服务器与客户端之间的实时通信的技术，但它们在一些方面有所不同。

eventSource

eventSource是HTML5中的一种技术，它允许服务器向客户端发送单向的、持久的、自动的消息。它基于HTTP协议，使用长轮询（long-polling）机制来实现实时通信。以下是eventSource的一些特点和优势：

• 简单易用：使用eventSource非常简单，只需要在客户端创建一个eventSource对象，并指定服务器的URL即可。
• 自动重连：当连接断开时，eventSource会自动尝试重新连接服务器，确保通信的持久性。
• 单向通信：eventSource只支持服务器向客户端的单向通信，客户端无法向服务器发送消息。
• 自动解析：eventSource可以自动解析服务器发送的文本数据，无需手动处理。

下面是一个使用eventSource的简单示例：

const eventSource = new EventSource('/stream'); // 创建eventSource对象，指定服务器URLeventSource.onmessage = function(event) {console.log('Received message:', event.data); // 处理接收到的消息
};eventSource.onerror = function(error) {console.error('Error:', error); // 处理错误
};

EventSource本身并不支持直接设置请求头

你可以使用EventSource的polyfill库来实现设置请求头的功能。Polyfill库是一个用于填充浏览器功能缺失的库，它可以模拟或扩展浏览器的特性。

一个常用的EventSource polyfill库是event-source-polyfill。它可以在不支持EventSource的浏览器中提供类似的功能，并且支持设置请求头。你可以通过以下代码示例来了解如何使用event-source-polyfill来设置请求头：

// 引入eventsource-polyfill库
import EventSource from 'eventsource-polyfill';// 创建一个新的EventSource对象，并设置请求头
const eventSource = new EventSource('/your-event-stream', {headers: {'Authorization': 'Bearer your-token','Custom-Header': 'custom-value'}
});// 监听事件
eventSource.onmessage = function(event) {console.log('Received message:', event.data);
};eventSource.onerror = function(error) {console.error('Error:', error);
};

在上面的示例中，我们使用eventsource-polyfill库创建了一个新的EventSource对象，并通过headers选项设置了请求头。你可以根据需要添加自定义的请求头。

WebSocket

WebSocket是一种全双工的通信协议，它提供了双向的、持久的、实时的通信通道。WebSocket基于TCP协议，通过建立一个持久的连接，实现服务器与客户端之间的双向通信。以下是WebSocket的一些特点和优势：

• 双向通信：WebSocket支持服务器与客户端之间的双向通信，可以实现实时的双向数据传输。
• 持久连接：WebSocket通过建立一个持久的连接，避免了HTTP的短连接问题，减少了通信的开销。
• 高效性能：WebSocket使用二进制帧传输数据，相比于eventSource的文本传输，具有更高的性能。
• 自定义协议：WebSocket可以使用自定义的协议，不仅限于HTTP协议。

下面是一个使用WebSocket的简单示例：

const socket = new WebSocket('ws://localhost:8080'); // 创建WebSocket对象，指定服务器URLsocket.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); // 处理错误
};