WebSocket: 实时通信的魔法快递，让你的网络生活飞跃升级！

梦幻星辰吧
1,612 阅读9分钟

简介

WebSocket这个技术啊，简直就像是个超级“快递小哥”！你想想看，传统的网络通信方式就像是普通邮寄，每次都得先寄出去一封信，然后等对方回信，这样来回折腾，多费劲啊！而WebSocket呢，它就像是开通了一个快递专线，双方可以实时地、持续地“收发快递”，而且速度飞快，效率超高！

WebSocket的优势和劣势

优势：

  1. 实时性超强：WebSocket就像是个闪电侠，信息传递速度飞快！它能让你的应用和服务器实时交换数据，就像你和朋友面对面聊天一样，信息一来一回，超级流畅！
  2. 双向通信超方便：传统的通信方式，都是客户端问一句，服务器答一句。但WebSocket不一样，它能让服务器主动找客户端聊天！这样，你就能及时收到服务器的通知和提醒，超级方便！
  3. 减轻网络负担：WebSocket就像一个聪明的快递员，它能一次性传送很多信息，不用每次都跑一趟。这样，就能减少网络上的“堵车”，让你的应用运行得更流畅！

劣势：

  1. 需要新装备：WebSocket是个新技术，就像新出的智能手机一样，不是所有的老设备都能用。所以，如果你的浏览器或服务器太旧了，可能就用不了WebSocket哦！
  2. 额外开销要注意：WebSocket要维持一个长久的连接，就像家里开着一盏灯，虽然方便但也要费点电。所以，使用WebSocket时要注意资源的合理使用，避免造成不必要的浪费。
  3. 安全问题不能忽视：因为WebSocket能让服务器主动发送信息，所以有时候可能会有“坏人”趁机捣乱。因此，在使用WebSocket时，我们要加强安全防护，确保信息的安全传输。

总的来说，WebSocket就像是个超级英雄，能带给我们实时、高效的通信体验。虽然它有些小缺点，但只要我们合理使用、加强防护，就能充分发挥它的优势，让我们的生活更加便捷、有趣！

WebSocket的应用

那么，WebSocket都有哪些应用场景呢？让我来给你举几个例子吧！

  1. 在线聊天室：想象一下，你参加了一个热闹的在线聊天室，大家七嘴八舌地聊着天。如果没有WebSocket，那你每发一句话都得刷新一下页面，看看别人有没有回复你。但是有了WebSocket，你就可以实时看到别人的回复，就像是在面对面聊天一样！
  2. 实时股票行情：如果你是个股票迷，那你一定知道实时行情的重要性。通过WebSocket，你可以实时获取到最新的股票价格、涨跌幅等信息，不用每次都手动刷新页面。这样，你就能更快地做出决策，抓住投资机会啦！
  3. 在线游戏：在游戏世界里，实时性可是至关重要的。比如，你在玩一个多人在线游戏，需要实时知道其他玩家的位置和动作。如果没有WebSocket，那你可能会遇到延迟和卡顿的问题。但是有了WebSocket，你就可以和其他玩家实时交互，享受流畅的游戏体验啦！
  4. 实时地图应用：想象一下，你正在使用一款实时地图应用，通过WebSocket，服务器可以实时推送车辆的最新位置信息到你的设备上。这样，你就能实时看到出租车、共享单车等交通工具的准确位置，再也不用担心等车难的问题了！
  5. 在线协作编辑：多人协作编辑文档或项目时，传统的方式往往存在同步问题。但WebSocket可以轻松解决这一难题。多个用户可以同时编辑同一份文档或项目，而WebSocket能够确保所有用户的编辑操作都能实时同步，让大家能够无缝协作，提高工作效率。
  6. 实时监控系统：在工厂生产、交通监控等领域，实时性至关重要。通过WebSocket，服务器可以实时推送监控数据到客户端，让你能够即时查看并响应各种情况。无论是生产线的异常还是交通拥堵，你都能第一时间掌握并做出决策。
  7. 远程会议和视频会议：WebSocket还可以用于实现高质量的远程会议和视频会议。通过WebSocket的实时通信能力，参会者可以实时看到和听到对方的发言，仿佛身临其境。而且，WebSocket还能保持稳定的连接和低延迟，让会议体验更加流畅。

这些只是WebSocket应用的冰山一角，实际上，只要有需要实时、双向通信的场景，WebSocket都能大显身手。它的出现极大地提升了web应用的交互性和实时性

那么接下来我们来了解下websocket相关协议以及特性和使用方法

WebSocket的协议

WebSocket，这一原本作为HTML5组成部分的协议，如今已发展成为一项独立的通信标准。它实现了Web客户端与服务器之间的全双工通信，这一特性打破了以往只能从客户端向服务器发送请求的单向通信模式。现在，服务端也可以在需要时主动向客户端推送信息，而不再仅仅是被动地接收请求并返回响应。

这种双向通信机制大大提高了Web应用的实时性和交互性。无论是聊天应用、实时股票行情还是多人在线游戏，WebSocket都能提供更为流畅和高效的用户体验。客户端和服务器之间建立持久连接后，数据可以实时传输，无需像传统HTTP模式那样频繁地建立和关闭连接。

WebSocket的出现极大地推动了Web实时通信技术的发展，使得Web应用能够更加接近原生应用的交互体验。它不仅简化了开发过程，还降低了网络负担，为构建高性能、高并发的Web应用提供了有力支持

  1. 连接建立：客户端通过发送一个带有升级头部的HTTP请求来发起WebSocket连接。服务器接收到请求后，检查请求中的头部信息，并发送一个状态码为101 Switching Protocols的HTTP响应来确认连接升级。一旦服务器发送了响应，WebSocket连接就正式建立了。
  2. 数据交换：一旦连接建立，客户端和服务器就可以通过WebSocket连接实时地交换数据。数据可以是文本格式，也可以是二进制格式，包括JSON、XML、HTML、图片等。这些数据以WebSocket数据帧的形式在连接上进行传输。
  3. 连接关闭：当需要关闭WebSocket连接时，任何一方都可以发送一个关闭帧给对方。接收到关闭帧的一方会响应这个关闭请求，并关闭连接。关闭连接后，WebSocket连接将不再可用，双方需要重新建立连接才能进行通信。

为了更好地认识和理解websocket的通信，我们可以拿它与我们较为熟悉的ajax做一个简明的对比

image.png

从图中可以看出，随着网站功能的复杂，对资源实时性的要求也越来越高，但是 HTTP 本身无法做到实时显示服务器端更新的内容，要获取服务器端的最新内容，就得频繁从客户端发起新的请求（比如刷新页面），如果服务器上没有更新，就会造成通信的浪费，而且从用户体验来说也不够友好。所以就有了websocket。

为了实现 WebSocket 的通信，在 HTTP 连接建立之后，还需要完成一次「握手」的步骤：

1）请求阶段

WebSocket 复用了 HTTP 的握手通道，要建立 WebSocket 通信，需要在连接发起方的 HTTP 请求报文中通过 Upgrade 字段告知服务器通信协议升级到 Websocket，然后通过 Sec-WebSocket-* 扩展字段提供 WebSocket 的协议、版本、键值等信息

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13

2）响应阶段

对于上述握手请求，服务器会返回 101 Switching Protocols 响应表示协议升级成功：

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
Sec-WebSocket-Protocol: chat

响应头中 Sec-WebSocket-Accept 字段的值是根据请求头中 Sec-WebSocket-Key 的字段值生成的，两者结合起来用于防止恶意连接和意外连接

成功握手确立 WebSocket 连接后，后续通信就会使用 WebSocket 数据帧而不是 HTTP 数据帧。下面是 WebSocket 通信的时序图：

sequenceDiagram
participant C as Client  
participant S as Server  
  
C->>S: HTTP Request for WebSocket Upgrade  
S-->>C: HTTP Response with 101 Switching Protocols  
S-->>C: WebSocket Handshake Completed  
C-->>S: WebSocket Data (Text/Binary)  
S-->>C: WebSocket Data (Text/Binary)  
C-->>S: WebSocket Connection Close Request  
S-->>C: WebSocket Connection Closed

这段代码描述了一个简化的WebSocket协议时序图，包括：

  • 客户端（C）向服务器（S）发送HTTP请求以升级连接至WebSocket。
  • 服务器响应这个请求，确认升级并返回101 Switching Protocols状态码。
  • 服务器通知客户端WebSocket握手完成。
  • 客户端和服务器之间开始通过WebSocket发送和接收数据。
  • 最终，客户端发送一个关闭WebSocket连接的请求，服务器响应并关闭连接。

借一张下面的图： 先声明，该图片来源于网络，只为更好地叙述和学习

image.png

注意：WebSocket 协议对应的 scheme 是 ws，如果是加密的 WebSocket 对应的 scheme 是 wss，域名、端口、路径、参数和 HTTP 协议的 URL 一样

经过上面的叙述，我们应该对websocket并不陌生了吧，后续写有demo

仅仅只会Ajax,那就out了！WebSocket实战解锁实时通信新境界！

avatar
文章
阅读
粉丝