初识WebSocket

最新推荐文章于 2025-04-24 22:41:00 发布
原创 最新推荐文章于 2025-04-24 22:41:00 发布 · 126 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#websocket #http

本文揭示WebSocket协议诞生背景，解释为何取代HTTP的单向通信，强调其双向平等对话特性、TCP基础、兼容性、性能优势及应用场景，如实时通信和服务器推送。
why WebSocket?

  初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

  答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。

  举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。
  这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。
  轮询的效率低，非常浪费资源（因为必须不停连接，或者 HTTP 连接始终打开）。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。

诞生

  WebSocket 协议在2008年诞生，2011年成为国际标准。所有浏览器都已经支持了。
  它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种。

在这里插入图片描述
其他特点包括：

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

	ws://example.com:80/some/path

WebSocket教程

WebSocket
虎康的博客
07-07 2114
阮一峰笔记：https://www.ruanyifeng.com/blog/2017/05/websocket.htmlWebSocket 是一种协议，在2008年诞生，2011年成为国际标准。目前所有浏览器都已经支持了。WebSocket 的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话。下面一张图说明了 HTTP 与 WebSocket 的主要区别： 客户端 服务端 实现websocket的web浏览器将通过websocket对象公开所有必须的客户
WebSocket详解（一）：初识WebSocket前世今生
sc35262的博客
11-29 1093
本篇文章我们先通过webchat、直播弹幕、在线协同文档等产品能力引出socket、分享介绍了scoket的相关知识、以及在浏览器web1.0、web2.0背景下数据交互方式引出Ajax、Form表单提交等技术发展过程，再到最后因为实时性数据获取的需求介绍了早起轮训、longpolling方式存在的问题，最终引出了websocket出现的必要性以及跟scoket相比有哪些优势和特性。
阮一峰：WebSocket 教程
代码过客
12-31 2834
https://zhuanlan.zhihu.com/p/27604269 节选： WebSocket 是一种网络通信协议，很多高级功能都需要它。 本文介绍 WebSocket 协议的使用方法。 一、为什么需要 WebSocket？ 初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？ 答案很简单，因为 HTTP 协议有一个...
http 阮一峰_WebSocket 教程 | 阮一峰
weixin_39602579的博客
12-19 557
WebSocket 是一种网络通信协议，很多高级功能都需要它。本文介绍 WebSocket 协议的使用方法。一、为什么需要 WebSocket？初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服...
websocket阮一峰博客地址教学
weixin_42835782的博客
10-21 543
http://www.ruanyifeng.com/blog/2017/05/websocket.html WebSocket 教程
WebSocket 教程
weixin_33877885的博客
05-15 569
为什么80%的码农都做不了架构师？>>> ...
初识WebSocket(一)--WebSocket介绍与实现简单web群聊
qq_40151840的博客
02-19 371
1.什么是WebSocket? WebSocket 是 HTML5 的一种新协议，不同于http协议，WebSocket实现了客户端与服务器端的全双工通信，即允许服务器端主动推送消息给客户端。 2.为什么需要WebSocket? 因为Http协议做不到。 选取了我认为比较好的解释，摘自廖雪峰的官方网站，如下： 为什么传统的HTTP协议不能做到WebSocket实现的功能？ 这是因为HTTP协议是...
WebSocket 初识篇
腾讯云服务器
11-17 1347
本文将基于腾讯云Lighthouse（轻量应用服务器）实例，对WebSocket进行简单的示例演示，以及初步的协议原理探索。帮助大家直观地感受双向通讯的特点以及常见的基于JavaScript的实现方法。 背景概念 WebSocket是近些年适用广泛且流行的网络传输协议，它使得在Web等HTTP协议的应用场景中，可以非常方便地实现类似TCP的全双工通信。这种建立在一个持久连接之上的基于消息的双向通信机制，相比HTTP的Request-Response的事务请求模式，可以让客户端与服务器端的通讯变得丰富和灵活。
【python】--python+webSocket初识
寻梦友的博客
08-12 752
因项目需要，结识webSocket。本博客参考网上例子，单纯集成webSocket，初步了解Flask-SocketIO如何工作。
websocket
妙蛙真香的博客
09-14 236
运行 npm install nodejs-websocket 命令安装nodewebsocket包。1.1.创建app.js（node搭建websocket服务器）阮一峰的websocket日志。
tokio-tungstenite:钨丝的Tokio绑定，基于轻量级流的WebSocket实现
05-13
东京钨 Tokio堆栈的异步WebSockets。 用法 将此添加到您的Cargo.toml ： [ dependencies ] tokio-tungstenite = " * " 查看客户端和服务器示例的examples/目录。 如果您对没有任何经验，可能还需要熟悉它。 什么是东京钨？ 该板条箱基于 Rust WebSocket库，并为其提供了Tokio绑定和包装，因此您可以将其与来自Tokio堆栈的非阻塞/异步TcpStream一起使用，并将其与其他板条箱耦合。 特征 与在所有使用或平台上，都通过native-tls和rustls-tls功能标志支持TLS。 默认情况下均未启用。 如果您需要对安全WebSockets（ wss:// ）的支持，请启用其中之一。
用 Rust 编写的 WebSocket (RFC6455) 库
06-28
Rust-WebSocket注意：这个项目的维护是缓慢的。您可能想改用钨矿或tokio-tungstenite 。 Rust-WebSocket 是一个用 Rust 编写的 WebSocket (RFC6455 ) 库。Rust-WebSocket 提供了一个处理 WebSocket 连接（客户端和服务器）的框架。该库目前处于实验状态，但提供普通和安全 WebSocket 的功能、支持分段的消息级 API、数据帧级 API 以及扩展和自定义行为的能力。安装要将crates.io 中的库发布版本添加到 Cargo 项目，请将其添加到 Cargo.toml 的“依赖项”部分：websocket =" 0.24.0"要将库的 Git 存储库添加到 Cargo 项目，请将其添加到 Cargo.toml：[dependencies.websocket]git =" https://github.com/websockets-rs/rust-websocket.git"可选择添加extern crate websocket;到您的项目。请注意，0.24.0是rust-websocket的最后一个版
tk-http：用于rusttokio的全功能HTTP和Websockets库
02-03
tk-http：用于rusttokio的全功能HTTP和Websockets库
tokio-websockets：高性能WebSocket实现
最新发布
gitblog_00495的博客
04-24 651
tokio-websockets：高性能WebSocket实现 项目介绍 tokio-websockets 是一个基于 tokio-util 的高性能、严格的 WebSocket 实现。它被设计为与 tokio 框架无缝集成，提供了一系列强大的功能，使得在异步环境中处理 WebSocket 连接变得简单而高效。 项目技术分析 tokio-websockets 的核心是利用 tokio 的异步运行时...
【Rust日报】2021-07-31 Tokio 的 Web 框架 Axum
Rust语言学习交流
07-31 3486
Axum: Tokio 出品的 Web 框架这个框架一出，意味着 tokio 生态正在强势建立！算的上是 Rust Web 开发领域的里程碑事件！让其他 web 框架顿时失色！当然，我并不...
rust 使用tokio实现socket多人聊天
若梦网络编程
08-01 4298
服务端只有一个，客户端有很多个，看上面的图，客户端1如果要给客户端234发送一条消息，首先需要发送给服务端，然后转发给其余的3个客户端，明白了他们之前发送消息的流程，下面我们实现服务端，然后使用accept()等待客户端连接，客户端连接成功后处理消息和发送消息，因为是有很多个客户端所以使用loop循环进行监听。客户端主要是接收服务端的消息和给服务端发送消息，我们给客户端开启一个线程用来接收消息，用loop循环给服务端发送消息。如果有客户端连接到服务端，后面会处理消息和发送消息。...
【亲测免费】 推荐使用 tokio-tungstenite：异步WebSocket的Tokio解决方案
gitblog_00053的博客
05-13 1057
tokio-tungstenite 是一个专门为Tokio生态系统设计的异步WebSocket库。基于[tungstenite-rs](https://github.com/snapview/tungstenite-rs)，它提供了一系列的Tokio绑定和包装器，允许你在非阻塞/异步的`TcpStream`s上使用WebSocket，并且可以和其他Tokio栈的组件无缝集成。 ## 项目技术分析...
WebRTC入门学习之初识WebRTC
weixin_34032827的博客
08-08 379
2019独角兽企业重金招聘Python工程师标准>>> ...
websocket阻塞js加载
03-22
<think>好的，我现在要解决用户关于避免WebSocket阻塞JavaScript加载的问题。首先，我需要回忆一下WebSocket的基本工作原理以及浏览器加载资源的机制。 用户提到WebSocket可能会阻塞JavaScript文件的加载，这可能是因为在建立WebSocket连接时，浏览器需要处理一些同步操作，导致后续资源的加载被延迟。根据引用[2]，WebSocket的初始化是通过实例化WebSocket对象，并注册事件处理函数。但通常情况下，WebSocket的连接是异步的，不会阻塞其他资源的加载。那用户为什么会遇到阻塞问题呢？ 可能的情况是，用户可能在页面加载的早期阶段就创建了WebSocket连接，并且可能在主线程中执行了一些同步操作，导致阻塞。例如，如果在HTML的<head>标签中直接创建WebSocket并等待连接完成，这可能会阻塞DOM的解析和后续资源的加载。或者，用户可能没有正确使用异步加载的方式，导致脚本执行顺序影响了资源加载。 根据引用[1]，使用开源库如PyWebSocket或WebSocket-Node可以处理数据包的封装和解析，但关键在于如何管理WebSocket连接的建立时机。需要确保WebSocket连接的初始化不会阻塞页面其他资源的加载。 解决方案可能包括：将WebSocket的初始化代码放在页面底部，或者使用异步加载的方式，例如通过事件监听延迟连接的建立，直到页面加载完成。另外，可以结合Web Worker将WebSocket的处理放到后台线程，避免占用主线程。 需要验证这些方法的可行性。例如，将WebSocket代码放在window.onload事件中，确保在页面所有资源加载完成后再建立连接。或者使用defer或async属性加载包含WebSocket的脚本，使其不阻塞HTML解析。 同时，引用[2]中提到，可以通过addEventListener或onopen等方法处理连接事件，这应该是非阻塞的。因此，可能问题出在代码的位置或执行方式上。建议用户检查代码结构，将WebSocket初始化代码移至适当的位置，避免在关键渲染路径中执行耗时操作。 总结可能的步骤：1. 延迟WebSocket连接的建立；2. 使用异步加载技术；3. 利用Web Worker转移处理；4. 优化代码结构，避免同步阻塞操作。需要将这些方法具体化，确保用户能理解并实施。</think>### 如何避免 WebSocket 阻塞 JavaScript 文件的加载？ #### 问题分析 WebSocket 连接本身是异步的，不会直接阻塞 JavaScript 文件的加载[^2]。但如果代码逻辑设计不当（例如在页面初始化阶段同步等待连接建立），可能间接导致资源加载延迟。以下是具体解决方案： --- #### 方法 1: **延迟 WebSocket 连接的建立** 将 WebSocket 连接的初始化代码放在页面加载完成后执行，避免与关键资源竞争。 ```javascript // 在页面所有资源（包括脚本）加载完成后建立连接 window.addEventListener('load', function() { const socket = new WebSocket('ws://example.com/socket'); // 注册其他事件监听... }); ``` --- #### 方法 2: **异步加载脚本** 若 WebSocket 相关代码与其他脚本耦合，可使用 `async` 或 `defer` 属性异步加载脚本： ```html <!-- 异步加载脚本，不阻塞 HTML 解析 --> <script src="websocket-handler.js" async></script> ``` - `async`：下载脚本时不阻塞，下载完成后立即执行（执行顺序不确定）。 - `defer`：下载脚本时不阻塞，在 DOM 解析完成后按顺序执行。 --- #### 方法 3: **使用 Web Worker 处理 WebSocket** 将 WebSocket 通信移至 Web Worker 线程，完全避免占用主线程： ```javascript // 主线程代码 const worker = new Worker('websocket-worker.js'); // websocket-worker.js 中 const socket = new WebSocket('ws://example.com/socket'); socket.onmessage = function(event) { postMessage(event.data); // 将数据传回主线程 }; ``` --- #### 方法 4: **优化连接逻辑** - **避免同步操作**：禁止在连接事件中执行同步阻塞操作（如 `while` 循环等待）。 - **分步加载**：先加载必要资源，再通过用户交互触发 WebSocket 连接（如按钮点击）。 --- #### 验证效果 通过浏览器开发者工具的 **Network** 面板，观察 JavaScript 文件的加载时序和阻塞情况，确保 WebSocket 初始化不会延长页面加载时间。 --- ### 相关问题 1. WebSocket 和 HTTP/2 在实时通信中的性能对比如何？ 2. 如何实现 WebSocket 的断线重连机制？ 3. WebSocket 在移动端应用中需要注意哪些兼容性问题？ [^1]: JavaScript WebSocket 使用总结。调用开源库如 PyWebSocket、WebSocket-Node 等实现数据包处理。 : WebSocket 初识篇。通过事件监听器异步处理连接状态和数据传输。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值