文档章节

从web实时通信讲H5 WebSocket

Code辉
 Code辉
发布于 09/25 11:54
字数 1671
阅读 12
收藏 3

通常我们打开一个浏览器访问网页时,都会向页面所在的服务器发送一个HTTP请求,然后web服务器确认请求并向浏览器做出响应。简单的说,就是一个请求对应的一个响应。然而这种方法对许多的应用场景都会使服务器的HTTP请求变得臃肿,甚至崩溃。比如:对于股价、新闻每日推送、好友聊天信息收发等情况,如果每次都是客户端发送HTTP请求给服务器来获取相应数据,那么用户就需要每次都对页面进行刷新从而来获取最新的消息。相信这样的网页用户也不会喜欢

前期实时通信解决方式

1> HTTP轮询 

    1.定义:轮询是一种定时性的同步调用,客户端想服务器发送请求查看是否有可用的新数据。请求以固定的时间间隔发出,不管是否有信息,客户端都会得到响应数据:如果有可用信息,服务器就会将它们返回给客户端;如果没有可用信息,服务器就会返回一个拒绝响应,客户端接受到这种响应时就可以关闭连接。轮询的本质上就是推迟完成HTTP响应,向客户端提交信息

    2.适用场景:在知道信息交互的时间间隔的情况下,使用它是一个好的办法,然而大多数的情况下,我们都不知道信息交付的时间间隔,我们不知道用户什么时候发数据,新闻什么时候更新等等..

    3.缺陷:使用HTTP轮询方式需要服务器有很快处理速度和资源,而且发送的http请求也很多

2> 长轮询

    1.定义:客户端向服务器端请求信息,并在设定的时间内打开一个连接。服务器如果没有信息推送,那么请求就会一直打开,知道服务器响应数据或者设定的时间用完为止。当请求关闭时,客户端又可以重新向服务器发送请求信息。长轮询是一种阻塞模型,类似于打电话,没有人接就不挂电话,知道拨打电话时长超过限制或者对方接了。长轮询也称为Comet或者反向AJAX,长轮询延长HTTP响应的完成时间,直到服务器响应数据或者设定时间用完,这种技术通常称为挂起GET或者搁置POST

    2.缺陷:当信息量很大时,长轮询的性能相较于传统的通信而言并没有明显的优势,因为客户端必须繁重得重连服务器来获取新信息。并且长轮询缺乏标准实现。而且长轮询需要有很高的并发能力即同时接待多个客户的能力

3> 流化技术 

    1.定义:在流化技术中,客户端发送一个请求,服务器发送并维护一个持续更新和保持打开(可以指定时间段,也可以设置为无限)的开放响应,每当服务器有需要交付给客户端的信息时,它就更新响应

    2.缺陷:流化技术中的服务器从不发出完成HTTP响应的请求,从而使连接一直保持打开状态。这种情况下,代理和防火墙可能会缓存HTTP响应,导致信息交付的延迟时间增加,因此,大多数的流化测试对于存在防火墙和代理的网络都是不友好的

WebSocket

1.定义:WebSocket是一种自然的全双工、双向、单套接字连接。通过使用WebSocket,客户端发送的即时HTTP请求变成了打开WebSocket的单一请求,并且这一请求式连接会一直重用,知道用户关闭。

2.优势:WebSocket明显减少了延迟时间,因为只要建立起WebSocket连接,服务器就可以在消息可用时发送他们,客户端和服务器连接全过程都只发出一个请求,建立一个连接,服务器不需要等待来自客户端的HTTP请求,同时,客户端也可以在任何时候向服务器发送消息

WebSocket与轮询方式发送请求的方式

WebSocket测试小实例 

// 新建js文件 hellows.js 
<html> 
  <head> 
    <title>hello websocket</title> 
    <meta charset='UTF-8' /> 
  </head> 
  <body> 
    <input type="button" id='test' value='点我测试' /> 
    <!--引入JQuery文件简化DOM操作(其实就是懒~)--> 
    <script src="JS/jquery.min.js"></script> 
    <script>
            $(function(){
                //websocket测试服务器
                var url = "ws://echo.websocket.org/echo";
                var ws = null;
                function createws(){
                    if('WebSocket' in window)
                        ws = new WebSocket(url);
                    else if('MOzWebSocket' in window)
                        ws = new MozWebSocket(url);
                    else
                        console.log("浏览器太旧,不支持");
                }
                function btnfun(){
                    createws();
                    //成功建立WebSocket连接时触发onopen事件,通常客户端发送数据都是放在open事件里面
                    ws.onopen = function(){
                        console.log("connected");
                        ws.send("hello world");
                    };
                    //接受服务器响应数据时触发onmessage事件
                    ws.onmessage = function(event){
                        console.log("receive message:"+event.data);
                        //关闭websocket连接
                        ws.close(999,"close normal");
                    };
                    //服务器处理异常,通常在服务器里try-catch发生异常时或者连接异常时触发onerror事件
                    ws.onerror = function(err){
                        console.log("error: "+err);
                        ws.close(1000,"close after error");
                    };
                    //websocket连接关闭时触发onclose事件
                    ws.onclose = function(event){
                        console.log("close reason: "+event.reason);
                    };
                };
                //为button绑定事件
                $("#test").click($.fn.btnfun);
            });
        </script> </body> </html>

浏览器打开该页面,打开浏览器的控制台,然后点击里面的按钮将会出现一系列我们在里面设置的测试输出数据则代表websocket测试成功了。如果console控制台输出的是“浏览器太旧,不支持”,就表示当前所使用的浏览器版本太旧,虽然目前所有的主流浏览器的最新版本都包含了对WebSocket API以及其协议的支持,但是还是有一些在用的旧版本的浏览器没有这方面的支持,因此想要获得WebSocket的支持可以去下载新版本或者主流的浏览器,也可以研究变通或者模拟策略来自己模拟实现WebSocket~~ 

本文转载自:https://blog.csdn.net/qq_27905183/article/details/70738141

共有 人打赏支持
Code辉
粉丝 0
博文 58
码字总数 5973
作品 0
运城
私信 提问
WebSocket是时候展现你优秀的一面了

在工作中我们开发接触最多的协议莫过于HTTP协议了,近些年H5的很多API和技术已经如雨后春笋般开始渐渐发扬光大了,今天我们就来一起讨论下其中的一个比较有意思的API,WebSocket 首先,在介绍...

chenhongdong
10/22
0
0
常见的Web实时消息交互方式和SignalR

原文:常见的Web实时消息交互方式和SignalR 标签: WebSocket SignalR 前言 1. Web消息交互技术 1.1 常见技术 1.2 WebSocket介绍 1.3 WebSocket示例 2. Signal 2.1 SignalR是什么 2.2 默认传输...

杰克.陈
06/08
0
0
漫谈 polling 和 Websocket

原文出处: whthomas的博客(@whthomas93) Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response。这让服务器很为恼火:我特么才是老大,我居然不能给...

oschina
2014/06/28
4.6K
29
websocket与node.js的完美结合

本文为原创文章,出自http://cnodejs.org,转载请注明出处和作者 作者:kongwu 原文:http://cnodejs.org/blog/?p=273 之所以写下此文,是我觉得越是简单的技术往往能发挥越重要的作用,随着...

红薯
2011/03/20
9.6K
2
spring boot websocket stomp 实现广播通信和一对一通信聊天

一、前言 玩.net的时候,在asp.net下有一个叫 SignalR 的框架,可以在ASP .NET的Web项目中实现实时通信。刚接触java寻找先关替代品,发现 java 体系中有一套基于stomp协议的websocket通信的框...

ejiyuan
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Java程序员可知为何公司宁花25K重新招人,也不花20K留住老员工?

身在职场,经常会暗自打听同事工资,尤其是得知身边新入职同事的工资居然比自己高,还高出一大截时,心里自然很不平衡,一心想要离职。 那么,为什么公司宁愿花高价招聘新员工也不愿意给老员...

Java填坑路
1分钟前
0
0
阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量

2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支...

阿里云云栖社区
5分钟前
0
0
【windows 找不到“\\192.168.X.X”,请检查拼写是否正确】错误&139端口和445端口区别

今天像往常一样,通过共享盘访问其他主机时,却出现如题的错误,百思不得其解,毕竟没有改动什么配置啊,地址也没输错啊。 然后就在网上看到了一篇博客,才想起来上周末因为考虑到安全问题,...

fang_faye
5分钟前
0
0
示例Express中路由规则及获取请求参数

本次给大家分享一篇基于express中路由规则及获取请求参数的方法,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 express中常见的...

前端攻城小牛
9分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部