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,一经查实,立即删除!

相关文章

芋道前端Vue项目中的配置文件

1.Vite配置相关文件 vite.config.ts build\vite\optimize.ts build\vite\index.ts package.json package-lock.json pnpm-lock.yaml types文件 types\router.d.ts types\global.d.ts types\env.d.ts types\custom-types.d.ts types\components.d.ts 环境配置 .env.test .e…

【大数据学习 | 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)采样到的信号。通过这些数值&…

1、Java概述、HelloWorld案例

文章目录 今日内容介绍1.1 Java语言发展史和平台概述1.1.1 Java语言发展史1.1.2 Java语言版本1.1.3 Java平台概述1.2 JVM, JRE, JDK概述1.2.1 什么是跨平台?1.2.2 JVM, JRE, JDK说明1.3 常用DOS命令1.3.1 打开控制台1.3.2 常用命令1.4 下载安装JDK1.5 HelloWorld案例1.5.1 执行…

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非常适合用于分割、重新排列和管理用户界面中的多个区域,提供了一种直观且灵活的方式来控制…

Spring Boot观察者模式实战

观察者模式简介 观察者模式(Observer Pattern)是一种行为设计模式,它定义了对象间的一种一对多的依赖关系,当一个对象状态发生改变时,所有依赖于它的对象都会得到通知并自动更新。这种模式也被称为发布-订阅模式、模型…

Java中消息队列——ActiveMQ、RabbitMQ、RocketMQ、Kafka

1.什么是消息中间件 消息中间件是一种专门的工具,帮助不同的应用程序通过发送和接收消息来进行交流。想象一下,一个公司里有多个部门(如销售、财务和物流),它们需要共享信息。消息中间件就像一个信使,负责将…

mysql left join group_concat 主表丢失数据

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

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

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

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

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

【RESTful】RESTful API:最佳实践指南

目录 引言一、URL 设计1.1 动词 宾语1.2 动词的覆盖1.3 宾语必须是名词1.4 复数 URL1.5 避免多级 URL 二、状态码2.1 状态码必须精确2.2 2xx 状态码2.3 3xx 状态码2.4 4xx 状态码2.5 5xx 状态码 三、其他最佳实践3.1 版本管理3.2 使用合适的媒体类型3.3 详细的错误响应3.4 安全…

一些关于云电脑与虚拟化东西

前言 好久没有更新了,在进行自我校准。 云计算是什么? 云计算是一种模型,它使得用户能够随时随地、方便地、按需访问共享的可配置计算资源池(例如,网络、服务器、存储、应用程序和服务),这些资…

服务器数据恢复—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多个实验,主要面向经费不太充足的中高职院校。每个实验都安排了必不可少的【预习知识】,精心设计的【实验步骤】,全面丰富的【思考习…