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 日期对象Date扩展方法
May 30 Javascript
javascript jq 弹出层实例
Aug 25 Javascript
js跳转页面方法总结
Jan 29 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
angular实现商品筛选功能
Feb 01 Javascript
vue loadmore组件上拉加载更多功能示例代码
Jul 19 Javascript
基于Vue实现后台系统权限控制的示例代码
Aug 29 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
利用node.js如何创建子进程详解
Dec 09 Javascript
基于js文件加载优化(详解)
Jan 03 Javascript
原生js实现五子棋游戏
May 28 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下MYSQL limit的优化
2008/01/10 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
CI框架给视图添加动态数据
2014/12/01 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
php-7.3.6 编译安装过程
2020/02/11 PHP
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
js异步编程小技巧详解
2017/08/14 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
vue2.0安装style/css loader的方法
2018/03/14 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题
2019/11/06 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
[02:00]最后,我终于出了辉耀
2018/03/27 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
python 非线性规划方式(scipy.optimize.minimize)
2020/02/11 Python
python 如何将office文件转换为PDF
2020/09/22 Python
Python调用飞书发送消息的示例
2020/11/10 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
老海军美国官网:Old Navy
2016/09/05 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
法学函授自我鉴定
2014/02/06 职场文书
后备干部考察材料
2014/02/12 职场文书
客服部工作职责范本
2014/02/14 职场文书
实习公司领导推荐函
2014/05/21 职场文书
2014年计生标语
2014/06/23 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
Vue实现tab导航栏并支持左右滑动功能
2021/06/28 Vue.js