Socket.io 深入理解

最近在做项目优化工作时,用到了Socket.io , Socket.io 文档比较少, 结合官网介绍以及自己在项目开发中的摸索,总结如下内容;

Socket.io将Websocket和轮询 (Polling)机制以及其它的实时通信方式封装成了通用的接口,并且在服务端实现了这些实时机制的相应代码。也就是说,Websocket仅仅是Socket.io实现实时通信的一个子集;

Socket.io 支持如下方式的通信方式,根据浏览器的支持程度,自动选择使用哪种技术进行通信:

  • WebSocket
  • Flash Socket
  • AJAX long-polling
  • AJAX multipart streaming
  • Forever IFrame
  • JSONP polling

Socket.io 底层是 Engine.io; Engine.io作为Socket.io的服务器和浏览器之间交换的数据的传输层,实现了跨平台的双向通信。但是它不会取代Socket.io,它只是抽象出固有的复杂性,支持多种浏览器,设备和网络的实时数据交换。

Engine.io使用了 WebSocket 和 XMLHttprequest(或JSONP) 封装了一套自己的 Socket 协议(暂时叫 EIO Socket),在低版本浏览器里面使用长轮询替代 WebSocket。一个完整的 EIO Socket 包括多个 XHR 和 WebSocket 连接.

下面从前后端的实现原理上来说明;

前端

EIO Socket 通过一个 XHR (XMLHttprequest) 握手。前端发送一个 XHR,告诉服务端我要开始 XHR 长轮询了。后端返回的数据里面包括一个 open 标志(数字 0 表示), 以及一个 sid 、 upgrades 、pingInterval、pingTimeout四个字段;

sid

sid 是本次 EIO Socket 的会话 ID,因为一次 EIO Socket 包含了多个请求,而后端又会同时连接多个 EIO Socket,sid 的作用就相当于 SESSION ID;

upgrades

会话升级得字符串,正常情况下是 ['websocket'],表示可以把连接方式从长轮询升级到 WebSocket.

pingInterval

设定每隔在一定时间发送一个ping包,可以用于心跳包的设置。默认为25000

pingTimeout

Server配置的ping超时时间,默认60000

前端在发送第一个 XHR 的时候就开始了 XHR 长轮询,这个时候如果有收发数据的需求,是通过长轮询实现的。所谓长轮询,是指前端发送一个 request,服务端会等到有数据需要返回时再 response. 前端收到 response 后马上发送下一次 request。这样就可以实现双向通信。

前端收到握手的 upgrades 后,EIO 会检测浏览器是否支持 WebSocket,如果支持,就会启动一个 WebSocket 连接,然后通过这个 WebSocket 往服务器发一条内容为 probe, 类型为 ping 的数据。如果这时服务器返回了内容为 probe, 类型为 pong 的数据,前端就会把前面建立的 HTTP 长轮询停掉,后面只使用 WebSocket 通道进行收发数据。

EIO Socket 生命周期内,会间隔一段时间 (默认25000毫秒)ping - pong 一次,用来测试网络是否正常;

下图是WebSocket 帧的结构

绿色是发送,白色是接收。前面的数字是数据包类型,2 是 ping, 3 是 pong, 4 是 message.

服务端

服务端使用 ws 库实现 WebSocket 协议。Socket.io服务启动时,会先启动一个 ws 服务。Socket.io 会监听 HTTP 服务器的 upgrade 和 request 事件。当 upgrade 事件触发时,说明可能是 WebSocket 握手,先简单校验下,然后把请求交给 ws 服务进行处理,拿到 WebSocket 对象。当 request 事件触发时,根据 url 路径判断是不是 Socket.io的 XHR 请求,拿到 res 和 res 对象。这样就可以正确接收和返回客户端数据了,具体处理过程和前端部分是对应的。


更多专业前端知识,请上 【猿2048】www.mk2048.com

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

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

相关文章

python填表_小Python填表得到d

我正在尝试使用Scrapy从网站自动下载数据。在我要做的是:使用我的凭据登录网站通过在“RIC”行中写入代码并选择感兴趣的时段来选择我想要的数据单击“获取数据”后,将生成.csv文件,我可以从“下载/”url下载该文件,其中我的所有文…

我理解中的“大前端”/“大无线”

本文内容较长,大概需要15分钟时间阅读。 内容包含五部分:前言,NodeJS职能变化,ReactNative的大规模应用,专门的架构组职能,总结。主要是介绍我所在团队最近的一些变化和思考。 更多信息可以加入我的小密圈关…

Dirichlet分布

1.预备知识 Beta分布函数是一种定义在实数区间[0,1]的特殊函数,它是二项式分布的共轭分布;与Beta分布相同,Dirichlet分布也是定义在实数区间[0,1]的概率度量函数,Dirichlet分布是多项式分布的共轭分布,Dirichlet分布的…

布局定位

布局与定位 摆放元素 1,使用流 流实际上就是浏览器在页面上摆放HTML元素所用的方法。浏览器从HTML文件最上面开始,从上到下沿着元素流逐个显示所遇到的各个元素。 每个块元素会按它在HTML标记中出现的顺序放置在页面上。每个新的块元素会带来一个换行。并…

python语言精通_Python语言基础从入门到精通

1、python关键字False await else import passNone break except in raiseTrue class finally is returnand continue for lambda tryas def from nonlocal whileassert del global not withasync elif if or yield2、命令行参数williamdeMBP-2:~ william$ python -c "imp…

FreeNAS:创建 CIFS 共享(权限)

第一部分:新建账户与指定数据集权限 简单起见,本教程主要介绍带基本身份验证的 CIFS 共享,即只有输入正确的用户名和密码才可以访问共享目录。关于创建匿名共享、多用户权限管理以及域控制器相关内容,我们会另外发布教程专门介绍。…

oracle日记账单据编号未生成_商管财务数据平台Oracle与共享未付池差异如何核对、解决?...

‍‍近期,总部新上线财务数据平台啦!各个系统间的差异异常数据清晰可见,随时可查,今天就和小伙伴们一起分享一下Oracle与共享未付池差异如何核对、解决。首先,将Oracle与共享未付池差异数据导出。由于导出的数据包括本…

android paint 圆角 绘制_[BOT] 一种android中实现“圆角矩形”的方法

内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角。思路是利用“Xfermode Path”来进行Bitmap的裁剪。背景圆角矩形实现的方法应该很多,网上一大堆。很怀疑为啥安卓的控件不内置这样的属…

Cisco TrustSec(理解)

1、Cisco TrustSec的限制当指定了无效的设备ID时,受保护的访问凭据(Protected access credential,PAC)设置将失败并保持挂起状态。 即使在清除PAC并配置正确的设备ID和密码后,PAC仍然会失败。作为解决方法,…

Java 8仍然需要LINQ吗? 还是比LINQ更好?

长期以来, LINQ是.NET软件工程生态系统中发生的最好的事情之一。 通过在Visual Studio 2008中引入lambda表达式和monads ,它使C#语言比Java(当时的版本6)更先进,并且仍在讨论泛型类型擦除的优缺点。 这项成…

web前端(12)—— 页面布局2

本篇博文,主要就讲定位的问题,也就是页面布局里最重要的,本篇博文不出意外的话,也是css的最后一篇博文了 定位,position属性 定位有三种: 相对定位绝对定位固定定位 相对定位,position&#x…

python pyplot中axis_Python Pyplot xaxis未显示在图形上

pyplot未在图形上显示x轴:import pandas as pdimport matplotlib.pyplot as pltdf pd.read_csv(sitka_weather_2014.csv)df[AKST] pd.to_datetime(df.AKST)df[Dates] df[AKST].dt.strftime(%b %d, %Y)df.set_index("Dates", inplace True)# Plot Dataf…

web前端入门学习(纯干货)

web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门、初级、中级、高级这四个级别, 入门级别指的是了解什么是前端(前端到底是什么其实很多人还是不清楚的&…

[校内模拟题2]

水题 但是原地螺旋炸裂 都不好意思贴代码了QWQ enc 【问题背景】 zhx 和他的妹子聊天。 【问题描述】 考虑一种简单的加密算法。假定所有句子都由小写英文字母构成, 对于每一个字母, 我们将它唯一地映射到另一个字母。 例如考虑映射规则:a-&g…

AJAX初识(原生JS版AJAX和Jquery版AJAX)

一、什么是JSON 1.介绍JSON独立于语言,是一种与语言无关的数据格式。JSON指的是JavaScript对象表示法(JavaScript Object Notation)JSON是轻量级的文本数据交换格式JSON具有自我描述性,更易理解JSON使用JavaScript语法来描述数据对…

内存不足而没有OutOfMemoryError

这实际上是最初发布于2010年的帖子的转世。 昨天,当听到我们的工程师咒骂一个特别令人讨厌的错误时,闪回发生了。 当诅咒停止时,我走过去核实我的怀疑。 瞧,我是正确的–情绪波动是由应用程序用尽了堆空间导致的,但死于…

人工智能第二星期总结-------纵里寻它千百度

2018-07-28 第二周: 此时此刻我怀着无比沉重的心情在这里做一周的学习检讨工作 这星期依此就开始讲到了函数,话说函数可是python里面的钟头戏,不仅可以节约代码,还可以把代码重复使用,只要后面轻轻松松就可以搞定啦&am…

个人作业——软件产品案例分析

个人作业——软件产品案例分析 第一部分 调研,评测 评测: 第一次上手体验 第一眼看上去功能很全面,但是到点开来发现功能大部分没有实现,体验不太好。 缺陷Bug情况 课表查询 bug描述:课表查询没有课表结果,点进去当前周…

Linux CentOS 6.5 使用自带jdk修改环境变量

来源:https://www.cnblogs.com/zhenxiqia/p/9049290.html Linux CentOS 6.5 使用自带jdk修改环境变量 首先声明,默认jdk指我们安装完CentOS后系统自带jdk,自己下载安装的jdk只需要下载,解压即可,之后步骤与此文一致 1.查看我们默认…

微信小程序下拉框

微信小程序组件里没有下拉框&#xff0c;正好要用到&#xff0c;记下来以后参考 wxml代码 <view classtop><view classtop-text> 选择接收班级</view><!-- 下拉框 --><view classtop-selected bindtapbindShowMsg><text>{{grade_name}}&l…