WebSocket握手过程详解：HTTP升级为WebSocket

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript中WebSocket协议的握手过程是通过HTTP协议升级实现的，具体步骤如下：客户端发起请求：客户端通过HTTP协议发送一个带有特定头信息的请求，例如：GET /chat HTTP/1.1 Host: example.com Upgrade: websocket Connection: Upgrade Sec-WebSocket-Key: dGhlIHNlY3VyZSByb290IGJhc2U= Sec-WebSocket-Version: 13服务器响应：服务器接收到请求后，如果支持WebSocket协议，会返回一个包含相应头信息的响应，例如：HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade Sec-WebSocket-Accept: s3pPLMBiTxaQ9kLbjuVfDcWsNtA=协议升级：一旦握手成功，HTTP连接就会被升级为WebSocket协议，从而实现全双工通信。通过这种方式，WebSocket能够在客户端和服务器之间建立持久化的双向通信通道，而无需频繁地进行HTTP请求和响应。》，聊聊，我们一起来看看吧！

WebSocket通过HTTP协议升级实现持久化全双工通信，握手时客户端发送Sec-WebSocket-Key，服务器结合固定GUID计算SHA-1生成Sec-WebSocket-Accept以验证协议兼容性，防止代理误处理；相比轮询，WebSocket具备低延迟、低开销、实时双向通信优势；JavaScript中通过new WebSocket()建立连接，监听onopen、onmessage、onerror、onclose事件并调用send()发送数据，需在生产环境使用wss://保障传输安全。

WebSocket握手过程，其实是一种巧妙的协议升级机制。它起初看起来像一个普通的HTTP/1.1请求，但其核心目的却是将这个临时的HTTP连接“升级”为一个持久的、双向的WebSocket连接。一旦升级成功，客户端和服务器就能在这个专用的通道上自由、实时地进行全双工通信，不再受HTTP请求-响应模式的限制。

解决方案

Okay, so你可能好奇，这“升级”到底是怎么回事？其实，它利用了HTTP/1.1协议的一个特性。当你的浏览器里的JavaScript代码，比如new WebSocket('ws://...')一执行，它会向服务器发送一个特殊的HTTP GET请求。这个请求看起来很像普通的HTTP请求，但它带了一些关键的头部信息，这些才是“升级”的信号。

比如，Upgrade: websocket和Connection: Upgrade这两个头，直接告诉服务器：“嘿，我不想只做一次性的HTTP请求，我想换个协议，变成WebSocket。” 接着，还有Sec-WebSocket-Key，这是一个随机生成的Base64编码字符串，它不是用来加密的，而是一个防止缓存代理误读的机制，也是服务器用来证明自己理解WebSocket协议的关键。服务器会把这个Key和一个固定的GUID（"258EAFA5-E914-47DA-95CA-C5AB0DC85B11"）拼接，然后计算SHA-1哈希，再Base64编码，生成一个Sec-WebSocket-Accept头，作为响应发回来。如果服务器发回101 Switching Protocols状态码，并且响应头里也有Upgrade: websocket和Connection: Upgrade，那就意味着握手成功了。

一旦握手成功，HTTP协议的职责就到此为止了。这个底层的TCP连接就从HTTP模式切换到了WebSocket模式。从这一刻起，数据传输不再是请求-响应的模式，而是真正的全双工。客户端和服务器可以随时互相发送数据帧，就像打电话一样，你说话我听，我说话你听，甚至可以同时说，当然，实际应用中通常会避免同时说，但协议层面是允许的。这种持久性、双向的通信方式，对于实时应用，像聊天室、股票行情、在线游戏这些，简直是量身定制。它大大减少了HTTP轮询带来的延迟和开销。

WebSocket握手过程中，Sec-WebSocket-Key和Sec-WebSocket-Accept是如何保障通信安全的？

说实话，初看这两个键，很多人可能觉得它们是不是某种加密机制？但实际上，它们主要的作用并非加密，而是为了防止一些中间代理服务器或防火墙错误地解析WebSocket连接，把它当成普通的HTTP连接并进行缓存或修改。

当客户端发送Sec-WebSocket-Key时，它提供了一个随机的、一次性的挑战。服务器接收到这个挑战后，会用一个标准算法（前面提到的拼接固定GUID、SHA-1哈希、Base64编码）来生成Sec-WebSocket-Accept作为响应。这个过程就像一个秘密握手暗号：客户端说出上半句，服务器能准确地对出下半句，就证明了双方都理解并支持WebSocket协议。如果一个不理解WebSocket的代理服务器在中间，它就无法正确生成Sec-WebSocket-Accept，从而导致握手失败，连接也就不会被“升级”。这避免了中间件对WebSocket流量的误处理，间接提升了连接的健壮性，而不是直接提供数据加密（数据加密通常由TLS/SSL，即wss://协议来完成）。所以，你可以把它看作是一种协议级别的完整性验证，确保连接两端都是“真”的WebSocket参与者。

相较于传统的HTTP轮询或长轮询，WebSocket在实时通信中带来了哪些显著优势？

这个问题，其实是WebSocket设计初衷的核心。传统的HTTP，无论是短轮询还是长轮询，都有其固有的局限性。短轮询是客户端每隔一段时间就问一次服务器“有新消息吗？”这就像你不停地刷新收件箱，效率低下，服务器资源消耗大，而且消息实时性差。长轮询稍微好点，客户端发一个请求，服务器有消息就立即返回，没消息就挂起请求，直到有消息或超时才返回。这虽然改善了实时性，但每次消息传输仍然需要完整的HTTP请求-响应周期，包括头部信息，这本身就是不小的开销，而且服务器需要维护大量挂起的连接，资源占用也不小。

WebSocket则完全不同。一旦握手成功，它就建立了一个持久的、开放的TCP连接。这意味着：

1. 真正的实时性： 服务器可以随时向客户端推送消息，无需客户端请求。消息几乎是即时到达，非常适合聊天、游戏、实时数据更新等场景。
2. 极低的延迟： 握手完成后，数据帧的头部开销非常小，远低于HTTP请求的完整头部。数据传输效率高，延迟自然就低。
3. 减少网络开销： 只需要一次握手，之后的数据传输都在同一个连接上进行，避免了HTTP每次请求都要建立/关闭连接的开销，也减少了重复的HTTP头部信息。
4. 双向通信： 客户端和服务器可以同时发送和接收数据，这在HTTP中是做不到的。这种全双工特性为更复杂的交互模式提供了可能。

所以，对于那些对实时性、效率和低延迟有高要求的应用，WebSocket几乎是唯一的选择。它不仅仅是“更快”的HTTP，而是一种全新的、更适合实时网络应用范式。

在JavaScript中，如何实际操作WebSocket API进行连接建立、消息发送与接收，并处理可能出现的错误？

在JavaScript里使用WebSocket，坦白讲，API设计得非常直观，一点也不复杂。

首先，建立连接：

const socket = new WebSocket('ws://localhost:8080'); // 或者 'wss://yourdomain.com'

这里，ws://是非加密的WebSocket，wss://是加密的（基于TLS/SSL），推荐在生产环境使用wss://。

接着，监听事件是关键：

• onopen: 连接成功建立时触发。你可以在这里发送一些初始消息。

  socket.onopen = (event) => {
      console.log('WebSocket 连接已打开！');
      socket.send('Hello Server!'); // 连接成功后发个问候
  };

• onmessage: 收到服务器消息时触发。消息内容在event.data里。

  socket.onmessage = (event) => {
      console.log('收到服务器消息:', event.data);
      // 通常你需要解析 event.data，比如 JSON.parse(event.data)
  };

• onerror: 连接发生错误时触发。这可能是网络问题、服务器端错误等。

  socket.onerror = (error) => {
      console.error('WebSocket 发生错误:', error);
      // 这里可以尝试重连，或者给用户一个提示
  };

• onclose: 连接关闭时触发。无论是正常关闭还是异常断开。

  socket.onclose = (event) => {
      console.log('WebSocket 连接已关闭。');
      if (event.wasClean) {
          console.log(`关闭代码: ${event.code}, 原因: ${event.reason}`);
      } else {
          // 比如服务器崩溃或网络断开
          console.error('连接意外断开！');
          // 考虑自动重连逻辑
      }
  };

发送消息也很简单，就用socket.send()方法：

socket.send('这是我要发给服务器的数据');
socket.send(JSON.stringify({ type: 'chat', message: '嗨，你好啊！' })); // 通常会发送JSON

需要注意的是，send()方法只能在连接处于OPEN状态时调用。在onopen事件里发送是安全的。

处理错误和重连是实际应用中非常重要的一环。比如，当onclose事件触发且event.wasClean为false时，或者onerror触发时，你可能需要实现一个指数退避（exponential backoff）的重连机制，避免在短时间内频繁重试导致服务器压力过大。这部分虽然API没有直接提供，但自己实现起来并不复杂，是构建健壮WebSocket应用不可或缺的。

文中关于JavaScript,实时通信,websocket,全双工通信,HTTP升级的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《WebSocket握手过程详解：HTTP升级为WebSocket》文章吧，也可关注golang学习网公众号了解相关技术文章。