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对checkbox操作 (循环获取)
May 20 Javascript
JavaScript闭包函数访问外部变量的方法
Aug 27 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
实例详解JavaScript获取链接参数的方法
Jan 01 Javascript
javascript计时器编写过程与实现方法
Feb 29 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
layer实现弹窗提交信息
Dec 12 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
Apr 27 Javascript
JS+CSS实现动态时钟
Feb 19 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
一些操作和快捷键的理解和讨论
2020/03/04 星际争霸
php实现CSV文件导入和导出
2015/10/24 PHP
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
jQuery深拷贝Json对象简单示例
2016/07/06 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
express如何使用session与cookie的方法
2018/01/30 Javascript
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
CSS实现进度条和订单进度条的示例
2020/11/05 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
2019/01/03 HTML / CSS
美国运动鞋和服装网上商店:YCMC
2018/09/15 全球购物
卡拉威高尔夫官方网站:Callaway Golf
2020/09/16 全球购物
自荐信怎么写好
2013/11/11 职场文书
影视艺术学院毕业生自荐信
2013/11/13 职场文书
有个性的自我评价范文
2013/11/15 职场文书
五一家具促销方案
2014/01/10 职场文书
教学器材管理制度
2014/01/26 职场文书
关于迟到的检讨书
2015/05/06 职场文书
2015年档案室工作总结
2015/05/23 职场文书
尼克胡哲观后感
2015/06/08 职场文书
中秋节感想
2015/08/10 职场文书