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在for循环中绑定事件解决事件参数不同的情况
Jan 20 Javascript
详解JavaScript逻辑Not运算符
Dec 04 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
Aug 20 Javascript
基于bootstrap实现收缩导航条
Mar 17 Javascript
超简单的Vue.js环境搭建教程
Mar 17 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
Jun 14 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JS实现图片切换效果
Nov 17 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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
同时提取多条新闻中的文本一例
2006/10/09 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
浅谈php中include文件变量作用域
2015/06/18 PHP
PHP curl使用实例
2015/07/02 PHP
PHP实现图片压缩
2020/09/09 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
RGB颜色值转HTML十六进制(HEX)代码的JS函数
2009/04/25 Javascript
javascript dom 操作详解 js加强
2009/07/13 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
jQuery中layer分页器的使用
2017/03/13 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python天气预报采集器实现代码(网页爬虫)
2012/10/07 Python
从零学Python之入门(四)运算
2014/05/27 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
nohup后台启动Python脚本,log不刷新的解决方法
2019/01/14 Python
pytorch 固定部分参数训练的方法
2019/08/17 Python
python可视化实现KNN算法
2019/10/16 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
舞蹈教育学专业推荐信
2013/11/27 职场文书
经典大学生求职信范文
2014/01/06 职场文书
法制宣传日活动总结
2014/04/29 职场文书
幼儿发展评估方案
2014/06/11 职场文书
中秋节活动总结
2014/08/29 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
年度考核表个人总结
2015/03/06 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
教师个人师德工作总结2015
2015/05/12 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS
Django实现聊天机器人
2021/05/31 Python
Python实现为PDF去除水印的示例代码
2022/04/03 Python