前端 websocket

一、定义和基本概念

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它使得客户端和服务器之间可以进行实时的、双向的数据传输。与传统的 HTTP 请求-响应模式不同，WebSocket 允许服务器主动向客户端推送数据，而不需要客户端先发起请求。这为实时性要求较高的应用场景，如在线聊天、实时数据监控、多人协作编辑等提供了高效的通信机制。

二、工作原理

1. 建立连接

客户端通过发送一个 HTTP 请求（称为 WebSocket 握手请求）来启动与服务器的连接。这个请求包含特殊的`Upgrade: websocket`和`Connection: Upgrade`头部信息，告诉服务器客户端希望升级到 WebSocket 协议。

例如：在 JavaScript 中，使用`new WebSocket('ws://your-server-address');`（如果是加密连接则是`wss://`）来发起握手请求。

服务器收到请求后，如果支持 WebSocket 协议，会返回一个响应，完成握手过程，建立起 WebSocket 连接。这个连接会在客户端和服务器之间保持打开状态，用于后续的数据传输。

2. 数据传输

一旦连接建立，客户端和服务器就可以通过这个连接双向发送数据。数据以帧的形式传输，有文本帧和二进制帧两种类型。在 JavaScript 客户端中，可以使用`send`方法发送数据，如`webSocket.send('message');`发送文本消息，或者发送`ArrayBuffer`等二进制数据。

服务器接收到数据后，可以进行相应的处理，然后将处理后的结果或新的数据发送回客户端。这种双向通信可以实时进行，没有传统 HTTP 请求的延迟。

3. 关闭连接

当通信结束或者出现错误等情况时，客户端或服务器可以主动发起连接关闭。在客户端，可以使用`close`方法（如`webSocket.close();`）来关闭连接。服务器也有相应的机制来关闭连接，并且会向客户端发送一个关闭帧。

三、在前端的应用场景

1. 实时聊天应用

多个用户之间可以实时发送和接收消息。当一个用户发送消息时，通过 WebSocket 将消息发送到服务器，服务器再将消息广播给其他在线用户。这样可以实现即时的聊天体验，避免了传统 HTTP 轮询方式的延迟和资源浪费。例如，一个简单的聊天应用可以在客户端通过 WebSocket 发送聊天消息，在服务器端处理消息的转发，然后在其他客户端接收并显示消息。

2. 实时数据展示（如金融数据、物联网数据）

对于实时更新的数据，如股票价格、传感器数据等，WebSocket 可以让服务器在数据变化时立即将新数据推送到客户端。客户端可以实时更新界面，展示最新的数据。例如，一个金融网站可以通过 WebSocket 接收股票行情数据，然后在网页上动态地更新股票价格图表和相关信息。

3. 协同工作和在线游戏

在多人协作的应用场景中，如在线文档编辑、团队任务管理或者多人在线游戏，WebSocket 可以用于实时同步各个用户的操作。例如，在一个在线文档编辑工具中，当一个用户进行文本编辑、添加或删除内容时，这些操作可以通过 WebSocket 实时发送到服务器，然后服务器将这些操作同步给其他正在编辑的用户，保证所有用户看到的文档内容是实时更新的。