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事件模拟
Jun 27 Javascript
JavaScript的原型继承详解
Feb 15 Javascript
jQuery限制图片大小的方法
May 25 Javascript
带有定位当前位置的百度地图前端web api实例代码
Jun 21 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 Javascript
JavaScript运动框架 多物体任意值运动(三)
May 17 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
JavaScript链式调用实例浅析
Dec 19 Javascript
jQuery操作动画完整实例分析
Jan 10 jQuery
在 Vue 中编写 SVG 图标组件的方法
Feb 24 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 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 用sock技术发送邮件的函数
2007/07/21 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP 文件上传限制问题
2019/09/01 PHP
CheckBox 如何实现全选?
2006/06/23 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
Vue自定义指令写法与个人理解
2019/02/09 Javascript
Angular 2使用路由自定义弹出组件toast操作示例
2019/05/10 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
关于angular 8.1使用过程中的一些记录
2020/11/25 Javascript
jQuery实现增删改查
2020/12/22 jQuery
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
Django之模型层多表操作的实现
2019/01/08 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
python 抓包保存为pcap文件并解析的实例
2019/07/23 Python
Python实现像awk一样分割字符串
2020/09/15 Python
New Balance美国官网:运动鞋和健身服装
2017/04/11 全球购物
如何选择使用结构还是类
2014/05/30 面试题
大学生蛋糕店创业计划书
2014/01/13 职场文书
新学期开学演讲稿
2014/05/24 职场文书
公安交警个人对照检查材料思想汇报
2014/10/01 职场文书
见习报告格式范文
2014/11/08 职场文书
师德标兵先进事迹材料
2014/12/19 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
Django集成富文本编辑器summernote的实现步骤
2021/05/31 Python
Win10系统下配置Java环境变量
2021/06/13 Java/Android