1. 程式人生 > 程式設計 >Spring MVC4.1伺服器端推送實現過程解析

Spring MVC4.1伺服器端推送實現過程解析

這篇文章主要介紹了Spring MVC4.1伺服器端推送實現過程解析,文中通過示例程式碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

伺服器端推送

  • SSE(server send event)是一種伺服器端向瀏覽器推送訊息的技術,而不是我們常規的瀏覽器像server請求然後響應;
  • 當我們需要使用server向瀏覽器主動推送資料的時候,請考慮使用該項技術,而不是考慮具有雙向通訊功能的websocket;
  • 以前我們用ajax輪詢server也能實現,伺服器負擔大;
  • sse原理是向server請求一次後,server會掛住請求不放(此時瀏覽器裡請求狀態是pending),等有資料後才返回給瀏覽器,然後再發起下一次請求,以此類推;
  • 所有主流瀏覽器均支援伺服器傳送事件,除了 Internet Explorer(6,7,8,9);

示例

伺服器推送控制器

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>

效果

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。