当前位置:首页 > 日记 > 正文

socket.io学习教程之基础介绍(一)

socket.io学习教程之基础介绍(一)

前言

Web端与服务器间的实时数据传输的是一个很重要的需求,但最早只能通过AJAX轮询询实现。在WebSocket标准没有推出之前,AJAX轮询是唯一可行的方式(通过Flash浏览器也可以,但这里不做讨论)。AJAX轮询原理是设置定时器,定时通过AJAX同步服务器数据。这种方式存在延时且对服务端造成很大负载。直到2011年,IETF才标准化WebSocket——一种基于TCP套接字进行收发数据的协议。现如今主流浏览器均已支持WebSocket。

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轮询,功能完备,设计优雅,是开发实时双向通讯的不二手段。

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对的支持。

相关文章

Excel2007中找回未保存文档的处理

Excel2007中找回未保存文档的处理

文档,步骤,处理方法,电脑软件,strong,  如果恢复在误操作或断电、死机等特殊原因导致没有及时保存的excel表格数据信息情况下,今天,小编就教大家在Excel2007中找回未保存文档的处理方法。Excel2007中找回未保存文档的处理步骤打开一个excel…

在PS里制作一把可爱又漂亮的钥匙

在PS里制作一把可爱又漂亮的钥匙

钥匙,漂亮,可爱,电脑软件,PS,我们每天都会用到钥匙,那我们不防用PS做一把又漂亮又可爱的钥匙吧,下面为大家介绍具体操作步骤,一起来学习吧!步骤:1、新建一个文档,并新建图层一,用钢笔工具画出一个心形,并填充为蓝色。2、在图层一上制作一个小的心形…

[js高手之路]图解javascript的原型

[js高手之路]图解javascript的原型

原型链,对象,原型,之路,实例,我们通过原型方式,解决了多个实例的方法共享问题,接下来,我们就来搞清楚原型(prototype),原型链的来龙去脉。function CreateObj(uName) { this.userName = uName; } CreateObj.prototype.showUserName = funct…

Vue-resource拦截器判断token失效

Vue-resource拦截器判断token失效

失效,拦截器,跳转,实例,电脑软件,在拦截器中设置全局的token判断,意味着每次http请求都会校验token,与后台约定好的token过期返回码可以自定义跳转路径;var token = window.localStorage.getItem("token");Vue.http.interceptors.push(funct…

微信小程序 选项卡的简单实例

微信小程序 选项卡的简单实例

简单实例,选项卡,程序,电脑软件,微信小,微信小程序 选项卡的简单实例看下效果 代码:home.wxml<!--pages/home/home.wxml--><view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0 ? 'on' : ''}}" data-current…

PHP网站自动化配置的实现方法 | 必

PHP网站自动化配置的实现方法 | 必

方法,网站,配置,必看,电脑软件,一直都在用yii2做项目,有在用自动化配置,但是没有自己去配置过。中午没事去看了下yii的初始化代码,发现都是php而已!yii2初始化项目代码所以,我们做项目肯定是可以用php做的,于是我新建了个文件夹,名为autoConfig,里…

ASP.NET调用WebService服务的方法

ASP.NET调用WebService服务的方法

方法,服务,调用,详解,电脑软件,本文实例讲述了ASP.NET调用WebService服务的方法。分享给大家供大家参考,具体如下:一、WebService:WebService是以独立于平台的方式,通过标准的Web协议,可以由程序访问的应用程序逻辑单元。(1)应用程序逻辑单元:web服…

AI怎么做卡通字 AI制作可爱立体卡

AI怎么做卡通字 AI制作可爱立体卡

教程,卡通,怎么做,可爱,电脑软件,效果图:主要过程:12 3 4 5 阅读全文1 23 4 5 阅读全文1 2 34 5 阅读全文1 2 3 45 阅读全文教程结束,以上就是AI怎么做卡通字 AI制作可爱立体卡通字教程的全部内容,希望大家喜欢!相关教程推荐:AI打造漂亮可爱…

PS合成星空下的女孩靠在大猫怀里阅

PS合成星空下的女孩靠在大猫怀里阅

靠在,怀里,场景,星空,女孩,效果图非常奇幻,用到的素材不多,不过在合成的时候要注意好光影的处理,尤其是加入路灯后,要根据光源位置处理好素材的受光。最终效果1、新建1800px * 1228px,分辨率为150px文件。 2、把素材拖到文档,调整合适的位置,创建…

ppt2007中文版怎么设置无边界打印

ppt2007中文版怎么设置无边界打印

边界,设置,中文版,技巧,电脑软件,  在打印之前,如果没有选择合适的文档打印边界,会导致打印出的文档非常难看,那么要怎么设置无边界打印呢?下面小编马上就告诉大家 ppt2007设置无边界打印的方法,希望看完本教程的朋友都能学会并运用起来。pp…

ps怎么设计一款热气球矢量图素材?

ps怎么设计一款热气球矢量图素材?

矢量图,热气球,素材,电脑软件,ps,想要自己谁及一款热气球矢量图,该怎么设计呢?下面我们就来看看使用ps设计的方法。软件名称:Adobe Photoshop 8.0 中文完整绿色破解版软件大小:150.1MB更新时间:2015-11-041、气球的形状就是由圆形变化而来的,我们…

word2013中插入特殊符号的两种技巧

word2013中插入特殊符号的两种技巧

特殊符号,两种,技巧,电脑软件,  有时候,我们编辑了一篇文章后,希望能够添加一些特殊符号,使得文章变得更加的丰富多彩,那么特殊符号怎么插入到文章中呢?接下来就由小编给大家分享下word2013中插入特殊符号的技巧,希望能帮助到您。插入特殊符号…