天天看點

Server-sent-even HTML5推送事件監聽 - time,

目前用戶端(浏覽器)和服務端互動大緻有以下幾種方式:

1.form表單送出方式,适合通路量不大,對使用者體驗要求不高的web系統開發,或者頁面整體重新整理無傷大雅的場合,通信方向是用戶端送出給服務端,是用戶端主動發起;

2.Ajax方式,特點是使用者體驗好,無需頁面整體重新整理,對伺服器壓力也小,有利于用戶端和服務端的解耦,也是目前廣為使用的一種用戶端服務端互動方式,它也是通過用戶端發起請求,服務端接受處理,通信方向和form表單相同;

3.server-sent-event,它是服務端主動向用戶端(浏覽器)發送資料,用戶端監聽并接受,然後處理,通信方向也是單向的,但是和上面兩種相反,是服務端發起,用戶端接受,但是其應用層協定還是基于http的。

4.web socket,這是将以前服務端通信的套接字原理實作在了浏覽器上,使得浏覽器和服務端可以互相發送消息,通信方向是雙向的,隻要連接配接一建立,雙方都可以向對方發送資料,無需哪一方先來後來,應用層協定基于WS協定。(這個之前沒怎麼太深入了解過,隻知道有這樣的技術)

這裡主要實作的是第三種方式,即服務端推送事件,因為是HTML5的新技術是以在很多老版的浏覽器中(如IE6-IE8)還不支援,是以應用還不夠廣泛.直接上代碼

JS部分代碼:

if(typeof(EventSource)!=="undefined")

{

var source=new EventSource("請求位址");

  source.onopen = function(){

}

  source.onmessage=function(event) {

    var Str=event.data;

    console.info(Str);

};

  }else{

    console.info("浏覽器暫不支援推送事件...");

}

代碼構造一個eventSource對象,指向一個背景Controller方法,這個對象是HTML5中的服務端推送事件API封裝對象,然後添加onmessage事件,

用來監聽服務端發送過來的消息,服務端一有消息發送,就會執行這個事件的回調函數,

Java部分代碼:

/**

* Html5推送事件

*/

@RequestMapping(value={"請求方法名"},method = { RequestMethod.GET })

@ResponseBody

public void XXX(HttpServletResponse response,HttpServletRequest request){

      OutputStream bos = null;

   try {

        String result = "data:"+"所需要傳遞的參數"+"\n\n";

       //聲明浏覽器在連接配接斷開之後進行再次連接配接之前的等待時間 3秒

        String retry = "retry:"+3000+"\n\n";

        //事件的辨別符

        String id="id:100\n\n";

      //最後一次接收到的事件的辨別符

      String last = request.getHeader("Last-Event-ID");

      bos = new BufferedOutputStream(response.getOutputStream());

      response.setContentType("text/event-stream");

      bos.write(result.getBytes());

      bos.write(retry.getBytes());

      bos.write(id.getBytes());

      bos.flush();

      } catch (IOException e) {

         e.printStackTrace();

  }finally{

   try {

    bos.close();

  } catch (IOException e) {

    e.printStackTrace();

    }

  }

}

通過這種事件推送技術可以實作由伺服器一直與前端頁面保持通信并傳遞所需要的資料,而前端頁面可根據資料對顯示内容作出即時響應,友善使用者的操作.如果使用AJAX固定SetTime向背景

發送請求,這樣會影響的處理時間和效率,而事件推方式如果服務端收到一些需要通知用戶端的資訊,那麼可以直接發送給用戶端,而不必等待其發送請求.

Server-sent-even HTML5推送事件監聽 - time,