精华内容
下载资源
问答
  • 服务器推送技术

    千次阅读 2018-11-04 10:07:37
    什么是服务器推送技术 推送技术是指通过客户端与服务器端建立长链接,客户端可以接收由服务器端不定时发送的消息。 解决方案 1.Ajax短轮询 2.Ajax长轮询 3.WebSocket 短轮询 Ajax短轮询:http 短轮询是 server 收到...

    什么是服务器推送技术

    推送技术是指通过客户端与服务器端建立长链接,客户端可以接收由服务器端不定时发送的消息。

    解决方案

    1.Ajax短轮询

    2.Ajax长轮询

    3.WebSocket

    短轮询

    Ajax短轮询:http 短轮询是 server 收到请求不管是否有数据到达都直接响应http请求;如果浏览器收到的数据为空,则隔一段时间,浏览器又会发送相同的http请求到server 以获取数据响应,就是用一个定时器不停的去网站上请求数据。

    		缺点:消息交互的实时性较低(server端到浏览器端的数据反馈效率低)。
    

    长轮询

    http 长轮询是server 收到请求后如果有数据,立刻响应请求;如果没有数据 就会 停留 一段时间,这段时间内,如果 server 请求的数据到达(如查询数据库或数据的逻辑处理完成),就会立刻响应;如果这段时间过后,还没有数据到达,则以空数据的形式响应http请求;若浏览器收到的数据为空,会再次发送同样的http请求到server。

    AJAX的长轮询

    1,DeferredResult:Springmvc的控制层接收用户的请求之后,采用异步处理,立即返回DeferedResult泛型对象,此时驱动控制层的容器主线程,可以处理更多的请求。
    2,Servlet3:也是异步处理。

    				缺点:server 没有数据到达时,http连接会停留一段时间,这会造成服务器资源浪费;
    

    SSE

    严格地说,HTTP 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。
    也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。
    SSE 就是利用这种机制,使用流信息向浏览器推送信息。它基于 HTTP 协议,目前除了 IE/Edge,其他浏览器都支持。
    SSE 与 WebSocket 作用相似,都是建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送信息。

    总体来说,WebSocket 更强大和灵活。因为它是全双工通道,可以双向通信;SSE是单向通道,只能服务器向浏览器发送,因为流信息本质上就是下载。如果浏览器向服务器发送信息,就变成了另一次 HTTP 请求。

    				SSE 也有自己的优点:
    					SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
    					SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。
    					SSE 默认支持断线重连,WebSocket 需要自己实现。
    					SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。
    					SSE 支持自定义发送的消息类型。
    					SSE 也是长连接	
    

    http长轮询和短轮询的异同

    1)相同点:当server 的数据不可达时,基于http长轮询和短轮询 的http请求,都会 停留一段时间;
    2)不同点:http长轮询是在服务器端的停留,而http 短轮询是在 浏览器端的停留;
    3)性能总结:从这里可以看出,不管是长轮询还是短轮询,都不太适用于客户端数量太多的情况,因为每个服务器所能承载的TCP连接数是有上限的,这种轮询很容易把连接数顶满;

    WebSocket通信

    什么是WebSocket

    WebSocket 是 html5 规范发布的新协议,和 http协议完全是两个不同的概念,或者说基本没关系;WebSocket协议和http协议的唯一联系点在于,WebSocket协议为了兼容现有浏览器的握手规范而采用了http协议中的握手规范以建立WebSocket连接,其客户端与服务器建立的是 持久连接。

    		WebSocket 解决了 HTTP 的几个难题:
    			1(http协议的被动性):采用 WebSocket 协议后,服务器可以主动推送消息给客户端;而不需要客户端以(长/短)轮询的方式发起http请求到server以获取数据更新反馈;这样一来,客户端只需要经过一次HTTP请求,就可以做到源源不断的信息传送了(在程序设计中,这种设计叫做回调,即:server端有信息了再来通知client端,而不是client端每次都傻乎乎地跑去轮询server端 是否有消息更新);
    			2(http协议的无状态性/健忘性):短轮询是每次http请求前都要建立连接,而长轮询是相邻几次请求前都要建立连接;http请求响应完成后,服务器就会断开连接,且把连接的信息全都忘记了;所以每次建立连接都要重新传输连接上下文(下面有补充),将 client 端的连接上下文来告诉server端;而WebSockct只需要一次HTTP握手,整个通讯过程是建立在一次连接(状态)中的,server端会一直推送消息更新反馈到客户端,直到客户端关闭请求,这样就无需客户端为发送消息而建立不必要的 tcp 连接 和 为了建立tcp连接而发送不必要的冗余的连接上下文消息;
    
    		特点:
    			1,HTML5中的协议,实现与客户端与服务器双向,基于消息的文本或二进制数据通信
    			2,适合于对数据的实时性要求比较强的场景,如通信、直播、共享桌面,特别适合于客户与服务频繁交互的情况下,如实			时共享、多人协作等平台。
    			3,采用新的协议,后端需要单独实现
    			4,客户端并不是所有浏览器都支持
    

    实现

    1,HTML5规范中的WebSocket API

    2,WebSocket的子协议STOMP。

    				STOMP(Simple Text Oriented Messaging Protocol):
    					1,简单(流)文本定向消息协议
    					2,STOMP协议的前身是TTMP协议(一个简单的基于文本的协议),专为消息中间件设计。是属于消息队列的一种协议, 和AMQP,JMS平级.它的简单性恰巧可以用于定义websocket的消息体格式.STOMP协议很多MQ都已支持,比如RabbitMq, ActiveMq。
    					3,生产者(发送消息)、消息代理、消费者(订阅然后收到消息)
    					4,STOMP是基于帧的协议
    

    SSE和WebSocket相比的优势

    1,最大的优势就是便利:不需要添加任何新组件,用任何你习惯的后端语言和框架就能继续使用。你不用为新建虚拟机、弄一个新的IP或新的端口号而劳神,就像在现有网站中新增一个页面那样简单。可以称为既存基础设施优势。

    2,SSE的第二个优势是服务端的简洁。相对而言,WebSocket则很复杂,不借助辅助类库基本搞不定。WebSocket能做的,SSE也能做,反之亦然,但在完成某些任务方面,它们各有千秋。WebSocket是一种更为复杂的服务端实现技术,但它是真正的双向传输技术,既能从服务端向客户端推送数据,也能从客户端向服务端推送数据。

    总结

    技术没有优劣之分,只有场景是否合适,在京东的支付完成之后的跳转的推送技术中,也是用的ajax段轮训的方式,原因是要用有限的资源来为千万级甚至上亿的用户提供服务,如果是用长连接,对于接入的服务器,比如说Nginx,是很大的压力,光是为用户维持这个长连接都需要成百上千的Nginx的服务器,这是很划不来的。因为对于京东这类购物网站来说,用户的浏览查询量是远远大于用户下单量的,京东需要注重的是服务更多的用户,而且相对于用户浏览页面的图片等等的流量而言,这点带宽浪费占比是很小的。所以我们看京东的付款后的实现,是用的短轮询机制,而且时长放大到了5秒。

    展开全文
  • HTML5服务器推送事件

    千次阅读 2015-09-28 17:46:11
    1.HTML5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实时推送数据到浏览器端。 2.传统的服务器端推送数据技术 WebSocket:WebSocket规范是HTML5中的一个...

    1.HTML5服务器推送事件介绍

    服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实时推送数据到浏览器端。

    2.传统的服务器端推送数据技术

    WebSocket:WebSocket规范是HTML5中的一个重要组成部分,已经被很多主流浏览器支持,也有不少基于WebSocket开发的应用。正如名称所表示的一样,WebSocket使用的是套接字连接,基于TCP协议。使用WebSocket之后,实际上在服务器端和浏览器之间建立一个套接字连接,可以进行双向的数据传输。WebSocket的功能是很强大的,使用起来也很灵活,可以适用于不同的场景。不过WebSocket技术也比较复杂,包括服务器端和浏览器端的实现都不同于一般的Web应用。


    Http协议:简易轮询,即浏览器端定时向服务器发出请求,来查询是否有数据更新,这种做法比较简单,可以在一定程度上解决问题。不过对于轮询的时间间隔需要进行仔细考虑。轮询的时间过长,会导致用户不能及时接收到更新的数据;轮询的间隔过短,会导致查询请求过多,增加服务器的负担。




    1.服务器代码头:

    header('Content-Type:text/event-stream');


    2.EventSource事件:

    事件                   描述

    onopen            服务器的链接被打开

    onmessage     接收消息

    onerror            错误发生


    github主页:https://github.com/chenyufeng1991  。欢迎大家访问!

    展开全文
  • 服务器推送技术 服务器推送技术干嘛用?就是让用户在使用网络应用的时候,不需要一遍又一遍的去手动刷新就可以及时获得更新的信息。大家平时在上各种视频网站时,对视频节目进行欢乐的吐槽和评论,会看到各种弹幕,...

    服务器推送技术

    服务器推送技术干嘛用?就是让用户在使用网络应用的时候,不需要一遍又一遍的去手动刷新就可以及时获得更新的信息。大家平时在上各种视频网站时,对视频节目进行欢乐的吐槽和评论,会看到各种弹幕,当然,他们是用flash技术实现的,对于我们没有用flash的应用,一样可以实现弹幕。又比如在股票网站,往往可以看到,各种股票信息的实时刷新,上面的这些都是基于服务器推送技术。

    Ajax短轮询

    Ajax短轮询就是用一个定时器不停的去网站上请求数据。

    在这里插入图片描述

    下面的代码实现浏览器页面实时显示服务器的当前时间。

    服务器端的实现如下:

    package com.morris.websocket.shortpoll;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.time.LocalDateTime;
    
    @Controller
    public class TimeController {
    
        @RequestMapping("getTime")
        @ResponseBody
        public String getTime() {
            return LocalDateTime.now().toString();
        }
    
    }
    

    html页面实现如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Show Time</title>
    </head>
    <body>
    当前时间为:<span id="timeSpan"></span>
    
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function showTime(){
            $.get("/getTime",function (data) {
                console.log(data);
                $("#timeSpan").html(data);
            })
        }
    
        setInterval(showTime, 1000);
    </script>
    </form>
    </body>
    </html>
    

    Comet

    基于HTTP长连接、无须在浏览器端安装插件的“服务器推”技术为“Comet”,comet有下面两种实现方式:

    • 基于AJAX的长轮询(long-polling)方式。
    • 基于长连接的服务器推模型 Server-sent-events(SSE)。

    基于AJAX的长轮询(long-polling)方式。

    服务器端实现长轮询可以使用异步任务,这里使用的是Spring MVC对Servlet3.0规范所支持的异步请求方式。

    在这里插入图片描述

    下面的代码实现服务器端向浏览器页面实时推送新闻。

    服务器端的实现如下:

    package com.morris.websocket.longpoll;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.Random;
    import java.util.concurrent.Callable;
    import java.util.concurrent.TimeUnit;
    
    @Controller
    public class PushNewsController {
    
        @RequestMapping("realTimeNews")
        @ResponseBody
        public Callable<String> realtimeNews() {
            Callable<String> callable = () -> {
                try {
                    TimeUnit.SECONDS.sleep(3);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                int index = new Random().nextInt(Const.NEWS.length);
                return Const.NEWS[index];
            };
            return callable;
        }
    
    }
    

    html页面实现如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>新闻推送</title>
    </head>
    <body>
    <h1>每日头条</h1>
    <div>
        <div>
            <h2>每日头条新闻实时看</h2>
            <div style="color:#F00"><b><p id="realTimeNews"></p></b></div>
        </div>
    </div>
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    
        longLoop();
    
        function longLoop() {
            $.get("/realTimeNews", function (data) {
                console.log(data);
                $("#realTimeNews").html(data);
                longLoop();
            })
    
        }
    </script>
    </body>
    </html>
    

    基于长连接的服务器推模型Server-sent-events(SSE)。

    严格地说,HTTP协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。

    本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。

    SSE就是利用这种机制,使用流信息向浏览器推送信息。它基于HTTP协议,目前除了IE/Edge,其他浏览器都支持。

    在这里插入图片描述

    下面的代码实现服务器端向浏览器页面实时推送贵金属最新价格。

    服务器端的实现如下:

    package com.morris.websocket.sse;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import javax.servlet.http.HttpServletResponse;
    import java.io.PrintWriter;
    import java.util.Random;
    
    @Controller
    public class NobleMetalController {
    
        @RequestMapping("needPrice")
        public void pushRight(HttpServletResponse response){
            response.setContentType("text/event-stream");
            response.setCharacterEncoding("utf-8");
            Random r = new Random();
            try {
                PrintWriter pw = response.getWriter();
                int i = 0;
                while(i<10){
                    if(pw.checkError()){
                        System.out.println("客户端断开连接");
                        return;
                    }
                    Thread.sleep(1000);
                    pw.write(makeResp(r));
                    pw.flush();
                    i++;
                }
                System.out.println("达到阈值,结束发送.......");
                pw.write("data:stop\n\n");
                pw.flush();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        /*业务方法,生成贵金属的实时价格*/
        private String makeResp(Random r){
            StringBuilder stringBuilder = new StringBuilder("");
            stringBuilder.append("retry:2000\n")
                    .append("data:")
                    .append(r.nextInt(100)+50+",")
                    .append(r.nextInt(40)+35)
                    .append("\n\n");
            return stringBuilder.toString();
        }
    }
    

    html页面实现如下:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>贵金属</title>
    </head>
    <body>
    <h1>贵金属</h1>
    <div>
        <div>
            <h2>贵金属列表</h2>
        </div>
        <div>
            <h2 id="hint"></h2>
        </div>
        <hr>
        <div>
            <div><p>黄金</p>
                <p id="c0" style="color:#F00"></p><b><p id="s0">历史价格:</p></b></div>
            <div><p>白银</p>
                <p id="c1" style="color:#F00"></p><b><p id="s1">历史价格:</p></b></div>
        </div>
        <hr>
    
    </div>
    <script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    
        function showPrice(index, data) {
            $("#c" + index).html("当前价格:" + data);
            var s = $("#s" + index).html();
            $("#s" + index).html(s + data + " ");
        }
    
        if (!!window.EventSource) {
            var source = new EventSource('/needPrice');
            source.onmessage = function (e) {
                var dataObj = e.data;
                var arr = dataObj.split(',');
                $.each(arr, function (i, item) {
                    showPrice(i, item);
                });
                $("#hint").html("");
            };
    
            source.onopen = function (e) {
                console.log("Connecting server!");
            };
    
            source.onerror = function () {
                console.log("error");
            };
    
        } else {
            $("#hint").html("您的浏览器不支持SSE!");
        }
    
    </script>
    </body>
    </html>
    

    各种服务器推送技术的比较

    短轮询 长轮询 SSE WebSocket
    浏览器支持度 最高 很高 中(IE和Edge均不支持)
    实时性 最低 较高 很高
    代码实现复杂度 最容易 较容易 容易
    连接性质 短连接 长连接 长连接
    适用 需要服务极大量或极小量的用户,实时性要求不高 准实时性的应用,比较关注浏览器的兼容性 实时,基本都是文本交互的应用

    应用场景

    服务器推送技术常用于二维码登录,二维码支付等场景。

    在这里插入图片描述

    淘宝登录用的什么?Ajax短轮询,这说明什么?这些技术并没有什么优劣之分,只有合不合适业务的问题。淘宝的痛点是什么?要用有限的资源来为千万级甚至上亿的用户提供服务,如果是用长连接,对于接入的服务器,比如说 Nginx,是很大的压力,光是为用户维持这个长连接都需要成百上千的Nginx的服务器,这是很划不来的。

    展开全文
  • 网络编程五-服务器推送技术

    万次阅读 2020-01-19 16:56:44
    一、服务器推送技术 1、服务器推送技术的兴起 2、应用场景 二、Ajax短轮询 1、定义 2、特点 三、Comet 3.1 AJAX 的长轮询 1、定义 2、特点 3.2 SSE 1、定义 2、特点 四、WebSocket通信 1、什么是...

    目录

    一、服务器推送技术

    1、服务器推送技术的兴起

    2、应用场景

    二、Ajax短轮询

    1、定义

    2、特点

    三、Comet

    3.1 AJAX 的长轮询

    1、定义

    2、特点

    3.2 SSE

    1、定义

    2、特点

    四、WebSocket通信

    1、什么是webSocket

    2、特点

    3、WebSocket通信握手

    4、WebSocket通信-STOMP协议

    5、WebSocket 与SSE的对比

    五、技术比较


    一、服务器推送技术

    1、服务器推送技术的兴起

    一下部分内容摘自百科

    随着AJAX技术的兴起,让广大开发人员又一次看到了使用浏览器来替代桌面应用的机会,并且这次机会非常大。AJAX将整个页面的刷新变成页面局部的刷新,并且数据的传送是以异步方式进行,这使得网络延迟带来的视觉差异将会消失。AJAX还利用DHTML和丰富的JavasSript语言来模拟桌面系统的各种事件和响应过程,以及平滑滚动和拖拽的效果。还不止这些,更有一些IT巨头(Google、Sun、Oracle等)提供了非常丰富的AJAX开发工具,使得开发和调试AJAX应用变得简单高效,并且开发的AJAX应用还可以跨越各种浏览器和操作系统。在这种情况下基于AJAX的Web应用迅速涌起,吞噬着原有桌面系统的份额。聊天工具、邮件阅读器、博客编辑器,甚至是Office办公软件和文字处理软件在浏览器中都有着美丽的外观和几乎可以与桌面系统媲美的交互界面。Google更是提出“有了浏览器和Google,就不需要微软”的口号和策略。在Ajax的世界中,除了传统的CAD设计软件和大型游戏软件等因为对系统硬件的苛刻需求,还离不开桌面系统以外,似乎其他所有的应用都可以变成Web应用了。

    但是,在浏览器中的AJAX应用中存在一个致命的缺陷无法满足传统桌面系统的需求。那就是“服务器发起的消息传递(Server-Initiated Message Delivery)”。在很多的应用当中,服务器软件需要向客户端主动发送消息或信息。因为服务器掌握着系统的主要资源,能够最先获得系统的状态变化和事件的发生。当这些变化发生的时候,服务器需要主动地向客户端实时地发送消息。例如股票的变化。在传统的桌面系统中,这种需求没有任何问题,因为客户端和服务器之间通常存在着持久的连接,这个连接可以双向传递各种数据。而基于HTTP协议的Web应用却不行。上节中也提到过,在Web世界中,服务器永远是被动地发送数据,前提是客户端必须先发送请求。浏览器其实并不知道服务器的信息什么时候会有改变,为了模拟实时的交流,或者不想错过某些信息,只能通过轮询(Polling)技术不断刷新页面来获得最新的数据。这种方式不但浪费服务器的资源,最重要的是每次建立(或关闭)新的HTTP连接都有一定的延迟,这种延迟使得频繁信息传递的应用无法忍受。于是就产生了“服务器推送技术”。

    2、应用场景

    服务器推送技术干嘛用?就是让用户在使用网络应用的时候,不需要一遍又一遍的去手动刷新就可以及时获得更新的信息。大家平时在上各种视频网站时,对视频节目进行欢乐的吐槽和评论,会看到各种弹幕,当然,他们是用flash技术实现的,对于我们没有用flash的应用,一样可以实现弹幕。又比如在股票网站,往往可以看到,各种股票信息的实时刷新,上面的这些都是基于服务器推送技术。

    一般实现服务推送技术有以下几种方式,Ajax短轮询,**Comet,WebSocket。**以下就重点介绍每个方式的实现。

    二、Ajax短轮询

    1、定义

    就是用一个定时器不停的去网站上请求数据。比如定义一个定时器,每3s请求一次。虽然实现简单,但问题也很明显,存在延迟时间。并且不断去请求服务器端给服务器端造成一定的压力

    setInterval(function() {
        $.ajax({
    	……………………
    });
    }, 3000);

     

    2、特点

    • 服务端基本不用改造
    • 服务器沉重压力和资源的浪费
    • 数据同步不及时

    三、Comet

    “服务器推”是一种很早就存在的技术,以前在实现上主要是通过客户端的套接口,或是服务器端的远程调用。因为浏览器技术的发展比较缓慢,没有为“服务器推”的实现提供很好的支持,在纯浏览器的应用中很难有一个完善的方案去实现“服务器推”并用于商业程序。,因为 AJAX 技术的普及,gmail等等在实现中使用了这些新技术;同时“服务器推”在现实应用中确实存在很多需求。称这种基于 HTTP长链接、无须在浏览器端安装插件的“服务器推”技术为“Comet”。他主要由两种实现。ajax的长轮询和SSE

    3.1 AJAX 的长轮询

    1、定义

    由客户端发起请求,但是服务端并不会立即返回,而是保持该链接。知道有新的数据更新的时候才返回响应,并关闭链接。客户端则处理完相应信息之后,再重新发送给服务器新的请求。

     

    实现方式

    ①Servlet3里的异步任务

    ②Spring的DeferedResult

    2、特点

    • 实时性好,性能较高
    • 长期占用链接,丧失了无状态高并发特点,并且服务器处理链接有限。当达到瓶颈时无法响应新的请求

    适用于股票和实时通讯系统

    3.2 SSE

    1、定义

    严格地说,HTTP 协议无法做到服务器主动推送信息。但是,有一种变通方法,就是服务器向客户端声明,接下来要发送的是流信息(streaming)。

    也就是说,发送的不是一次性的数据包,而是一个数据流,会连续不断地发送过来。这时,客户端不会关闭连接,会一直等着服务器发过来的新的数据流,视频播放就是这样的例子。本质上,这种通信就是以流信息的方式,完成一次用时很长的下载。

    SSE 就是利用这种机制,使用流信息向浏览器推送信息。它基于 HTTP 协议,目前除了 IE/Edge,其他浏览器都支持。

    2、特点

    • SSE 使用 HTTP 协议,现有的服务器软件都支持。WebSocket 是一个独立协议。
    • SSE 属于轻量级,使用简单;WebSocket 协议相对复杂。
    • SSE 默认支持断线重连,WebSocket 需要自己实现。
    • SSE 一般只用来传送文本,二进制数据需要编码后传送,WebSocket 默认支持传送二进制数据。
    • SSE 支持自定义发送的消息类型。

    3、SSE的使用规范

    HTTP 头信息

    服务器向浏览器发送的 SSE 数据,必须是 UTF-8 编码的文本,具有如下的 HTTP 头信息。

    • Content-Type: text/event-stream
    • Cache-Control: no-cache
    • Connection: keep-alive

    上面三行之中,第一行的Content-Type必须指定 MIME 类型为event-steam。

    消息格式

    每一次发送的信息,由若干个message组成,每个message之间用\n\n分隔。每个message内部由若干行组成,每一行都是如下格式。

    [field]: value\n

    上面的field可以取四个值。

    字段 含义 举例
    data 数据内容

    如果数据很长,可以分成多行,最后一行用\n\n结尾,前面行都用\n结尾,如发送 JSON 数据的例子

    data: {\n

    data: "foo": "bar",\n

    data: "baz", 555\n

    data: }\n\n

    event 自定义的事件类型,默认是message事件。浏览器可以用addEventListener()监听该事件。

    event: foo\n

    data: a foo event\n\n

    标示事件名字是foo,触发浏览器的foo事件;

    id 数据标识符用id字段表示,相当于每一条数据的编号 浏览器用lastEventId属性读取这个值。一旦连接断线,浏览器会发送一个 HTTP 头,里面包含一个特殊的Last-Event-ID头信息,将这个值发送回来,用来帮助服务器端重建连接。因此,这个头信息可以被视为一种同步机制。id: msg1\n
    retry 服务器可以用retry字段,指定浏览器重新发起连接的时间间隔。

    两种情况会导致浏览器重新发起连接:一种是时间间隔到期,二是由于网络错误等原因,导致连接出错。

    retry: 10000\n

    四、WebSocket通信

    1、什么是webSocket

    WebSocket ——一种在2011 年被互联网工程任务组(IETF)标准化的协议。

    WebSocket解决了一个长期存在的问题:既然底层的协议(HTTP)是一个请求/响应模式的交互序列,那么如何实时地发布信息呢?AJAX提供了一定程度上的改善,但是数据流仍然是由客户端所发送的请求驱动的。还有其他的一些或多或少的取巧方式(Comet).

    WebSocket规范以及它的实现代表了对一种更加有效的解决方案的尝试。简单地说,WebSocket提供了“在一个单个的TCP连接上提供双向的通信,结合WebSocket API,它为网页和远程服务器之间的双向通信提供了一种替代HTTP轮询的方案"。但是最终它们仍然属于扩展性受限的变通之法。也就是说,WebSocket 在客户端和服务器之间提供了真正的双向数据交换。WebSocket 连接允许客户端和服务器之间进行全双工通信,以便任一方都可以通过建立的连接将数据推送到另一端。WebSocket 只需要建立一次连接,就可以一直保持连接状态。这相比于轮询方式的不停建立连接显然效率要大大提高。

    Web浏览器和服务器都必须实现 WebSockets 协议来建立和维护连接。

    2、特点

    • HTML5中的协议,实现与客户端与服务器双向,基于消息的文本或二进制数据通信
    • 适合于对数据的实时性要求比较强的场景,如通信、直播、共享桌面,特别适合于客户与服务频繁交互的情况下,如实时共享、多人协作等平台。
    • 采用新的协议,后端需要单独实现
    • 客户端并不是所有浏览器都支持

    3、WebSocket通信握手

    Websocket借用了HTTP的协议来完成一部分握手

    客户端的请求

    Connection 必须设置 Upgrade,表示客户端希望连接升级。

    Upgrade 字段必须设置 Websocket,表示希望升级到 Websocket 协议。

    Sec-WebSocket-Key 是随机的字符串,服务器端会用这些数据来构造出一个 SHA-1 的信息摘要。把 “Sec-WebSocket-Key” 加上一个特殊字符串 “258EAFA5-E914-47DA-95CA-C5AB0DC85B11”,然后计算 SHA-1 摘要,之后进行 BASE-64 编码,将结果做为 “Sec-WebSocket-Accept” 头的值,返回给客户端。如此操作,可以尽量避免普通 HTTP 请求被误认为 Websocket 协议。

    Sec-WebSocket-Version 表示支持的 Websocket 版本。RFC6455 要求使用的版本是 13,之前草案的版本均应当弃用。

    服务器端

     

    Upgrade: websocket

    Connection: Upgrade

    依然是固定的,告诉客户端即将升级的是 Websocket 协议,而不是mozillasocket,lurnarsocket或者shitsocket。

    然后, Sec-WebSocket-Accept 这个则是经过服务器确认,并且加密过后的 Sec-WebSocket-Key 。

    后面的, Sec-WebSocket-Protocol 则是表示最终使用的协议。

    至此,HTTP已经完成它所有工作了,接下来就是完全按照Websocket协议进行

    4、WebSocket通信-STOMP协议

    WebSocket是个规范,在实际的实现中有HTML5规范中的WebSocket API、WebSocket的子协议STOMP。

    STOMP(Simple Text Oriented Messaging Protocol)

    • 简单(流)文本定向消息协议
    • STOMP协议的前身是TTMP协议(一个简单的基于文本的协议),专为消息中间件设计。是属于消息队列的一种协议, 和AMQP, JMS平级. 它的简单性恰巧可以用于定义websocket的消息体格式. STOMP协议很多MQ都已支持, 比如RabbitMq, ActiveMq。
    • 生产者(发送消息)、消息代理、消费者(订阅然后收到消息)
    • STOMP是基于帧的协议

    5、WebSocket 与SSE的对比

    WebSocket 与 SSE 作用相似,都是建立浏览器与服务器之间的通信渠道,然后服务器向浏览器推送信息。

    SSE和WebSocket相比的优势。最大的优势就是便利:不需要添加任何新组件,用任何你习惯的后端语言和框架就能继续使用。你不用为新建虚拟机、弄一个新的IP或新的端口号而劳神,就像在现有网站中新增一个页面那样简单。可以称为既存基础设施优势。

    总体来说,WebSocket 更强大和灵活。因为它是全双工通道,可以双向通信;SSE 是单向通道,只能服务器向浏览器发送,因为流信息本质上就是下载。如果浏览器向服务器发送信息,就变成了另一次 HTTP 请求。

    五、技术比较

     

    1、短轮询

    2、长轮询

    3SSE

    4WebSocket

    浏览器支持度

    最高

    很高

    中(IE和Edge均不支持)

    中(早期的浏览器不支持)

    实时性

    最低

    较高

    很高

    很高

    代码实现复杂度

    最容易

    较容易

    容易

    最复杂

    连接性质

    短连接

    长连接

    长连接

     

    长连接

     

    适用

    需要服务极大量或极小量的用户,实时性要求不高

    准实时性的应用,比较关注浏览器的兼容性

    实时,基本都是文本交互的应用

    实时,需要支持多样化的用户数据类型的应用或者是原生程序

    当然技术没有好坏之分,具体还要看使用场景。就比如京东用的什么?Ajax短轮询。京东的痛点是什么?要用有限的资源来为千万级甚至上亿的用户提供服务,如果是用长连接,对于接入的服务器,比如说Nginx,是很大的压力,光是为用户维持这个长连接都需要成百上千的Nginx的服务器,这是很划不来的。因为对于京东这类购物网站来说,用户的浏览查询量是远远大于用户下单量的,京东需要注重的是服务更多的用户,而且相对于用户浏览页面的图片等等的流量而言,这点带宽浪费占比是很小的。所以我们看京东的付款后的实现,是用的短轮询机制,而且时长放大到了5秒。希望大家了解相关的技术,并渗透到具体业务场景中,选择最合适的方案。

    展开全文
  • OneNET Http推送+java+ngrok实现OneNET向第三方服务器推送数据原理数据流模版第三方服务器搭建HTTP推送 原理 OneNET的HTTP推送服务可以将OneNET的数据以HTTP协议的方式向第三方服务器推送,这里第三方服务器就是...
  • 服务器推送消息方法总结及实现(java)

    万次阅读 多人点赞 2018-10-24 11:00:26
    服务器推送消息方法总结及实现(java) 最近在进行web开发时,有用到服务端推送消息这个功能,相信大家在平常开发时,也经常会有这种需求。本文对常用的几种服务器推送消息方法进行整理和总结,并实现使用流的方式推送...
  • gin HTTP/2 服务器推送

    千次阅读 热门讨论 2020-11-01 19:47:26
    gin HTTP/2 服务器推送 http.Pusher只支持Go 1.8或更高版本,有关详细信息,请参阅golang博客 package main import ( "html/template" "log" "github.com/gin-gonic/gin" ) var html = template.Must...
  • 【demo记录】极光推送(android app访问服务器,服务器推送信息到新app)
  • 服务器推送技术学习

    2015-04-12 12:17:16
    服务器推送技术概观: 服务器推送有以下几种技术:(参考) A、使用插件的 (1)、Flash XMLSocket(感觉上是与xmlhttp的一样,不过是flash提供一个与后台交互的xmlhttp),不过需要浏览器安装flash播放器,而且...
  • 服务器推送技术之——SSE

    千次阅读 2018-08-18 14:58:02
    服务器推送技术在日常开发中较为常用。 SSE:Server send Event:服务端发送事件。 本项目推送技术是基于:当客户端向服务端发送请求,服务端会抓住这个请求不放,等有数据更新的时候才返回给客户端,当客户端...
  • Web服务器推送技术

    2013-08-25 20:15:57
    服务器推送(Server Push) 推送技术的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的连接。当服务器需要再次发送一批数据时,浏览器显示数据...
  • COMET 和 WebSocket 技术来说,服务器推送事件的使用更简单,对服务器端的改动也比较小。对于某些类型的应用来说,服务器推送事件是最佳的选择。本文对服务器推送技术进行了详细的介绍,包含浏览器端和服务器端的...
  • 闪拍系统中,有个需求是关于服务器推送的方案。即:每秒刷新1次拍卖相关的信息(价格、出价时间、出价人等)。如何设计这个架构?(可以参考:传统轮询,ajax轮询,长连接,长轮询,WebSocket等技术). 要求: ...
  • 一、Comet:基于HTTP长连接的服务器推送技术 方法1:// 前端隔一段时间发一次ajax,但是请求很昂贵,所以应该交给服务器来做 方法2: index.html<meta charset="utf-8"/> <!-- 防止乱码 --> ...
  • 服务器推送技术和 Bayeux 协议简介 服务器推送技术的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的连接。当服务器需要再次发送一批数据时,...
  • 服务器推送技术Server Push详解

    千次阅读 2012-07-31 12:13:58
    服务器推送技术(Server Push)是最近Web技术中最热门的一个流行术语,它的别名叫Comet(彗星)。它是继AJAX之后又一个倍受追捧的Web技术。服务器推送技术最近的流行与AJAX有着密切的关系。本文详细介绍了服务器推送技术...
  • 服务器推送消息SSE以及springmvc后台实现例子

    千次阅读 热门讨论 2018-02-01 10:45:13
    SSE ( Server-sent Events )是 WebSocket 的一种轻量代替方案,使用 HTTP 协议,严格地说,HTTP 协议是没有办法做服务器推送的,但是当服务器向客户端声明接下来要发送流信息时,客户端就会保持连接打开,SSE ...
  • 1. 关于服务器推送 服务器推送(Server Push) 推送技术的基础思想是将浏览器主动查询信息改为服务器主动发送信息。服务器发送一批数据,浏览器显示这些数据,同时保证与服务器的连接。当服务器需要再次发送一批数据...
  • ASP signalR简单服务器推送功能

    千次阅读 2016-01-15 10:59:50
    此文章简单清楚的实现了由后端服务器推送消息给前端的实例,不足之处,欢迎探讨!推送功能其实很简单, 跟着下面步骤走! 1. 必须在 .net4.5 环境下 (其他没试过,可以实现,但复杂) 2. 在工具选项中-NuGet程序包...
  • html5服务器推送技术

    千次阅读 2012-02-06 15:24:09
    随着html5的兴起,现在应用html5的服务器推送技术Server-Sent Events可以实现由服务器端直接推送信息给客户端。  客户端接收信息页面a.html:(客户端打开该页面即可接收来自服务器端推送的消息,如果a页面与...
  • java服务器推送消息技术

    千次阅读 2015-03-18 11:01:49
    其实有很多种方式实现服务器推送,它们各有各的优缺点: 1.传统轮询:此方法是利用 HTML 里面 meta 标签的刷新功能,在一定时间间隔后进行页面的转载,以此循环往复。它的最大缺点就是页面刷性给人带来的体验很差,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 20,182
精华内容 8,072
关键字:

服务器推送