Eventsource、websocket与socket.io 三者的差异和优缺点
EventSource
EventSource 是一种轻量级的 API，用于获取来自服务器的实时事件。它是 WebSockets 的替代方案，因为它比 WebSockets 更简单，更适合处理服务器向客户端发送数据的情况。使用 EventSource，只有服务器能够发送消息，所以它更安全。但是，它不支持双向通信或客户端发送消息。
优点：
简单易用，与 HTTP 协议兼容。
只需要一个长连接，服务器可以推送任意数量的事件。
适用于服务端向客户端发送频率较低的数据。
可以自动重连，并且在连接断开时会触发 error 和 close 事件，方便处理异常情况。
缺点：
不支持双向通信。
不支持二进制数据传输。
兼容性存在问题，不支持 IE 浏览器。
示例：
const eventSource = new EventSource('/api/data');
eventSource.addEventListener('message', (event) => {
console.log('Received message data:', event.data);
});
eventSource.addEventListener('error', (event) => {
if (event.eventPhase === EventSource.CLOSED) {
console.log('Connection was closed.');
} else {
console.error('An error occurred:', event);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
WebSocket
WebSocket 是一种在单个 TCP 连接上提供全双工通信的协议，它使得客户端和服务器之间进行实时交互变得更加容易。它是一种标准化的通信协议，客户端和服务器都可以通过它发送消息。
优点:
支持双向通信，客户端和服务端都可以发送和接收消息；
可以发送二进制数据，支持大文件传输；
协议比较轻量级，能够节省网络带宽和服务器资源；
兼容性较好，大部分现代浏览器都支持 WebSocket。
缺点:
需要在服务端实现 WebSocket 协议的支持；
相对于 HTTP 请求来说，WebSocket 连接需要占用更多的服务端资源；
安全性问题：需要注意防止 CSRF 和 XSS 攻击，避免恶意用户利用 WebSocket 劫持会话或注入脚本等。
示例：
const webSocket = new WebSocket('ws://localhost:8080');
webSocket.addEventListener('open', (event) => {
console.log('WebSocket connection established!');
});
webSocket.addEventListener('message', (event) => {
console.log('Received message data:', event.data);
});
webSocket.addEventListener('close', (event) => {
console.log('WebSocket connection closed!');
});
webSocket.addEventListener('error', (event) => {
console.error('An error occurred:', event);
});
// 发送消息到服务器
webSocket.send('Hello, server!');
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Socket.IO
Socket.IO 是一个库，它封装了 WebSocket 和其他实时通信协议，并提供了一组易于使用的 API。它既可以在客户端上使用，也可以在服务器端上使用，它还提供了许多高级功能，例如自动重连、心跳机制和房间等概念。
优点：
支持双向通信。
支持广播和房间功能，使得开发者可以轻松地实现实时应用程序。
自带多种传输方式，如 WebSocket、HTTP 长轮询、JSONP 等，可以根据浏览器或设备的不同选择最佳传输方式。
缺点：
使用 Socket.IO 的应用程序需要使用 Socket.IO 作为通信层，不能在应用程序中集成原生 WebSocket 或 EventSource。
对比 EventSource 和 WebSocket，Socket.IO 相对来说更加庞大，需要引入相应的客户端库和服务器端插件，如果应用程序只需要简单的实时通信，使用 EventSource 或 WebSocket 可能更加适合
示例：
// 客户端代码
const socket = io('http://localhost:3000');
socket.on('connect', () => {
console.log('Socket.io connection established!');
});
socket.on('message', (data) => {
console.log('Received message data:', data);
});
socket.on('disconnect', () => {
console.log('Socket.io connection closed!');
});
socket.emit('message', 'Hello, server!');
// 服务端代码
const io = require('socket.io')(3000);
io.on('connection', (socket) => {
console.log('A new client is connected!');
socket.on('message', (data) => {
console.log('Received message data:', data);
socket.emit('message', `You said: ${data}`);
});
socket.on('disconnect', () => {
console.log('Client disconnected!');
});
});