WebSockets:概念概述

2025-06-07

WebSockets:概念概述

注意:本文面向从初学者到中级水平的技术人员。因此,如果您已经了解某个特定主题,请随时查看目录

✔ 简介

实时通信在塑造互联网世界方面取得了长足进步。在后疫情时代,各种沟通方式都发生了变化,从发送电子邮件、等待客户回复,到在 Slack 社区上与客户互动。

即时通讯、视频/音频通话和其他类似技术逐渐帮助我们改善时间管理并缩短了整体响应时间。

这些创新正是因为WebSockets 🔌才成为可能的。

在本文中,我们将介绍 WebSocket 的一些令人惊叹的概念以及如何实现 API 以实现流畅的实时通信。

✔ 目录

✔ 什么是 WebSocket?

WebSocket 是一种传输层协议,用于在客户端和服务器之间提供持久连接。WebSocket 通过 TCP/IP 套接字连接运行,并提供全双工和双向通信功能。

例如,假设我们要创建一个有线连接,让两个人进行通信(例如,A 想和 B 通话)。现在,要开始对话,一端(A)必须有一个拨入号码(充当握手)来连接到另一端(B)。

沟通

这里,一旦(假设)A成功拨号到B,那么 A 和 B 之间就会建立一个持久连接,就像一个隧道,信息可以从两端流动。

消息传递应用程序的工作方式与我们上面讨论的有线连接相同,即建立连接并以极快的速度交换消息序列。

但是等等...⏳

这些消息不能使用 REST API 发送吗?为什么开发者更喜欢切换到 WebSocket?REST API 有什么问题吗?

好吧,别担心!让我们深入挖掘一下,为什么在有 REST API 的情况下还要引入 WebSocket?

返回顶部

✔ 为什么选择 WebSocket?

该 API 是一种基于 HTTP 的技术,允许两个应用程序相互通信。这种基于 HTTP 的技术严格遵循单向协议。服务器确保发送的每个响应数据都必须由客户端请求。

现在,让我们回到我们的消息传递应用程序,其中两个人使用 API 进行聊天。由于 HTTP API 是单向的,客户端和服务器必须分别执行操作,并持续不断地建立连接以获取响应数据(将消息从 A 转发到 B,反之亦然)。这些连接处理起来非常繁琐。

为了避免这种混乱的连接,出现了长轮询的概念。长轮询可以解决上述场景:客户端可以发送一个带有较长超时时间的 HTTP 请求,而服务器可以持续将数据推送回客户端。

由于这只是一种变通方法,因此也可能会存在一些缺点。例如,当客户端和服务器之间有连续的数据传输时,长轮询工作正常,但当没有可用的数据返回给客户端时,问题就出现了。服务器会在整个轮询过程中不必要地占用资源(超时)。

为了克服基于 HTTP 的技术的上述限制,*WebSockets 诞生了*。

在 HTTP 轮询过程中,资源无需与服务器绑定。而 WebSocket 则允许在网络上自由通信。这种通信方式与UDP非常相似,但具有TCP的安全性

返回顶部

✔ WebSocket 的生命周期

WebSocket 遵循RFC 6455 协议,该协议要求进行打开握手,然后进行基于 TCP 的基本消息框架。

webSocket 循环
图片来源:raywenderlich

WebSocket 的生命周期始于发起一个标准的 HTTP 请求和响应,如上图所示。在此请求中,客户端请求服务器建立 Web 连接。如果服务器同意,则初始握手成功建立。

此次握手表明客户端和服务器已同意共享 TCP/IP 套接字,以 WebSocket 连接进行通信。现在,信息可以使用基本消息帧协议 (BFP) 进行传输。要关闭套接字,两端都应确认关闭 TCP 连接。

我希望到现在为止您可能已经理解了为什么使用 WebSockets 而不是 REST API。

返回顶部

✔ WebSockets 协议概述

WebSocket URI 与 HTTP URI 相同,唯一的区别在于方案。WebSocket 不使用 HTTP/HTTPS 方案;而是使用 ws/wss(Web 套接字安全)与主机/端点连接。例如

HTTP URI



http://domain-name[:port]/resource-path/resource-id
{secured} https://domain-name[:port]/resource-path/resource-id


Enter fullscreen mode Exit fullscreen mode

WebSocket URI



ws://domain-name[:port]/resource-path/resource-id
{secured} wss://domain-name[:port]/resource-path/resource-id


Enter fullscreen mode Exit fullscreen mode

要建立安全的 WebSocket 连接,需要升级 HTTP 请求/响应调用。因此,客户端/服务器都需要支持 WebSocket 连接并传递一些请求标头。



GET ws://localhost2.com:3000/ HTTP/1.1
Host: localhost:8000
Connection: Upgrade
Pragma: no-cache
Upgrade: websocket
Sec-WebSocket-Version: 13
Sec-WebSocket-Key: q3xPeO32u5496gldTuKaSAh==


Enter fullscreen mode Exit fullscreen mode

让我们了解建立 WebSocket 连接所需的每个标头。

  • GET ws://localhost2.com:3000/ HTTP/1.1:这是一个实际的 GET 调用,它使用 HTTP 协议的第一个版本{ws}以不安全的端点连接 WebSocket 。localhost2.com:3000
  • Host: localhost:8000:这是发起请求的主机。目前,它是一台本地机器localhost:8000
  • Connection: Upgrade:Connection 标头管理 HTTP 调用后网络连接的打开和关闭。通常设置为 ,keep-alive这有助于在 HTTP 调用期间保持连接持久化。使用Upgrade可确保连接保持活动状态,并通知仅对非 HTTP 请求开放通信。
  • Pragma: no-cache:它是浏览器告诉服务器和任何中间缓存它想要资源的新版本的一种方式,而不是服务器告诉浏览器不要缓存资源
  • Upgrade: websocket:客户端使用此标头请求服务器遵循某种连接协议。在本例中,客户端请求的是 WebSocket 连接。
  • Sec-WebSocket-Version: 13:WebSocket 协议仅接受版本 13 的使用,任何其他版本在此处均视为无效。
  • Sec-WebSocket-Key: q3xPeO32u5496gldTuKaSAh==:这是一次性随机生成的唯一密钥,它是 16 字节并采用 base64 编码。

客户端安全地建立 WebSocket 连接后,将等待服务器的响应HTTP 101 Switching Protocols。服务器的响应标头如下所示。



HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: aGVsbG8gZXZlcnlvbmUg=


Enter fullscreen mode Exit fullscreen mode

HTTP 101 切换协议响应表示服务器正在切换到客户端在其升级请求标头中请求的协议。此外,服务器必须包含用于验证连接是否已成功升级的 HTTP 标头。

返回顶部

✔ WebSocket API

WebSocket API 允许创建双向、全双工持久连接,帮助两个应用程序流畅地相互交互。

这可以被视为一个隧道,可以在其中不断发送和接收数据,而无需等待彼此的响应。

✔ WebSockets 的优势

  • 双向:在 HTTP 中,客户端每次请求后都需要等待服务器的响应,而 WebSocket 则允许客户端/服务器异步发送和接收实时更新。例如,股票仪表板会持续推送数据并绘制图表。

  • 低延迟:WebSocket 不会为每个请求创建新连接,因此网络延迟会自动降低。在包含标准 HTTP 标头信息的初始握手之后,所有后续消息都仅包含相关信息。这种延迟的降低实现了闪电般的快速通信

  • 可扩展:WebSocket API 支持超过
    40 种子协议,例如 WAMP、XMPP、AMQP 和 MQTT,以及支持
    多路复用和数据压缩等强大功能的扩展。

  • 安全:WebSocket 安全 (WSS) 协议使用标准 SSL 和 TLS 加密在客户端和服务器之间建立安全连接
    。不安全的 WebSocket 使用 TLS 端口号 80,而 WSS 使用端口 443。

返回顶部

✔ 结论

在本文中,我们首先介绍 WebSockets,然后了解在构建实时应用程序时如何在后台使用 WebSockets,以使我们的生活更快、更简单。

接下来,我们了解了 WebSocket 协议的一些技术概念。此外,我们还通过一些实际示例比较了 WebSocket 与基于 HTTP 的技术有何不同。

在本文结束时,您应该清楚地了解 WebSockets 以及如何在未来的应用程序中使用它。

请在下面的评论中留下您的反馈和疑问!😃

✔ 参考

文章来源:https://dev.to/sahuvikramp/websockets-a-conceptual-overview-41m
PREV
建立一个出色的 GitHub 开发人员组合。
NEXT
学习 ES6/JavaScript - 第一部分