概念
WebSocket是一种在客户端和服务器之间实现双向通信的网络协议。
特点
可以在单个TCP连接上提供全双工通信功能。服务器可以主动向客户端推送数据，不必客户端发送请求。
与HTTP协议的区别
- 1、双向通信。支持客户端和服务器之间的实时双向通信。HTTP协议则是单向请求-响应模式。
- 2、低延迟。长连接避免了连接建立和断开的过程，可以减少通信的延迟，保证实时性。
- 3、更少的数据传输。传输报文的头部信息较小，减少数据传输的开销。
- 4、跨域支持。可跨域，而HTTP需要通过CORS等机制来实现。
- 5、以二进制形式通信，更快，更安全，支持的数据类型更多。以二进制形式传输数据，可以更快地传输数据，并且能够处理更复杂的数据类型。且不容易被窃取或篡改。而HTTP是以明文的形式传递（HTTPS为了解决这个问题而诞生），支持的数据类型有限（文本、图像、音频等静态数据类型）。
工作原理
WebSocket约定了一个通信的规范，通过握手的机制，客户端和服务器之间建立一个类似TCP的连接，从而方便它们之间的通信。在建立握手时，数据是通过HTTP传输的，客户端通过发送特定的HTTP请求进行握手，服务器收到请求后进行验证，如果验证通过，则会建立WebSocket连接。
应用场景
WebSocket的实时双向通信特性使得它在许多应用场景发挥着重要的作用。如：
- 1、即时聊天。可实现实时的聊天功能，用户可以发送和接收信息，实现快速、低延迟的聊天体验。
- 2、实时数据更新。服务器可以将数据实时推送给客户端，确保数据的及时更新。应用于实时监控、股票行情等需要实时更新数据的应用。
- 3、在线游戏。实时的双向通信，可以提供稳定的通信通道，支持实时交互和多人游戏。
WebSocket属性、事件和方法
Socket.readyState属性
只读，表示连接状态。
0-连接尚未建立
1-连接已建立，可以进行通信
2-连接正在进行关闭
3-连接已经关闭或者连接不能打开
事件
| 事件 | 描述 |
|---|---|
| Socket.onopen | 连接建立时触发 |
| Socket.onmessage | 客户端接收服务端数据时触发 |
| Socket.onerror | 通信发生错误时触发 |
| Socket.onclose | 连接关闭时触发 |
方法
| 方法 | 描述 | 备注 |
|---|---|---|
| Socket.send() | 使用连接发送数据 | 可传递文本、ArrayBuffer或Blob对象 |
| Socket.close() | 关闭连接 |
WebSocket的心跳机制
一种用于保持WebSocket连接的稳定性和活跃性的方法。客户端定期发送小的探测消息，以确保连接仍然有效。如果连接断开或出现问题，可以及时发现并处理。
心跳机制的实现步骤
- 定义心跳间隔
- 定义心跳消息
- 设置心跳定时器
- 检查心跳信息
- 连接关闭时，清除心跳定时器
跨域问题
WebSocket协议本身不受同源策略的影响，它允许客户端和服务器之间进行全双工双向通信，即客户端和服务器都可以主动向对方发送和接收数据。然而，是否要求同源实际上取决于服务器端的实现。
尽管WebSocket协议本身不受同源策略限制，但浏览器在建立WebSocket连接时，会发送一个包含Origin头的HTTP请求给服务器。服务器可以根据这个Origin头来判断请求是否来自同一源，并据此决定是否接受该WebSocket连接请求。因此，虽然WebSocket协议本身不实行同源政策，但实际的同源要求取决于服务器的实现。
总的来说，WebSocket不遵循严格的同源策略，但服务器可以根据请求中的Origin头来实施同源检查。
