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中input中readonly和disabled区别介绍
Oct 23 Javascript
javascript中动态加载js文件多种解决办法总结
Nov 15 Javascript
js返回前一页刷新本页重载页面
Jul 29 Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
Sep 24 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
JavaScript常见继承模式实例小结
Jan 11 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
Sep 24 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
PHP递归遍历多维数组实现无限分类的方法
2016/05/06 PHP
Thinkphp单字母函数使用指南
2016/05/08 PHP
微信支付开发告警通知实例
2016/07/12 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
JS组件Bootstrap Table使用实例分享
2016/05/30 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
2016/11/04 Javascript
vue实现的上传图片到数据库并显示到页面功能示例
2018/03/17 Javascript
node.js环境搭建图文详解
2018/09/19 Javascript
vue实现循环切换动画
2018/10/17 Javascript
详解vue中的父子传值双向绑定及数据更新问题
2019/06/13 Javascript
JS数组扁平化(flat)方法总结详解
2019/06/24 Javascript
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
简单介绍Python中的decode()方法的使用
2015/05/18 Python
在Python中操作字典之clear()方法的使用
2015/05/21 Python
python的re正则表达式实例代码
2018/01/24 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python 获取中文字拼音首个字母的方法
2018/11/28 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Python面向对象进阶学习
2019/05/21 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
HTML5表单验证特性(知识点小结)
2020/03/10 HTML / CSS
新员工培训个人的自我评价
2013/10/09 职场文书
文明青少年标兵事迹材料
2014/01/28 职场文书
学校食品安全责任书
2015/01/29 职场文书
入党积极分子党支部意见
2015/06/02 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Mysql数据库命令大全
2021/05/26 MySQL
使用Djongo模块在Django中使用MongoDB数据库
2021/06/20 Python