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中的escape及unescape函数的php实现代码
Sep 04 Javascript
Javascript 事件流和事件绑定
Jul 16 Javascript
js取得url地址参数实例
Feb 22 Javascript
jQuery侧边栏随窗口滚动实现方法
Mar 04 Javascript
jQuery操作Table技巧大汇总
Jan 23 Javascript
详解js私有作用域中创建特权方法
Jan 25 Javascript
Vuex和前端缓存的整合策略详解
May 09 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
原生js实现购物车功能
Sep 23 Javascript
JavaScript实现点击切换验证码及校验
Jan 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 时间计算问题小结
2009/01/04 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
IE浏览器兼容Firefox的JS脚本的代码
2008/10/23 Javascript
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
2011/04/27 Javascript
JS创建类和对象的两种不同方式
2014/08/08 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript检测弹出窗口是否已经关闭的方法
2015/03/24 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
为何JS操作的href都是javascript:void(0);呢
2015/11/12 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
深入理解vue2.0路由如何配置问题
2017/07/18 Javascript
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
vue 强制组件重新渲染(重置)的两种方案
2019/10/29 Javascript
JS实现放烟花效果
2020/03/10 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
2020/10/24 Javascript
[47:06]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第一局
2016/03/05 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
python计算最大优先级队列实例
2013/12/18 Python
python实现从一组颜色中找出与给定颜色最接近颜色的方法
2015/03/19 Python
python简单读取大文件的方法
2016/07/01 Python
Python3 socket同步通信简单示例
2017/06/07 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
pandas 时间格式转换的实现
2019/07/06 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Django配置文件代码说明
2019/12/04 Python
Python with语句和过程抽取思想
2019/12/23 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
python3.9实现pyinstaller打包python文件成exe
2020/12/13 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
葡萄牙语专业个人求职信
2013/12/10 职场文书
个人股份转让协议书范本
2014/10/26 职场文书