SSE(Server-Sent Events) 服务端向浏览器推送消息的实现

来源：互联网发布：php curl get请求参数编辑：程序博客网时间：2024/05/17 21:59

在web项目中，我们经常使用的数据获取方式是：浏览器向服务端发起请求。而在某些场景下，我们可能需要服务端主动向浏览器发送消息，例如：新的信息流到达。
为了实现这个功能，最笨的方法是采用轮询请求，而最完整的是WebSocket，今天我们要探讨的SSE是介于两者之间的，SSE全称是Server-Sent Events，服务端发送事件，其是基于http协议的，在浏览器与服务器建立连接之后，服务端向浏览器主动发送消息，消息的格式是以”data:”开头，以”\n\n“结尾。

话不多说，直接看代码：

在servlet 3.0支持@WebServlet注解，可用于注册服务。运行环境则需要Tomcat 7及以上版本。
服务端代码：
SseControler.java

package io.hexin;import java.io.IOException;import java.io.PrintWriter;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/msg" )public class SseControler extends HttpServlet {    private static final long serialVersionUID = -8248240713081774034L;    protected void doGet(HttpServletRequest request,        HttpServletResponse response) throws ServletException, IOException {          doPost(request, response);    }     protected void doPost(HttpServletRequest request,        HttpServletResponse response) throws ServletException, IOException {          response.setContentType( "text/event-          stream;charset=UTF-8" );          response.setHeader( "Cache-Control", "no-cache" );          response.setHeader( "Connection", "keep-alive" );          PrintWriter out = response.getWriter();           try {               for(int i=0; i<10; i++){                   Thread. sleep(10000);                   String msg = "测试信息:" +new Date();                   out.print( "data: " + msg + "\n" );                   out.flush();              }          } catch (Exception e) {              e.printStackTrace();          }     }}

页面代码：
SseHtml.html

<!DOCTYPE html><html>  <head >    <title >SseHtml.html </title>    <meta name="keywords" content="keyword1,keyword2,keyword3" >    <meta name="description" content= "this is my page">    <meta name="content-type" content= "text/html;     charset=UTF-8">    <script type="text/javascript" src="./jquery-2.1.4.min.js" >    </script>  </head >  <body >    <div id="msgDiv"></ div>  </body >  <script type="text/javascript">    var requestPath = "http://localhost:8082/SseServerDemo" ;      if(typeof (EventSource) !== "undefined" ) {           var source = new EventSource(requestPath+ "/msg");          source.onmessage = function(event) {               var _html = event.data;              $( "#msgDiv").append(_html+"</br>" );               //source.close(); //关闭连接          };     } else{          tool.msg( "当前浏览器不兼容，请换用chrome" );  }  </script ></html>

执行结果：
这里写图片描述

onmessage是消息到达事件，close是关闭连接。浏览器在没有信息返回时，默认是3秒重新建立连接。

参考资料：
SSE：服务器发送事件 http://javascript.ruanyifeng.com/htmlapi/eventsource.html

(全文完)

我的微博：http://weibo.com/ahmumu

0 0