介绍
WebSocket 是一种在单个 TCP 连接上进行 全双工 通信的协议，它可以让客户端和服务器之间进行实时的双向通信。与传统的 HTTP 请求不同，WebSocket 使用了一个长连接，在客户端和服务器之间保持持久的连接，从而可以实时地发送和接收数据。
WebSocket与HTTP的区别
WebSocket与HTTP的区别在于连接的性质和通信方式。WebSocket是一种双向通信的协议，通过一次握手即可建立持久性的连接，服务器和客户端可以随时发送和接收数据。而HTTP协议是一种请求-响应模式的协议，每次通信都需要发送一条请求并等待服务器的响应。WebSocket的实时性更好，延迟更低，并且在服务器和客户端之间提供双向的即时通信能力，适用于需要实时数据传输的场景。
使用WebSocket
- 创建WebSocket对象
const socket = new WebSocket('WebSocket服务器的地址');
- 监听WebSocket事件
open： 与服务器建立连接时触发message：收到服务器发送的消息时触发close： 与服务器断开连接时触发error： 连接或通信过程中发生错误时触发
// 连接建立事件
socket.addEventListener('open', () => {
console.log('WebSocket连接已建立');
});
// 消息接收事件
socket.addEventListener('message', (event) => {
const message = event.data;
console.log('收到消息：', message);
// 处理接收到的消息，将其显示在前端界面上
});
// 连接关闭事件
socket.addEventListener('close', () => {
console.log('WebSocket连接已断开');
});
// 连接错误事件
socket.addEventListener('error', (error) => {
console.error('发生错误：', error);
});
- 发送消息
const message = 'Hello, server!'; // 可为字符串、JSON对象
socket.send(message);
- 关闭WebSocket连接
socket.close();
WebSocket应用场景
- 实时聊天应用：WebSocket能够提供双向、实时的通信机制，使得实时聊天应用能够快速、高效地发送和接收消息，实现即时通信。
- 实时协作应用：WebSocket可以用于实时协作工具，如协同编辑文档、白板绘画、团队任务管理等，团队成员可以实时地在同一页面上进行互动和实时更新。
- 实时数据推送：WebSocket可以用于实时数据推送场景，如股票行情、新闻快讯、实时天气信息等，服务器可以实时将数据推送给客户端，确保数据的及时性和准确性。
- 多人在线游戏：WebSocket提供了实时的双向通信机制，适用于多人在线游戏应用，使得游戏服务器能够实时地将游戏状态和玩家行为传输给客户端，实现游戏的实时互动。
- 在线客服和客户支持：WebSocket可以用于在线客服和客户支持系统，实现实时的客户沟通和问题解决，提供更好的用户体验，减少等待时间。
