WebSockets 和 HTTP/2 的正确姿势

前端

2023-09-17 09:13:33

WebSockets 和 HTTP/2：用于实时通信的网络协议

WebSockets：全双工通信的持久连接

WebSockets 是一种网络协议，允许服务器和浏览器在无需不断建立和断开连接的情况下进行双向通信。它的工作原理类似于建立一条管道，服务器和浏览器可以在管道中发送和接收数据，而无需等待对方完成。

HTTP/2：速度更快、更安全的 HTTP 升级

HTTP/2 是 HTTP 协议的升级版本，旨在提高网络性能和安全性。它使用二进制数据格式传输数据，支持多路复用（同时发送多个请求）和服务器推送（服务器主动向浏览器发送数据）。

WebSockets 与 HTTP/2 的优缺点对比

WebSockets 的优点：

全双工通信：允许服务器和浏览器同时发送和接收数据。
低延迟：二进制数据格式减少了数据传输延迟。
可扩展性：支持大量并发连接，适用于实时应用。

WebSockets 的缺点：

复杂性：实现比 HTTP 复杂，需要更多的开发工作。
浏览器支持：并非所有浏览器都支持 WebSockets。

HTTP/2 的优点：

更快的速度：多路复用和服务器推送提高了数据传输效率。
更高的安全性：支持 TLS 加密，保护数据传输。
浏览器兼容性：所有浏览器都支持 HTTP/2。

HTTP/2 的缺点：

服务器端支持：需要服务器端支持，增加了部署难度。
可扩展性：连接数量可能受限于服务器容量。

关键区别：底层传输、通信类型和数据格式

底层传输： WebSockets 使用 TCP，而 HTTP/2 使用二进制数据格式。
通信类型： WebSockets 支持全双工通信，而 HTTP/2 仅支持半双工通信（一次只能有一个方向传输数据）。
数据格式： WebSockets 使用 WebSocket 帧，而 HTTP/2 使用二进制数据帧。

选择 WebSockets 还是 HTTP/2？

选择哪种协议取决于应用的具体要求：

需要全双工通信： 选择 WebSockets。
需要更快的速度和更高的安全性： 选择 HTTP/2。
需要广泛的浏览器兼容性： 选择 HTTP/2。

代码示例

WebSockets：

// 客户端代码
const socket = new WebSocket('ws://localhost:8080');

socket.onopen = () => {
  console.log('连接已建立');
};

socket.onmessage = (event) => {
  console.log(`接收消息：${event.data}`);
};

socket.onclose = () => {
  console.log('连接已关闭');
};

// 服务器代码
const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', (ws) => {
  console.log('连接已建立');

  ws.on('message', (message) => {
    console.log(`接收消息：${message}`);
  });

  ws.on('close', () => {
    console.log('连接已关闭');
  });
});

HTTP/2：

// 客户端代码
const fetch = require('node-fetch');

fetch('https://example.com', {
  headers: {
    'content-type': 'application/json',
  },
  method: 'POST',
  body: JSON.stringify({ name: 'John Doe' }),
})
.then((res) => res.json())
.then((data) => console.log(data));