HTML5数据推送(server-sent-events)的简单Java实例

最新推荐文章于 2025-07-09 13:30:07 发布

Jerry_7503

最新推荐文章于 2025-07-09 13:30:07 发布

阅读量3.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发文章标签： server-sent-events html5

本文链接：https://blog.youkuaiyun.com/u011844399/article/details/41804549

web前端开发专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用Java实现HTML5的Server-Sent Events（SSE）功能。首先，通过创建一个Servlet来发送实时数据，设置响应类型为"text/event-stream"并编码为UTF-8。然后，Servlet通过循环发送随机数，并在客户端使用EventSource监听onmessage事件，更新页面上的数据显示接收到的数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建web项目ServerSent，然后编写

servletpackage com.server.sent;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//content type must be set to text/event-stream

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

//encoding must be set to UTF-8

response.setCharacterEncoding("UTF-8");

PrintWriter writer = response.getWriter();

Random random = new Random();

for(int i=0; i<10; i++) {

writer.write("data: "+ random.nextInt(55)+"\n\n");

try { Thread.sleep(10);

} catch (InterruptedException e) {

e.printStackTrace();

}

writer.close();

}

2.编写index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
<head>
<script language="javascript" src="/js/modernizr-1.6.min.js"></script>
<style type="text/css">
  #nice {
   background: url(background-one.png) top left repeat-x;
   }
  .multiplebgs #nice {
   background: url(background-one.png) top left repeat-x,
   url(background-two.png) bottom left repeat-x;
   }
</style>
</head>

<body>
    Temperature: <span id="push"></span><br>
    <IFRAME ID='ifm2' WIDTH='189' HEIGHT='190' ALIGN='CENTER' MARGINWIDTH='0' MARGINHEIGHT='0' HSPACE='0' VSPACE='0' FRAMEBORDER='0' SCROLLING='NO' SRC='http://weather.qq.com/inc/ss258.htm'></IFRAME>
    <br>
    <button onclick="start();">Start</button>
    <script type="text/javascript">
    function start() {
        var eventSource = new EventSource("HelloServlet");
        eventSource.onmessage = function(event) {
            document.getElementById('push').innerHTML = event.data;
        };
    }
    </script>
</body>
</html>