EventSource, HTML5实时通讯新选择

EventSource, HTML5实时通讯新选择

技术教程gslnedu2025-07-02 22:03:012A+A-

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();
  }
}

客户端:

<script>
var source = new EventSource('/stream');
source.onmessage = function(e) {
  console.log(e.data);
};
</script>

然后在客户端使用 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 的工作原理和基本使用方法。

点击这里复制本文地址 以上内容由朽木教程网整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!
qrcode

朽木教程网 © All Rights Reserved.  蜀ICP备2024111239号-8