文档章节

从web实时通信讲H5 WebSocket

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

通常我们打开一个浏览器访问网页时,都会向页面所在的服务器发送一个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
博文 41
码字总数 3160
作品 0
运城
WebSocket 是什么原理?为什么可以实现持久连接?

作者:腾讯云技术社区 众所周知,Web应用的通信过程通常是客户端通过浏览器发出一个请求,服务器端接收请求后进行处理并返回结果给客户端,客户端浏览器将信息呈现。这种机制对于信息变化不是...

xiaogong1688
06/29
0
0
spring websocket 和socketjs实现单聊群聊,广播的消息推送详解

spring websocket 和socketjs实现单聊群聊,广播的消息推送详解 WebSocket简单介绍 随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了。近年来,随着HTML5的诞生,WebSo...

浅色夏墨
08/17
0
0
漫扯:从polling到Websocket

Http被设计成了一个单向的通信的协议,即客户端发起一个request,然后服务器回应一个response。这让服务器很为恼火:我特么才是老大,我居然不能给小弟发消息。。。 轮询   老大发火了,小...

i33
2014/08/01
0
0
在vue中使用SockJS实现webSocket通信

最近接到一个业务需求,需要做一个聊天信息的实时展示的界面,这就需要和服务器端建立webSocket连接,从而实现数据的实时获取和视图的实时刷新.在此将我的实现记录下来,希望可以给有同样需求的人...

慢思考快行动
08/28
0
0
spring boot websocket stomp 实现广播通信和一对一通信聊天

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

ejiyuan
07/11
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【大福利】极客时间专栏返现二维码大汇总

我已经购买了如下专栏,大家通过我的二维码你可以获得一定额度的返现! 然后,再给大家来个福利,只要你通过我的二维码购买,并且关注了【飞鱼说编程】公众号,可以加我微信或者私聊我,我再...

飞鱼说编程
今天
1
0
Spring5对比Spring3.2源码之容器的基本实现

最近看了《Spring源码深度解析》,该书是基于Spring3.2版本的,其中关于第二章容器的基本实现部分,目前spring5的实现方式已有较大改变。 Spring3.2的实现: public void testSimpleLoad(){...

Ilike_Java
今天
1
0
【王阳明心学语录】-001

1.“破山中贼易,破心中贼难。” 2.“夫万事万物之理不外于吾心。” 3.“心即理也。”“心外无理,心外无物,心外无事。” 4.“人心之得其正者即道心;道心之失其正者即人心。” 5.“无...

卯金刀GG
今天
2
0
OSChina 周三乱弹 —— 我们无法成为野兽

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ _刚刚好: 霸王洗发水这波很骚 手机党少年们想听歌,请使劲儿戳(这里) hahahahahahh @嘻酱:居然忘了喝水。 让你喝可乐的话, 你准忘不了...

小小编辑
今天
9
0
vm GC 日志 配置及查看

-XX:+PrintGCDetails 打印 gc 日志 -XX:+PrintTenuringDistribution 监控晋升分布 -XX:+PrintGCTimeStamps 包含时间戳 -XX:+printGCDateStamps 包含时间 -Xloggc:<filename> 可以将数据保存为......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部