首页 > 编程语言 > 详细

05点睛Spring MVC 4.1-服务器端推送

时间:2019-11-28 15:59:19      阅读:106      评论:0      收藏:0      [点我收藏+]

 

转发:https://www.iteye.com/blog/wiselyman-2214626

5.1 服务器端推送

  • SSE(server send event)是一种服务器端向浏览器推送消息的技术,而不是我们常规的浏览器像server请求然后响应;
  • 当我们需要使用server向浏览器主动推送数据的时候,请考虑使用该项技术,而不是考虑具有双向通讯功能的websocket;
  • 以前我们用ajax轮询server也能实现,服务器负担大;
  • sse原理是向server请求一次后,server会挂住请求不放(此时浏览器里请求状态是pending),等有数据后才返回给浏览器,然后再发起下一次请求,以此类推;
  • 所有主流浏览器均支持服务器发送事件,除了 Internet Explorer(6,7,8,9);

5.2 示例

  • 服务器推送控制器
package com.wisely.web;

import java.util.Random;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class SSEController {
    //注意produces="text/event-stream"
    @RequestMapping(value="/push",produces="text/event-stream")
    public @ResponseBody String push(){
         Random r = new Random();
         try {
                 Thread.sleep(5000);
         } catch (InterruptedException e) {
                 e.printStackTrace();
         }
         return "data:Testing 1,2,3" + r.nextInt() +"\n\n";
    }
}
  • 页面代码
<div id="msg_from_server"></div>
<script type="text/javascript" src="<c:url value="/js/jquery.js" />"></script>
<script type="text/javascript">
if (!!window.EventSource) {
       var source = new EventSource(‘push‘); //为http://localhost:8080/testSpringMVC/push
       s=‘;
       source.addEventListener(‘message‘, function(e) {

           s+=e.data+"<br/>"
           $("#msg_from_server").html(s);

       });

       source.addEventListener(‘open‘, function(e) {
            console.log("连接打开.");
       }, false);

       source.addEventListener(‘error‘, function(e) {
            if (e.readyState == EventSource.CLOSED) {
               console.log("连接关闭");
            } else {
                console.log(e.readyState);    
            }
       }, false);
    } else {
            console.log("没有sse");
    }
</script>
  • 效果

技术分享图片

 

05点睛Spring MVC 4.1-服务器端推送

原文:https://www.cnblogs.com/Jeely/p/11950263.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!