socket.io学习教程之基础介绍(一)


Posted in Javascript onApril 29, 2017

前言

Web端与服务器间的实时数据传输的是一个很重要的需求,但最早只能通过AJAX轮询询实现。在WebSocket标准没有推出之前,AJAX轮询是唯一可行的方式(通过Flash浏览器也可以,但这里不做讨论)。AJAX轮询原理是设置定时器,定时通过AJAX同步服务器数据。这种方式存在延时且对服务端造成很大负载。直到2011年,IETF才标准化WebSocket——一种基于TCP套接字进行收发数据的协议。现如今主流浏览器均已支持WebSocket。

socket.io学习教程之基础介绍(一)

socket.io将数据传输部分独立出来形成了engine.io ,  engine.io对WebSocket和AJAX轮询进行封装,形成一套API,屏蔽了细节差异和兼容性问题,实现了跨浏览器/跨设备进行双向数据。

socket.io对engine.io不是必须的,你也可以实现自己的engine.io,通过server.bind绑定

应用

  • 实时数据分析展示(报表,日志)
  • 即时通讯、聊天,
  • 二进制流(图片,音乐,视频)传输
  • 多人协同编辑
  • 即时消息推送

类似技术

  • AJAX轮询: 基于XMLHttpRequest的AJAX轮询
  • AJAX长轮询: 类似轮询,服务器在客户端请求后不返回响应,直到有数据需要传到客户端,传完数据后客户端再发起新的请求。缺点是要额外传输的HTTP头,保持住请求不响应也需要一些额外工作。
  • HTTP流: 与AJAX长轮询类似,服务端响应会带上HTTP头: Transfer-Encoding: chunked,返回完数据到客户端后客户端也不需要发起新的请求,缺点是各个chunk之间的数据难以识别和处理。
  • 插件: 类似Flash,Silverlight, 作为插件越来越被主流浏览器和用户排斥

下面就不同角度对各技术进行分析

  • 单向/双向
  • 单向: AJAX轮询,AJAX长轮询,HTTP流
  • 双向: WebSocket, 插件
  • 延时

WebSocket < 插件 < HTTP流 < AJAX长轮询 < AJAX轮询

1、效率

插件 > WebSocket > HTTP流 > AJAX长轮询 > AJAX轮询

1、移动端支持

WebSocket: 基本均支持

HTTP流,AJAX长轮询,AJAX轮询: 基本均支持

插件: 基本不支持

1、开发或设置难易程度

WebSocket < AJAX轮询 < 插件 < AJAX长轮询,HTTP流

总结

socket.io封装了WebSocket,不支持WebSocket的情况还提供了降级AJAX轮询,功能完备,设计优雅,是开发实时双向通讯的不二手段。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用js自动判断浏览器分辨率的代码
Jan 28 Javascript
JavaScript delete操作符应用实例
Jan 13 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
jquery.ajax之beforeSend方法使用介绍
Dec 08 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
Apr 29 #Javascript
Vue.js在使用中的一些注意知识点
Apr 29 #Javascript
jQuery实现按比例缩放图片的方法
Apr 29 #jQuery
Vue开发中整合axios的文件整理
Apr 29 #Javascript
Vue.js教程之axios与网络传输的学习实践
Apr 29 #Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 #jQuery
jQuery实现多张图片上传预览(不经过后端处理)
Apr 29 #jQuery
You might like
浅析PHP的ASCII码转换类
2013/07/05 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
Zend Framework校验器Zend_Validate用法详解
2016/12/09 PHP
PHP使用ActiveMQ实例
2018/02/05 PHP
JavaScript实现url地址自动检测并添加URL链接示例代码
2013/11/12 Javascript
js 上下左右键控制焦点(示例代码)
2013/12/14 Javascript
JQuery动态添加和删除表格行的方法
2015/03/09 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
在vue中使用vue-echarts-v3的实例代码
2018/09/13 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Element PageHeader页头的使用方法
2020/07/26 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
java直接调用python脚本的例子
2014/02/16 Python
Python实例分享:快速查找出被挂马的文件
2014/06/08 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
零基础使用Python读写处理Excel表格的方法
2019/05/02 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
CHRONEXT英国:您的首选奢华腕表目的地
2020/03/30 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
蛋糕店创业计划书
2014/05/06 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL