1.探索WebSocket:实时网络的心跳!

序言

你可能听说过"WebSokcet"这个词,感觉它好像很高深,但其实它是一个超级酷的小工具,让我们在Web应用里实现实时通信。想象一下,你可以像聊天一样,在浏览器和服务器之间来回“畅聊“,没有延迟,没有刷新,没有重新请求的等待时间。今天,我们就来一探WebSocket的奥秘,看看它是怎么让互联网更有“生命力“的!

1. 什么是WebSocket

WebSokcet是HTML5引入的一种网络协议,最初由IEFT(互联网工程任务组)在2011年发布,专为双向通信设计。简单来说,它让浏览器和服务器之间可以像打电话一样,保持着一个实时的“通话线路”,随时互相传递信息

在普通的HTTP请求里,浏览器每次想要一些数据,都需要单独“打电话”给服务器,并等待回应,收到后电话就挂断了——这种方式叫短连接。而WebSocket却能让浏览器和服务器之间维持一条长连接,使他们随时可以向对方传递消息,就像微信、微博的实时消息推送那样!更妙的是,WebSokcet建立连接后,通信速度更快且更节省资源。

2. WebSocket的几个关键特性

  1. 双向通信: WebSocket可以让客户端(浏览器)和服务器彼此都可以主动发消息,而不是等待请求。
  2. 长连接: 连接一旦建立,不需要每次通信都重新发起连接请求
  3. 低延迟: 在频繁通信的场景中,比HTTP短连接更省时省力。
  4. 轻量级: WebSocket协议投很轻巧,减少了数据传输的开销。

3. WebSocket的实际应用场景

WebSocket广泛应用在那些需要实时数据更新的应用里:

  1. 在线聊天: 比如微信、QQ等即时通讯应用,它们需要实现消息的实时传输,才能让你和朋友“即时聊天”
  2. 实时推送:各类推送通知,比如微博、新闻网站的实时热点推送、双向的通信能力
  3. 在线游戏: 多人在线游戏里的实时对战、积分更新都需要低延迟、双向的通信能力。
  4. 股票/加密货币行情: 金融市场瞬息万变,很多股票、比特币行情数据都依赖WebSocket,确保用户看到的是“秒级”的更新。
  5. 实时协作工具: 文档、表格等协作工具,需要实时共享数据,大家编辑时能立刻看到彼此的改动。

4. 如何使用WebSocket? 一个简单的示例

WebSocket的使用很简单,浏览器端只需要几行代码,就能和服务建立通信。以下是一个使用JavaScript和WebSocket的基本示例。

//1. 创建WebSocket 连接
const socket = new WebSocket("wss://example.com/socket")//2.连接成功后触发
socket.onopen = function(event){console.log('Connected to WebSocket');socket.send('Hello,Server!');// 向服务器发送信息
}//3.监听信息
socket.onmessage = function(event){console.log('Message from server:',event.data)
}//4.监听关闭事件
socket.onclose = function(event){console.log('WebSocket connection closed:',event)
}//5.错误处理
socket.onerror = function(error){console.error('WebSocket error:',error)
}

在这个例子中,我们首先创建了一个WebSocket连接,并设置了几个监听器:
● onopen: 连接时触发
● onmessage: 当服务器发送消息时触发
● onclose: 当连接关闭时触发。
● onerror: 如果出现错误时触发

5. 浏览器观察数据交互

以bilibili的弹幕为例,打开控制台,或者F12然后查看网络(NetWork),选择过滤WS协议的请求,我们随机选择一个请求,进行查看。其中101 代表的是成功的消息。
在这里插入图片描述
我们查看下Message消息,我们可以看到数据在浏览器和服务端之间进行交互:

我们可以看到他们数据传递格式采用的是二进制,我们也可以使用JSON格式进行传递,这样数据的可读性就更高。

在这里插入图片描述
其中图中绿色箭头向上的数据是客户端发送给服务端的数据,橙色箭头向下的数据是服务端推送给客户端的数据。

6. WebSocket的工作流程

  1. 建立连接: 客户端向服务器发送WebSocket连接请求,这类似于一次普通的HTTP请求
  2. 握手成功: 一旦握手成功,客户端和服务器之间便建立了WebSocket长连接。
  3. 数据通信: 连接保持着,客户端和服务器可随时互发信息,不需要重新请求。
  4. 关闭连接: 通信完成户,任何一方都可以主动关闭连接。

7. WebSocket 和 HTTP的区别

WebSocket 并非替代HTTP,而是一种补充。HTTP是无状态、单向的协议,适用于一般网页的请求-响应模式。
而WebSocket则是有状态的,适用于需要频繁双向通信的场景。WebSocket通过建立长连接,可以极大减少宽带开销和延迟,但一般只用于少数需要实时互动的应用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/58992.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【大数据学习 | kafka】kafka的数据存储结构

以上是kafka的数据的存储方式。 这些数据可以在服务器集群上对应的文件夹中查看到。 [hexuanhadoop106 __consumer_offsets-0]$ ll 总用量 8 -rw-rw-r--. 1 hexuan hexuan 10485760 10月 28 22:21 00000000000000000000.index -rw-rw-r--. 1 hexuan hexuan 0 10月 28 …

做一个干电池的电量检测器03:数值拟合与电路仿真

首先在表格中进行详细的计算,整理出所需的数据。接着,我们运用MATLAB的强大功能对这些数据进行插值处理,生成了一个离散的数值数组。这个数组的每个数值都精确地对应着模数转换器(ADC)采样到的信号。通过这些数值&…

MFC工控项目实例二十八模拟量信号每秒采集100次

用两个多媒体定时器,一个定时0.1秒计时,另一个定时0.01秒用来对模拟量信号采集每秒100次。 1、在SEAL_PRESSUREDlg.h中添加代码 class CSEAL_PRESSUREDlg : public CDialo { public:CSEAL_PRESSUREDlg(CWnd* pParent NULL); // standard constructor&a…

【Mac】Screen Recorder by Omi Mac:Omi录屏专家

大家好,今天给大家介绍的这款软件叫Screen Recorder by Omi Mac:Omi录屏专家。 软件介绍 OmniRecorder for Mac 是一款用于录制屏幕的应用程序,专为 macOS 设计。它允许用户录制整个屏幕或特定区域,支持音频录制和实时编辑。这个…

多波束T50P和SES2000 Medium100安装记录(2024年10月)

SES2000 Medium100买了一直没有机会用,本次外业刚好需要。SES2000最大穿透70m。 Medium100安装与SES2000 Standard基本相同。除了钢管和法兰不同以外,它们安装支架都可以通用。有条件的话,用焊接方式将其固定在船侧舷,前方加一道拉…

Nginx安装配置详解

Nginx Nginx官网 Tengine翻译的Nginx中文文档 轻量级的Web服务器,主要有反向代理、负载均衡的功能。 能够支撑5万的并发量,运行时内存和CPU占用低,配置简单,运行稳定。 写在前 uWSGI与Nginx的关系 1. 安装 Windows 官网 Stabl…

保研考研机试攻略:python笔记(2)

🐨🐨🐨宝子们好呀,今天我们继续来学习N诺提供的python笔记,fighting!( •̀ ω •́ )✧ 对这个系列感兴趣的宝子欢迎关注保研考研机试攻略专栏哦 ~ 目录 🐨🐨🐨4进制转…

qt QSplitter详解

1、概述 QSplitter是Qt框架中的一个布局管理器类,它允许用户在应用程序窗口中创建可拖动的分隔器,以便动态地调整多个子窗口或控件的大小。QSplitter非常适合用于分割、重新排列和管理用户界面中的多个区域,提供了一种直观且灵活的方式来控制…

mysql left join group_concat 主表丢失数据

问题出现的场景: 有一个主表 a,一个子表 b a表有两条数据,a表第一条数据在b表中有一条子数据,a表第二条数据在b表中有两条子数据。 现在想要查询出来a表的所有数据和a表的子表b的id,b的id 使用GROUP_CONCAT拼接 有…

深度学习在复杂系统中的应用

引言 复杂系统由多个相互作用的组成部分构成,这些部分之间的关系往往是非线性的,整体行为难以通过简单的线性组合来预测。这类系统广泛存在于生态学、气象学、经济学和社会科学等多个领域,具有动态演变、自组织、涌现现象以及多尺度与异质性…

Python爬虫的京东大冒险:如何高效获取商品详情的秘籍

在这个由代码编织的电商世界里,京东商品详情就像是被锁在高塔中的公主,等待着勇敢的Python爬虫骑士去解救。今天,我们要讲述的是如何成为一名Python爬虫骑士,携带你的代码长矛,穿梭在API的数据森林中,高效获…

服务器数据恢复—RAID5阵列中部分成员盘重组RAID5阵列后如何恢复原raid5阵列数据?

服务器数据恢复环境: 一台服务器挂接一台存储,该存储中有一组由5块硬盘组建的RAID5阵列。 服务器故障: 存储raid5阵列中有一块硬盘掉线。由于RAID5的特性,阵列并没有出现问题。工作一段时间后,服务器出现故障&#xff…

new/delete和malloc()/free()的区别及其使用

C系列----new/delete和malloc()/free()的区别 这篇文章我将深读刨析一下这二者的区别及其在使用过程中应该注意的事项 文章目录 C系列----new/delete和malloc()/free()的区别前言一、new/delete和malloc/free在操作自定义类型时的区别1.1、在属性和使用上的区别1.2、返回类型的…

我主编的电子技术实验手册(22)——RC并联电路

本专栏是笔者主编教材(图0所示)的电子版,依托简易的元器件和仪表安排了30多个实验,主要面向经费不太充足的中高职院校。每个实验都安排了必不可少的【预习知识】,精心设计的【实验步骤】,全面丰富的【思考习…

word mathml 创建粗体字母快捷键

在 mathml 中达到latex中 \mathbf{A} 的效果 由于word本身不支持这个命令,所以打算用快捷键实现 快捷键的功能是加粗光标前一个字目 1. Alt F8 打开宏,如果打不开可以尝试 Alt Fn F8 2. 输入 BoldPreviousCharacter 新建宏: Sub Bold…

开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序中积分使用价值的拓展策略

摘要:本文围绕开源 AI 智能名片 2 1 链动模式 S2B2C 商城小程序,深入探讨其积分使用价值的丰富策略。详细分析积分兑换礼品、会员升级、积分抵现等方式在该特定商城小程序环境下的应用特点、存在问题及对用户和商城的影响,旨在为商城的优化运…

Win10 连接到 Ubuntu 黑屏无法连接 使用Rustdesk显示 No Displays 没有显示器

Win10 连接到 Ubuntu 黑屏无法连接 使用Rustdesk显示 No Displays 没有显示器 解决办法安装虚拟显示器 安装xorg虚拟显示器 $ sudo apt install xserver-xorg-video-dummy # 提示错误依赖使用下面这个试试 $ sudo apt-get install xserver-xorg-video-dummy --fix-missing配…

Hadoop-002-部署并配置HDFS集群

集群规划 Hadoop HDFS的角色包含 NameNode(主节点管理者)、DataNode(从节点工作者)、SeconddaryNameNode(从节点辅助) 节点CPU内存hadoop-11C4Ghadoop-21C2Ghadoop-31C2G 一、下载上传Hadoop包 注意: 登录hadoop-1节点root用户执行 1、官网下载安装包后上传 到hadoop-1服务…

BOOST库配置到VS2022详细操作步骤和可能出现的错误解决方法

文章目录 BOOST库配置上述的细节操作出现的错误错误1错误2 其余内容 BOOST库配置 配置过程见BOOST库配置到VS2022(保姆级教程)主要借鉴 C/C Windows环境下 boost 安装使用教程【学习笔记】 Boost库各个版本下载地址 上述的细节操作 第一点 我的操作步…

css实现边框双色凹凸半圆

整体效果如下图&#xff1a; 结构代码&#xff1a; <div classline-outside-wrap><div classwrap><img src../img/avatar2x.png/><div classcontent-wrap></div></div></div> 内凹框实现&#xff1a; .content-wrap{width:100%;he…