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 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
javascript获取四位数字或者字母的随机数
Jan 09 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 Javascript
微信小程序下拉菜单效果的实例代码
May 14 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 Vue.js
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 FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
Laravel框架实现定时发布任务的方法
2018/08/16 PHP
js判断是否为数组的函数: isArray()
2011/10/30 Javascript
jquery根据属性和index来查找属性值并操作
2014/07/25 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
JS实现的DIV块来回滚动效果示例
2017/02/07 Javascript
js 性能优化之快速响应的用户界面
2017/02/15 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
2019/07/15 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
python实现单线程多任务非阻塞TCP服务端
2017/06/13 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python使用sorted对字典的key或value排序
2018/11/15 Python
python使用requests.session模拟登录
2019/08/09 Python
Keras 加载已经训练好的模型进行预测操作
2020/06/17 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
通过代码实例解析Pytest运行流程
2020/08/20 Python
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
项目考察欢迎辞
2014/01/17 职场文书
年级组长自我鉴定
2014/02/22 职场文书
镇创先争优活动总结
2014/08/28 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
考试作弊检讨书1000字(5篇)
2014/10/19 职场文书
仓管员岗位职责范本
2015/04/01 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers