WebSocket 使用
约 769 字大约 3 分钟
2025-01-21
WebSocket 是一种全双工通信协议，允许客户端和服务器之间进行实时的双向通信，并且支持POST请求。但是值得注意的是WebSocket只支持ws或wss开头的接口。WebSocket 握手时并没有提供直接设置请求头的标准方法，它的握手阶段是由浏览器自动处理的，因此你不能直接在创建 WebSocket 连接时设置请求头，但可以通过通过 URL 参数传递的方式传递信息。
使用
基本使用
const url = ''
const socket = new WebSocket(url)
// 连接打开时触发
socket.addEventListener('open', event => {
console.log('WebSocket连接完成:', event)
// 处理接收到的消息
socket.addEventListener('message', event => {
console.log('接收消息:', event.data)
// 在这里处理接收到的流式数据
})
})
// 连接关闭时触发
socket.addEventListener('close', event => {
console.log('WebSocket连接关闭:', event)
})
// 处理错误时触发
socket.addEventListener('error', error => {
console.error('WebSocket error:', error)
})EventSource与WebSocket区别
EventSource 和 WebSocket 是两种用于实现实时通信的技术，但在功能和应用场景上有一些明显的区别。最大的不同就是，EventSource 是单向通信（消息只能从服务端到发送到客户端），而 WebSocket 是双向通信。
EventSource：
- 单向通信： EventSource 是服务器向客户端的单向通信，客户端接收来自服务器的事件流。
- 基于HTTP协议： EventSource 基于标准的 HTTP/HTTPS 协议，使用长轮询或类似的机制，但并不是完全双向的通信。
- 文本数据传输： 通常用于传输文本数据，如服务器推送的消息或事件。
- 自动重连： 当连接中断，EventSource 会自动尝试重新连接，不需要手动处理重连。
- 适用场景： 适用于服务器向客户端单向推送信息，比如实时更新的新闻、股票报价等，但不适合需要客户端与服务器进行双向通信的场景。
WebSocket：
- 双向通信： WebSocket 提供全双工、双向通信的能力，客户端和服务器之间可以互相发送数据。
- 独立的协议： WebSocket 使用自己的协议，建立在 TCP 连接之上，允许在同一个连接上进行双向通信。
- 任意数据传输： 能够传输任意类型的数据，不限于文本，可以是二进制数据。
- 手动处理重连： 当连接中断，需要在客户端代码中实现重新连接的逻辑。
- 适用场景： 适用于需要双向实时通信的场景，比如聊天应用、在线游戏等，其中客户端和服务器都需要发送和接收数据。
EventSource 更适用于服务器向客户端的单向通信，而 WebSocket 则适合需要客户端和服务器双向实时通信的场景。选择使用哪种技术取决于你的具体需求和应用场景。