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.rhkb.cn/news/463651.html

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

相关文章

Qt6 CMake 中引入 Qt Linguist 翻译功能

qt cmake 使用自带翻译工具配置步骤 创建Qt CMake 程序大体流程配置项目 CMake 及 代码使用流程最终CMake 如下最终工程链接为:参考 创建Qt CMake 程序 大体流程 配置项目 CMake 及 代码 在CMake 中添加如下代码, 导入相关的翻译库 find_package(QT NAMES Qt6 Qt…

【Linux】——如何安装g++

g的安装 sudo yum install -y gcc-c

FET113i-S核心板已支持RISC-V,打造国产化降本的更优解 -飞凌嵌入式

FET113i-S核心板是飞凌嵌入式基于全志T113-i处理器设计的国产工业级核心板,凭借卓越的稳定性和超高性价比,FET113i-S核心板得到了客户朋友们的广泛关注。作为一款拥有A7核RISC-V核DSP核的多核异构架构芯片,全志科技于近期释放了T113-i的RISC-…

基于python的机器学习(二)—— 使用Scikit-learn库

目录 一、样本及样本划分 1.1 划分样本的方法 1.1.1 train_test_split()函数 1.1.2 时间序列划分 1.1.3 交叉验证 二、导入或创建数据集 2.1 导入Sklearn自带的样本数据集 2.2 利用Sklearn生成随机的数据集 2.3 读入自己创建的数据集 2.3.1 用Python直接读取文本文件…

【LQB15_模拟】C风险对冲

Description 小蓝所在的蓝星集团即将建立执行一个重要的项目,在建立项目的时候需要考虑执行这个项目对集团的风险。他们组有三个备选方案,方案A的风险评估值为a,方案B的风险评估值为b,方案C的风险评估值为c。方案风险评估值越低&…

第二十八章 Vue之自定义指令

目录 一、引言 二、自定义指令的注册和使用方式 2.1. 自定义指令-全局注册使用 2.2. 自定义指令-局部注册使用 三、自定义指令完整代码 3.1. 自定义指令全局注册/使用 3.1.1. main.js 3.1.2. App.vue 3.2. 自定义指令局部注册/使用 3.2.1. main.js 3.2.2. App.vue …

银行信贷知识竞赛活动策划方案

为了落实20xx年省分行工作会议精神,进一步加强信贷队伍建设,普及和强化员工对信贷业务知识的掌握和运用,提高信贷从业人员素质,推动全省农行20xx年员工成长计划实施,实现我行全面提升信贷管理水平,促使信贷…

【学术论文投稿】探索嵌入式硬件设计:揭秘智能设备的心脏

【IEEE出版】第六届国际科技创新学术交流大会暨通信、信息系统与软件工程学术会议(CISSE 2024)_艾思科蓝_学术一站式服务平台 更多学术会议论文投稿请看:https://ais.cn/u/nuyAF3 目录 引言 嵌入式系统简介 嵌入式硬件设计的组成部分 设…

谷歌浏览器报“喔唷,崩溃啦!”怎么办?

表现 Chrome浏览器所有页面崩溃,“喔唷,崩溃啦!( STATUS_INVALID_IMAGE_HASH )” 原因 Google 在79版本(2019年12月20号左右)的更新中又重新启用了Renderer Code Integrity Protection(渲染器代码完整性保…

双因子认证(Two-factor authentication)简介

一、核心概念 双因子认证(Two-Factor Authentication,简称2FA)是一种身份验证机制,它要求用户提供两种不同类型的证据来证明自己的身份,通常包括用户所知道的(如密码)、用户所拥有的&#xff0…

vue3项目中实现el-table分批渲染表格

开篇 因最近工作中遇到了无分页情景下页面因大数据量卡顿的问题&#xff0c;在分别考虑并尝试了懒加载、虚拟滚动、分批渲染等各个方法后&#xff0c;最后决定使用分批渲染来解决该问题。 代码实现 表格代码 <el-table :data"currTableData"borderstyle"wi…

11.Three.js使用indexeddb前端缓存模型优化前端加载效率

11.Three.js使用indexeddb前端缓存模型优化前端加载效率 1.简述 在使用Three.js做数字孪生应用场景时&#xff0c;我们常常需要用到大量模型或数据。在访问我们的数字孪生应用时&#xff0c;每次刷新都需要从web端进行请求大量的模型数据或其他渲染数据等等&#xff0c;会极大…

【HarmonyOS】引导用户跳转APP设置详情页开启权限

【HarmonyOS】引导用户跳转设置APP详情页开启权限 前言 众所周知在鸿蒙应用中&#xff0c;向用户申请权限时&#xff0c;会弹出系统请求授权的弹框。当用户拒绝了你申请的权限&#xff0c;弹框会直接关闭。当下次触发同样的权限申请&#xff0c;会直接返回失败&#xff0c;不…

深入理解Transformer中的位置编码

1 位置编码的作用 由于注意力的作用机制&#xff0c;不论输入序列的顺序如何&#xff0c;输出结果都是一样的。 也就是丢失了位置信息。 但是对于语言模型&#xff0c; 我们都知道顺序是很重要的&#xff0c; 所以需要对输入序列额外注入位置信息。 2 位置编码方式 Transfor…

MySQL分区表(二)

说明&#xff1a;之前有写过一篇博客&#xff0c;介绍MySQL如何建立分区表&#xff0c;本文介绍如何建立子分区表。子分区&#xff0c;就是在原来分区的基础上&#xff0c;再嵌套一个分区。 例如&#xff0c;按照记录的创建时间分区&#xff0c;在此基础上&#xff0c;再按照租…

一文弄懂Bert模型

01 引言 计算机一直难以理解语言&#xff0c;其中一个重要原因就是该任务需要更基本的语言语境。每个 NLP 任务都可以通过使用为每个任务创建的单独模型来解决。 2018 年&#xff0c;谷歌发布了论文BERT&#xff0c;旨在对模型进行预训练&#xff0c;这样就可以通过增加不同…

HTML5实现小鸟过管道小游戏源码

文章目录 1.设计来源1.1 主界面1.2 游戏中主界面1.3 游戏结束界面 2.效果和源码2.1 动态效果2.2 源代码 源码下载万套模板&#xff0c;程序开发&#xff0c;在线开发&#xff0c;在线沟通 作者&#xff1a;xcLeigh 文章地址&#xff1a;https://blog.csdn.net/weixin_43151418/…

Linux·进程控制(system V)

1. 共享内存 system V共享内存是最快的IPC形式&#xff0c;之前的管道是基于Linux内核开发的通讯方案&#xff0c;其读写接口都是现成的&#xff0c;因此内核设计者为了完成进程间通讯任务并不需要新增太多代码。而共享内存属于system V标准&#xff0c;是操作系统单独…

【Python+Pycharm】2024-Python安装配置教程

【PythonPycharm】2024-Python安装配置教程 一、下载装 Python 1、进入Python官网首页&#xff0c;下载最新的Python版本 Download Python | Python.org 选择对应版本下载 安装 测试安装情况 python如果安装失败 在系统环境变量添加安装路径 where pythonwin7安装路径添加…

文献阅读 11.3

文献阅读 Physics-informed neural networks for hydraulic transient analysis in pipeline systems (基于物理信息的管道系统水力瞬态分析神经网络) 一、文献摘要 该文献提出了一种新的基于物理和数据驱动的定向瞬态压力重建方法&#xff0c;无需建立完整的管道系统模型。…