WebSocket技术原理

最新推荐文章于 2025-06-09 10:07:42 发布
原创 最新推荐文章于 2025-06-09 10:07:42 发布 · 1.3k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#websocket简介

本文深入解析WebSocket技术，探讨其作为全双工通讯协议如何简化客户端与服务器间的数据交换，允许服务端主动向客户端推送数据，减少网络带宽消耗和服务器资源占用。介绍WebSocket的握手过程和数据传输机制，以及WebSocketAPI的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

一、引言

        互联网发展的早期，网站上只是一些静态展示页面。用户请求(Request)网站页面，网站回复(Response)页面内容给用户浏览器。因为需求简单，所以也没有很复杂的协议过程。这种形式的Request/Response交互流程如下图所示：

        随着互联网技术的发展，带宽逐步提高，用户数也越来越庞大。对互联网的呈现内容提出了要求，随之出现了动态页面技术，对同一个页面，页面的某些部分对不同的访问用户，呈现的内容不同。相关的实现技术有CGI、ASP、PHP、JSP等。由于访问量的增加，WEB服务器同时处理的用户数也达到了万(10K)以上级别，这就是C10K问题：” The C10K problem“[1]。为了缓解服务器压力，每次Request/Response后连接(TCP连接)继续保持，以及对同一个TCP连接，多次复用Request/Response的方法(也称为Pipeline)也提了出来。这就是HTTP/1.1协议中长连接的主要内容。

       伴随移动互联网的发展，大量移动终端和其上的APP应用接入网络，HTML5技术也提了出来，以便支持WEB上的音视频播放、实时游戏、实时聊天等。催生了这样一个需求，当服务器有更新时，需要立即将数据发送给客户端，这就是基于服务器端的推送技术。

       WEBSOCKET之前的解决方法大概这么几种： 1)轮询：客户端设置一个时间间隔，时间到以后，向服务器发送request询问有无新数据，服务器立即返回response，如果有更新则携带更新的数据。2)长连接(long poll): 和轮询相似，但是为阻塞模式的轮询，客户端请求新的数据request, 服务器会阻塞请求，直到有新数据后才返回response给客户端；然后客户端再重复此过程。这两种方式的特点，不断的建立HTTP连接，然后发送请求request，之后服务器等待处理。服务端体现的是一种被动性，同时这种处理方式，非常耗费网络带宽和服务器资源。

        服务器向客户端推送更新时，因为被动性，对低延迟的应用体验不好；因为request/response的交互方式，对网络带宽和服务器带来了额外的负担（例如多次请求的HTTP头部， TCP连接复用会导致的Head-of-Line Blocking线头阻塞[2]等）。如果在单一的TCP连接中，使用双向通信（全双工通信）就能很好的解决此问题。这就是WebSocket技术的缘由。

二、WebSocket是什么

        WebSocket一种在单个 TCP 连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，并被RFC7936所补充规范，WebSocketAPI被W3C定为标准。 WebSocket 是独立的、创建在 TCP 上的协议，和 HTTP 的唯一关联是使用 HTTP 协议的101状态码进行协议切换，使用的 TCP 端口是80，可以用于绕过大多数防火墙的限制。 
        WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端直接向客户端推送数据而不需要客户端进行请求，在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并允许数据进行双向传送。 
       目前常见的浏览器如 Chrome、IE、Firefox、Safari、Opera 等都支持 WebSocket，同时需要服务端程序支持 WebSocket。在Websocket协议中，客户端和服务端只需要做一个握手的动作，就能形成一条通道，两者之间可以进行数据互相传送。所以WebSocket协议分为两部分：

  1. 握手
  2. 数据传输

握手

客户端发送一个请求

服务端回应

”Upgrade:WebSocket”表示这是一个特殊的 HTTP 请求，请求的目的就是要将客户端和服务器端的通讯协议从 HTTP 协议升级到 WebSocket 协议。在请求中的“Sec-WebSocket-Key”是随机的，服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。以表明服务器端获取了客户端的请求，同意创建 WebSocket 连接。一旦连接建立，客户端和服务器端就可以通过这个通道双向传输数据了。

数据传输

WebSocket的数据在发送时，被组织为依次序的一串数据帧(data frame)，然后进行传送。传送的帧类型分为两类：数据帧(data frame)和控制帧(Control frame)。数据帧可以携带文本数据或者二进制数据；控制帧包含关闭帧(Close frame)和Ping/Pong帧。帧的格式如下所示：

三、WebSocket API

WebSocket API，也称为WebSocket接口，定义了Web应用和服务器进行双向通信的公共接口，如下图：

接口的内容可以分为三类：状态变量、网络功能和消息处理等。

  1. 构造函数WebSocket(url, protocols)：构造WebSocket对象，以及建立和服务器连接; protocols可选字段，代表选择的子协议

  2. 状态变量readyState: 代表当前连接的状态，短整型数据，取值为CONNECTING(值为0)， OPEN(值为1), CLOSING(值为2), CLOSED(值为3)

  3. 方法变量close(code, reason)： 关闭此WebSocket连接。

  4. 状态变量bufferedAmount: send函数调用后，被缓存并且未发送到网络上的数据长度

  5. 方法变量send(data): 将数据data通过此WebSocket发送到对端

  6. 回调函数onopen/onmessage/onerror/onclose: 当相应的事件发生时会触发此回调函数

参考：

https://blog.youkuaiyun.com/zwto1/article/details/52493119

https://yinqingwang.wordpress.com/2016/09/17/websocket%E5%8E%9F%E7%90%86%E5%8F%8A%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/

WebSocket的原理
lh_jax的博客
06-24 503
"Websocket是应用层协议，实现通信先通过一次 HTTP 协议握手 ，握手成功后，数据就直接从 TCP 通道传输，Websocket分为握手和数据传输阶段，即进行了HTTP握手 + 双工的TCP连接。" 01 — WebSocket协议 websocket和http一样是一种通信协议，是HTML5的一种新的协议,两者有交集，但是并不是全部。 既然有了http协议了，为什么还会有websocket呢？ HTTP 通过轮询或者长连接的方式可以实现类.
WebSocket原理介绍
wxiaomingtongxue的博客
11-28 1万+
1.WebSocket原理 websocket协议由RFC 6455定义。协议分为两个部分： 握手阶段和数据通信阶段。 websocket为应用层协议，其定义在TCP/IP协议栈之上。WebSocket连接服务器的URI以“ws”或者“wss”开头。ws开头的默认TCP端口为80，wss开头的默认端口为443。 websocket是基于http协议的，或者说借用了http的协议来完成一部分握手。 ...
看完让你彻底搞懂Websocket原理
hsany330的专栏
11-13 1万+
偶然在知乎上看到一篇回帖，瞬间觉得之前看的那么多资料都不及这一篇回帖让我对websocket的认识深刻有木有。所以转到我博客里，分享一下。比较喜欢看这种博客，读起来很轻松，不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~ 一、websocket与http WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系，但HTTP是不支持持久
什么是 Socket？一篇彻底通俗易懂的详解
最新发布
qq_35803412的博客
06-09 1194
本文以通俗易懂的方式，系统介绍了计算机网络编程中至关重要的“socket”概念。文章首先通过生活中的信箱比喻，帮助读者直观理解 socket 的作用和意义；随后深入剖析了 socket 的技术本质及其与操作系统、文件描述符之间的关系。文中详细阐述了 socket 在网络通信中的角色、基本使用流程（包括服务端和客户端的标准编程步骤）、常见类型（如 TCP 和 UDP socket）、底层实现原理，以及 socket 在实际开发中的典型应用场景。通过形象的比喻、精简的代码示例和常见问题解答，帮助初学者从零基础快
websocket
Kim_Weir的专栏
12-29 360
什么是Websocket WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信，即允许服务器主动发送信息给客户端。因此，在 WebSocket中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输，客户端和服务器之间的数据交换变得更加简单。 Websocket的优势 小Header：互相沟通的H...
websocket原理
千里马的专栏
12-08 554
Websocket是一种在单个TCP连接上进行全双工通讯的协议，双工（duplex）是指两台通讯设备之间，允许有双向的资料传输。在Websocket协议中，客户端和服务端只需要做一个握手的动作，就能形成一条通道，两者之间可以进行数据互相传送。 WebSocket和传统的HTTP交互方式的区别如下图：WebSocket的结论如下： 基于TCP/IP协议实现 是一种全双向的通信, 具有底层socke
Websocket技术原理与应用实践
Websocket技术概述 ## 1.1 传统HTTP通信的局限性 在传统的HTTP通信中，客户端与服务器之间的通信是基于"请求-响应"模式进行的。这种方式的局限性在于每次通信都需要客户端发起请求，服务器响应后才能进行数据交互...
websocket技术
01-09
三、WebSocket工作原理： 1. 握手过程：WebSocket的连接建立是基于HTTP协议进行的，客户端在HTTP请求中加入特定的头部信息（Upgrade和Sec-WebSocket-Key），向服务器请求升级协议。服务器确认支持WebSocket后，返回...
深入理解WebSocket协议原理、实现与应用
hello.reader
10-20 2653
WebSocket是一种基于TCP的通信协议，它为客户端和服务器之间提供了全双工通信能力。与传统的HTTP协议不同，WebSocket允许在一个单一的TCP连接上进行双向通信，避免了每次通信都需要重新建立连接的开销。这种协议的设计初衷是为了优化实时性要求高的应用场景，例如在线聊天、实时数据更新、游戏互动等。WebSocket由IETF在RFC 6455中定义，并由W3C标准化，广泛应用于现代的Web开发中。
go的websocket实现原理与用法详解
09-21
### Go的WebSocket实现原理与用法详解 #### 一、WebSocket概述 WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许客户端与服务器之间建立持久连接，...希望本文能帮助读者更好地理解和使用WebSocket技术。
Java实战:websocket原理及其应用
qq_20525137的博客
11-12 819
websocket原理及其应用
webSocket相关技术
03-11
webSocket相关的技术的源代码，包括轮询（polling）、流（streaming）和长轮询（long polling） 实现的comet
Websocket——Websocket原理
weixin_34252090的博客
08-11 161
偶然在知乎上看到一篇回帖，瞬间认为之前看的那么多资料都不及这一篇回帖让我对 websocket 的认识深刻有木有。所以转到我博客里，分享一下。比較喜欢看这样的博客，读起来非常轻松。不枯燥，没有布道师的阵仗，纯粹为分享。废话这么多了，最后再赞一个~ 一、websocket与http WebSocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，或者说没关系...
Websocket原理
搏·梦的博客
03-29 4213
文章目录1.websocket简单介绍2. websocket的自带演示例子 1.websocket简单介绍 WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持...
WebSocket原理
John_ToStr的博客
02-20 269
WebSocket原理
WebSocket
热门推荐
qq_54773998的博客
03-31 18万+
目录 一，什么是websocket 二，websocket的原理 三，websocket与http的关系 四，websocket解决的问题 1.http存在的问题 2.long poll(长轮询) 3.Ajax轮询 4.websocket的改进 一，什么是websocket WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议） 它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的 Websocket是一个
WebSocket技术介绍
04-28
<think>好的，我现在需要回答用户关于WebSocket技术的基本概念和使用场景的问题。用户已经提供了一些引用内容，我需要结合这些引用以及之前的对话内容来构建回答。 首先，回顾用户的问题，他们想了解WebSocket的基本原理和应用场景。之前用户提到了JWT的相关内容，但当前问题转向了WebSocket，因此我需要专注于WebSocket部分，但可以适当参考之前的回答结构，比如分点说明、代码示例等。 根据用户提供的引用，引用[4]提到WebSocket是HTML5的全双工通信技术，基于TCP，复用HTTP握手通道。引用[1]和[2]讨论了WebSocket的原理和Java中的实现方式，比如ServerEndpointExporter和registerWebSocketHandlers的区别。引用[3]提到了WebSocket对象的方法如open(), send(), close()。 用户希望了解技术原理和应用场景，所以需要分两部分。首先解释WebSocket的工作原理，包括握手过程、数据传输机制，然后列出常见的应用场景，比如实时聊天、在线游戏等。同时，可能需要比较WebSocket与传统HTTP轮询或长轮询的优劣，如引用[1]中提到的HTTP的局限性和长轮询的问题。 需要注意的是，用户提供的引用可能存在错误或不一致，例如引用[3]中的open()方法实际上在WebSocket API中是创建实例后自动连接的，可能需要更正。另外，引用[2]中的两种Spring配置方式需要准确描述其区别，但用户的问题更关注原理和应用，所以可能不需要深入代码实现，但可以简要提及。 需要确保回答结构清晰，使用中文，行内公式正确（如果有的话），并添加相关的问题部分。同时，根据用户之前的回答示例，可能需要包含代码示例，比如一个简单的WebSocket连接的前端JavaScript代码，以及后端的简要说明。 最后，验证信息准确性，比如WebSocket握手过程的具体细节，状态码101，数据帧的结构等，确保引用正确，并根据需要添加引用标记。</think>### WebSocket技术原理及应用场景介绍 #### 一、WebSocket 基本概念 WebSocket 是 HTML5 提供的一种**全双工通信协议**，允许客户端与服务器建立持久化连接，实现双向实时数据传输[^4]。与传统的 HTTP 请求-响应模式不同，WebSocket 连接一旦建立，双方可主动推送数据，避免了频繁轮询的开销。 #### 二、技术原理 1. **连接建立（握手阶段）** WebSocket 通过 HTTP/1.1 协议**复用握手通道**完成初始连接： - 客户端发送 HTTP 请求，包含 `Upgrade: websocket` 和 `Sec-WebSocket-Key` 头部。 - 服务器返回状态码 `101 Switching Protocols`，附带 `Sec-WebSocket-Accept` 验证响应[^4]。 握手完成后，协议切换为 WebSocket，后续通信基于二进制帧传输。 2. **数据传输机制** - **数据帧格式**：包含操作码（如文本/二进制）、掩码、负载长度等字段，支持分片传输。 - **心跳机制**：通过 `Ping/Pong` 帧检测连接活性，防止超时断开。 - 全双工特性：客户端和服务器可独立发送数据，无需等待对方响应。 3. **与传统 HTTP 轮询对比** | 特性 | WebSocket | HTTP 轮询/长轮询 | |--------------------|-------------------|--------------------------| | 连接方式 | 持久化单连接 | 多次短连接 | | 延迟 | 低（实时推送） | 高（依赖轮询间隔） | | 服务器资源消耗 | 低 | 高（频繁建立连接） | | 适用场景 | 实时交互 | 低频数据更新 | #### 三、核心代码实现示例 ##### 前端（JavaScript）建立连接 ```javascript // 创建WebSocket连接 const socket = new WebSocket('wss://example.com/ws'); // 监听连接打开事件 socket.onopen = () => { socket.send('Hello Server!'); // 发送数据 }; // 接收服务器消息 socket.onmessage = (event) => { console.log('收到消息:', event.data); }; // 处理连接关闭 socket.onclose = () => { console.log('连接已关闭'); }; ``` ##### 后端（Spring Boot 配置） ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(new MyWebSocketHandler(), "/ws") .setAllowedOrigins("*"); // 允许跨域 } } // 自定义处理器 public class MyWebSocketHandler extends TextWebSocketHandler { @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) { String payload = message.getPayload(); session.sendMessage(new TextMessage("服务器回复: " + payload)); } } ``` #### 四、主要应用场景 1. **实时通信系统** - 在线聊天室、客服系统（如 Slack、Discord）[^4] - 协同编辑工具（如 Google Docs） 2. **金融与物联网领域** - 股票行情实时推送（价格变动秒级更新） - 智能设备状态监控（传感器数据流） 3. **游戏与多媒体** - 多人在线游戏（同步玩家动作） - 直播弹幕互动（实时评论展示） 4. **通知与预警系统** - 系统异常报警（如服务器宕机通知） - 物流状态更新（如快递位置追踪） #### 五、安全性注意事项 1. **加密传输**：必须使用 `wss://`（WebSocket over TLS）防止中间人攻击。 2. **鉴权机制**：连接建立时验证用户身份（如结合 JWT 令牌）[^1]。 3. **输入过滤**：防止 WebSocket 消息注入攻击（如 XSS）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值