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 相关文章推荐
jquery 获取标签名(tagName)示例代码
Jul 11 Javascript
node.js [superAgent] 请求使用示例
Mar 13 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
深入理解JavaScript中的箭头函数
Jul 28 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
javascript实现标签切换代码示例
May 22 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
JS实现访问DOM对象指定节点的方法示例
Apr 04 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
记录一次开发微信网页分享的步骤
May 07 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
微信小程序实现多张图片上传功能
Nov 18 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位运算的简单权限设计
2013/06/30 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP标准库 (SPL)――Countable用法示例
2020/06/05 PHP
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
javascript框架设计读书笔记之种子模块
2014/12/02 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
JS敏感词过滤代码
2016/12/23 Javascript
JS三目运算(三元运算)方法详解
2017/03/01 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
跟老齐学Python之有点简约的元组
2014/09/24 Python
python使用nntp读取新闻组内容的方法
2015/05/08 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
可能是最全面的 Python 字符串拼接总结【收藏】
2018/07/09 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python3模拟curl发送post请求操作示例
2019/05/03 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python tkinter实现日期选择器
2021/02/22 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
简约控的天堂:The Undone
2016/12/21 全球购物
团员的自我评价
2013/12/01 职场文书
上班迟到检讨书
2014/01/10 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
社团活动总结模板
2014/06/30 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
仓库管理制度范本
2015/08/04 职场文书
导游词之西递宏村
2019/12/10 职场文书
Python中Permission denied的解决方案
2021/04/02 Python
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python