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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
JS.elementGetStyle(element, style)应用示例
Sep 24 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
详解JS深拷贝与浅拷贝
Aug 04 Javascript
vue组件开发之slider组件使用详解
Aug 21 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记录日志的实现代码
2011/08/08 PHP
PHP三元运算符的结合性介绍
2012/01/10 PHP
js select option对象小结
2013/12/20 Javascript
详解JavaScript编程中正则表达式的使用
2015/10/25 Javascript
jQuery实现点击水纹波动动画
2016/04/10 Javascript
jQuery如何解决IE输入框不能输入的问题
2016/10/08 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
2017/02/05 Javascript
微信小程序页面间通信的5种方式
2017/03/31 Javascript
详谈angularjs中路由页面强制更新的问题
2017/04/24 Javascript
原生js轮播特效
2017/05/18 Javascript
Vue单文件组件的如何使用方式介绍
2017/07/28 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
[02:49]2014DOTA2电竞也是体育项目! 势要把荣誉带回中国!
2014/07/20 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
python 排列组合之itertools
2013/03/20 Python
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
python连接mysql实例分享
2016/10/09 Python
Python管理Windows服务小脚本
2018/03/12 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
解决tensorflow模型参数保存和加载的问题
2018/07/26 Python
使用PyQtGraph绘制精美的股票行情K线图的示例代码
2019/03/14 Python
pandas分批读取大数据集教程
2020/06/06 Python
Python 如何在字符串中插入变量
2020/08/01 Python
python简单实现9宫格图片实例
2020/09/03 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
2014保险公司内勤工作总结
2014/12/16 职场文书
男方婚前保证书
2015/02/28 职场文书
南京南京观后感
2015/06/02 职场文书
实习指导老师意见
2015/06/04 职场文书
预备党员表决心的话
2015/09/22 职场文书
Python基础详解之邮件处理
2021/04/28 Python
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL