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 相关文章推荐
Sample script that deletes a SQL Server database
Jun 16 Javascript
js实现在页面上弹出蒙板技巧简单实用
Apr 16 Javascript
jquery根据锚点offset值实现动画切换
Sep 11 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
详解jQuery简单的表格应用
Dec 16 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
javascript中this用法实例详解
Apr 06 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
Aug 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代码运行时间查看类代码分享
2011/08/06 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
php实现将Session写入数据库
2015/07/26 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
YII框架http缓存操作示例
2019/04/29 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
基于PHP+Mysql简单实现了图书购物车系统的实例详解
2020/08/06 PHP
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
jQuery表单事件实例代码分享
2016/08/18 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
python中的__slots__使用示例
2015/02/26 Python
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
python字符串判断密码强弱
2020/03/18 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
YesBabyOnline美国:全球性的在线婚纱礼服工厂
2018/05/05 全球购物
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
卡骆驰德国官方网站:Crocs德国
2019/03/29 全球购物
水果连锁超市创业计划书
2014/01/24 职场文书
新春文艺演出主持词
2014/03/27 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
学校运动会加油词
2015/07/18 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
小学作文之描写天气
2019/08/15 职场文书
彻底解决MySQL使用中文乱码的方法
2022/01/22 MySQL
【DOTA2】半决赛强强对话~ PSG LGD vs EHOME - DPC 2022 CN REGIONAL FINALS WINTER
2022/04/02 DOTA