EventSource和WebSocket

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

eventSource

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

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

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

const eventSource = new EventSource('/stream'); // 创建eventSource对象，指定服务器URL

eventSource.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对象，指定服务器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); // 处理错误
};

我正在参与2023腾讯技术创作特训营第三期有奖征文，组队打卡瓜分大奖！