JS 如何将HTTP协议升级为WebSocket协议

协议升级过程：

1. 开发者在JavaScript中使用WebSocket对象 触发升级

   • 如const socket = new WebSocket('wss://example.com/socket');
     • 浏览器会自动发送一个 HTTP 请求来启动协议升级流程。
       • 这个请求包含特定的请求头，用于表明客户端希望将协议从 HTTP 升级到 WebSockets。具体的请求头包括：
         • Upgrade: websocket
         • Connection: Upgrade
         • Sec - WebSocket - Key用于安全验证
         • Sec - WebSocket - Version来指定所使用的 WebSockets 协议版本。

2. 服务器收到升级请求后，如果支持 WebSockets 协议并且验证通过，

   • 会返回一个包含101 Switching Protocols状态码的响应，
   • 同时在响应头中也会包含Upgrade: websocket和Connection: Upgrade等信息。

3. 浏览器收到这个响应后，会自动完成协议的转换，之后就可以通过 WebSockets 连接进行全双工通信了。

   • 例如，浏览器会自动设置好对应的事件处理函数：（如onopen、onmessage、onerror和onclose）来处理 WebSockets 连接生命周期中的各种事件。

开发者需要后续手动干预的地方：

虽然浏览器自动处理了大部分的升级过程，但开发者需要确保正确地处理连接后的各种情况，如在onopen事件中发送初始消息，在onmessage事件中正确地处理接收到的消息，在onerror和onclose事件中进行错误恢复或资源清理等。

在某些特殊情况下，开发者可能需要手动干预升级过程或对其进行更精细的控制。

• 例如，在处理跨域的 WebSockets 连接时，可能需要在服务器端正确地配置 CORS（跨域资源共享）相关的头信息，以确保浏览器能够顺利地完成协议升级。
• 或者在使用代理服务器的情况下，需要确保代理服务器正确地转发和处理 WebSockets 升级请求和响应。
• 比如网络不佳的情况下的 断开重连、心跳检测；