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 相关文章推荐
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
JS截取字符串实例详解
Nov 24 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
JS中的三个循环小结
Jun 20 Javascript
Bootstrap提示框效果的实例代码
Jul 12 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
Jun 21 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 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中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
Js实现网页键盘控制翻页的方法
2014/10/30 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
Jquery ajax基础教程
2015/11/20 Javascript
Webpack 实现 AngularJS 的延迟加载
2016/03/02 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JS获取随机数和时间转换的简单实例
2016/07/10 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
详解ES6 系列之异步处理实战
2018/10/26 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
Vue中使用better-scroll实现轮播图组件
2020/03/07 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
Python计算三角函数之asin()方法的使用
2015/05/15 Python
Python中字符串的修改及传参详解
2016/11/30 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
浅谈Python类中的self到底是干啥的
2019/11/11 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
新闻编辑自荐信
2013/11/03 职场文书
大学军训感言300字
2014/03/09 职场文书
机关单位动员会主持词
2014/03/20 职场文书
运动会400米加油稿(8篇)
2014/09/22 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
运动会表扬稿
2015/01/16 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
论文评审意见
2015/06/05 职场文书
2016小学新学期寄语
2015/12/04 职场文书
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏