EventSource, HTML5实时通讯新选择

EventSource 是 HTML5 新增的特性,用于实现服务器端数据实时推送到客户端。

使用 EventSource 可以这样实现服务端数据实时推送:

服务器:

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class StreamServlet extends HttpServlet {
  protected void doGet(HttpServletRequest request, HttpServletResponse response) 
          throws ServletException, IOException {
    response.setContentType("text/event-stream");
    response.setCharacterEncoding("UTF-8");
    
    PrintWriter writer = response.getWriter();
    writer.write("data: some data\n\n");
    writer.flush();
  }
}

客户端:

然后在客户端使用 EventSource 连接到 http://yourserver/stream

工作原理:

1. 客户端创建一个 EventSource 对象,连接到服务端 /stream endpoint
2. 服务端在 /stream 路由中返回一个 text/event-stream 的响应
3. 客户端会一直保持连接,等待服务端的数据推送
4. 服务端可以多次推送数据到这个长连接
5. 客户端接收到推送的数据,会触发 onmessage 事件,在其回调函数中处理数据这样,服务端就实现了数据的实时推送,客户端通过 onmessage 实时接收和处理推送的数据。

这里的服务端使用了 Servlet 实现数据推送,reactor 模式下,每次调用 writer.write() 都会触发响应被刷新,实现了数据的实时推送。

EventSource 特性兼容 IE10 以上浏览器,其他浏览器也都有较好的支持,所以在实际场景中比较方便使用。希望这个示例能帮你明白 EventSource 的工作原理和基本使用方法。