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将long日期格式转换为标准日期格式实现思路
Apr 07 Javascript
JavaScript字符串对象substring方法入门实例(用于截取字符串)
Oct 17 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
Jul 27 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
bootstrap快速制作后台界面
Dec 05 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
Vue.js实现可排序的表格组件功能示例
Feb 19 Javascript
JS实现贪吃蛇游戏
Nov 15 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
THINKPHP项目开发中的日志记录实例分析
2014/12/01 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
jQuery is()函数用法3例
2014/05/06 Javascript
简单谈谈javascript中的变量、作用域和内存问题
2015/08/30 Javascript
JavaScript头像上传插件源码分享
2016/03/29 Javascript
JS检测移动端横竖屏的代码
2016/05/30 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
JavaScript表单验证开发
2016/11/23 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
three.js利用卷积法如何实现物体描边效果
2019/11/27 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
Python脚本获取操作系统版本信息
2016/12/17 Python
Python 获取当前所在目录的方法详解
2017/08/02 Python
python负载均衡的简单实现方法
2018/02/04 Python
python 字符串和整数的转换方法
2018/06/25 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python操作qml对象过程详解
2019/09/26 Python
Python 实现顺序高斯消元法示例
2019/12/09 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
《跨越百年的美丽》教学反思
2014/02/11 职场文书
立志成才演讲稿
2014/09/04 职场文书
世界水日宣传活动总结
2015/02/09 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2017春节晚会开幕词
2016/03/03 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript