WebSocket - 技术栈

WebSocket是一种用于在Web浏览器和服务器之间进行双向通信的协议。它提供了一种在单个TCP连接上进行持久化的全双工通信能力。WebSocket协议通过在HTTP握手阶段升级到WebSocket连接，从而允许双方之间建立持久连接。一旦WebSocket连接建立，服务器和客户端就可以通过发送消息来进行实时通信。这种双向通信机制。

Websocket 协议与 HTTP 协议没有关系，它是一个建立在 TCP 协议上的全新协议，为了兼容 HTTP 握手规范，在握手阶段依然使用 HTTP 协议，握手完成之后，数据通过 TCP 通道进行传输。

Websoket 数据传输是通过 frame 形式，一个消息可以分成几个片段传输。这样大数据可以分成一些小片段进行传输，不用考虑由于数据量大导致标志位不够的情况。也可以边生成数据边传递消息，提高传输效率。

特点

双向通信：服务器和客户端可以通过发送消息进行实时双向通信。
持久连接：WebSocket连接是持久的，不需要在每次通信时重新建立连接。
低开销：与传统的HTTP请求相比，WebSocket通信的开销较低，因为不需要频繁地建立和关闭连接。
低延迟：由于协议是全双工的，所以服务器可以随时主动给客户端下发数据。相对于HTTP请求需要等待客户端发起请求服务端才能响应，延迟明显更少。
支持跨域：WebSocket协议支持跨域通信，可以在不同域名或端口之间进行通信。
减少数据传输：由于WebSocket是基于消息的，而不是基于请求/响应的，因此可以减少不必要的数据传输，从而提高传输效率。

优缺点

优点：

双向通信。客户端和服务端双方都可以主动发起通讯。没有同源限制。客户端可以与任意服务端通信，不存在跨域问题。数据量轻。第一次连接时需要携带请求头，后面数据通信都不需要带请求头，减少了请求头的负荷。传输效率高。因为只需要一次连接，所以数据传输效率高。

缺点：

长连接需要后端处理业务的代码更稳定，推送消息相对复杂；兼容性，WebSocket 只支持 IE10 及其以上版本。服务器长期维护长连接需要一定的成本，各个浏览器支持程度不一；【需要后端代码稳定，受网络限制大，兼容性差，维护成本高，生态圈小】

用法

在JavaScript中使用WebSocket相当直观。以下是一个基本的WebSocket客户端使用示例，它演示了如何连接到WebSocket服务器、发送消息、接收消息以及处理连接关闭。

首先，确保你的WebSocket服务器已经启动并在监听某个端口（比如ws://localhost:8080）。

js 复制代码

// 创建一个新的WebSocket实例，连接到指定的URL  
var socket = new WebSocket('ws://localhost:8080');  
  
// 连接打开事件  
socket.onopen = function(event) {  
    console.log("WebSocket连接已打开");  
    // 发送一个初始消息  
    socket.send('Hello Server!');  
};  
  
// 接收消息事件  
socket.onmessage = function(event) {  
    console.log("收到来自服务器的消息: " + event.data);  
};  
  
// 错误事件  
socket.onerror = function(error) {  
    console.error("WebSocket错误: ", error);  
};  
  
// 连接关闭事件  
socket.onclose = function(event) {  
    if (event.wasClean) {  
        console.log("WebSocket连接已正常关闭");  
    } else {  
        console.log("WebSocket连接发生异常关闭");  
    }  
    // 可以在这里尝试重新连接  
};  
  
// 发送消息的函数  
function sendMessage(message) {  
    if (socket.readyState === WebSocket.OPEN) {  
        socket.send(message);  
    } else {  
        console.log('WebSocket连接未打开，消息未发送: ' + message);  
    }  
}  
  
// 你可以在其他地方调用sendMessage函数来发送消息  
// sendMessage('这是一条新的消息');  
  
// 当你不再需要WebSocket连接时，可以手动关闭它  
// socket.close();

创建了一个新的WebSocket对象，并指定了要连接的WebSocket服务器URL
为WebSocket对象添加了几个事件监听器，以处理连接建立、接收到消息、发生错误和连接关闭等事件:
- onopen：在连接建立时触发，你可以在这个事件处理函数中发送初始消息
- onmessage：在接收到消息(来自服务器)时触发，你可以在这个事件处理函数中处理接收到的消息
- onerror：在发生错误时触发
- onclose：在连接关闭时触发
sendMessage函数是一个简单的封装，用于在WebSocket连接打开时发送消息。如果连接未打开，它会打印一条消息到控制台。
最后，调用 socket.close() 来手动关闭 WebSocket 连接。但通常，当不再需要 WebSocket 连接时，或者当服务器关闭连接时，连接会自动关闭。

注意

WebSocket连接可以使用安全的WebSocket协议(wss://)进行保护，它使用SSL/TLS添加了额外的加密层。这确保了在客户端和服务器之间传输的数据的机密性和完整性。
WebSocket是一种基于TCP的协议，支持长连接。在实际使用中，需要注意及时维护长连接，避免因连接长时间不活跃而被网络设备断开。为了确保长连接的稳定性，可以定时发送心跳包，以保持连接的活跃状态。
大多数现代Web浏览器都支持WebSocket协议，包括Chrome、Firefox、Safari和Edge。然而，需要考虑WebSocket在旧浏览器或支持有限的环境中的兼容性。在这种情况下，可以使用回退机制。