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 中的内存泄露模式
Aug 13 Javascript
JavaScript 学习笔记(九)call和apply方法
Jan 11 Javascript
jquery实现的淡入淡出下拉菜单效果
Aug 25 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
Sep 04 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Node.js中文件系统fs模块的使用及常用接口
Mar 06 Javascript
vue实现div单选多选功能
Jul 16 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 Javascript
原生Js 实现的简单无缝滚动轮播图的示例代码
May 10 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 set_time_limit(0)长连接的实现分析
2010/03/02 PHP
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
thinkPHP5框架实现基于ajax的分页功能示例
2018/06/12 PHP
TP5框架实现上传多张图片的方法分析
2020/03/29 PHP
静态图片的十一种滤镜效果--不支持Ie7及非IE浏览器。
2007/03/06 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
解决JS无法调用Controller问题的方法
2015/12/31 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
Three.js快速入门教程
2016/09/09 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
js实现点击每个li节点,都弹出其文本值及修改
2016/12/15 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
2017/04/06 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
收集前端面试题之url、href、src
2018/03/22 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python json模块使用实例
2015/04/11 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
Python基础之函数基本用法与进阶详解
2020/01/02 Python
python 对任意数据和曲线进行拟合并求出函数表达式的三种解决方案
2020/02/18 Python
学习python需要有编程基础吗
2020/06/02 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
《难忘的泼水节》教学反思
2014/02/27 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
工作骂脏话检讨书
2014/10/05 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
队列队形口号
2015/12/25 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android