练习:使用springmvc实现H5(server-sent event)

最新推荐文章于 2025-04-01 16:27:18 发布

原创最新推荐文章于 2025-04-01 16:27:18 发布 · 4.7k 阅读

4 ·

CC 4.0 BY-SA版权

java 同时被 2 个专栏收录

10 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了一种使用Java和JavaScript实现的服务端推送(Server-Sent Events, SSE)技术。通过设置HTTP响应头为text/event-stream，服务端可以向客户端实时发送更新。Java端负责发送包含中文的消息，而JavaScript则通过EventSource API监听这些消息并将其显示在页面上。

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

1. 注意设置报头为 "text/event-stream"

2. \n\n必须要

3. 键必须为data

java代码:

@Controller  
@RequestMapping("/send")  
public class H5SendServer {  
    @RequestMapping(value = "/serverSend.do")  
    public void serverSend(HttpServletResponse response)  
    {  
        response.setContentType("text/event-stream");   
        response.setCharacterEncoding("UTF-8");  
        try {  
            PrintWriter writer = response.getWriter();  
            writer.write("data: 中文测试 \n\n");//这里需要\n\n，必须要，不然前台接收不到值,键必须为data
            writer.flush();  
              
            Thread.sleep(3000);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }   
    }  
}

js代码:

if(typeof(EventSource)!=="undefined"){
	var source=new EventSource(path+"/send/serverSend.do");
	source.onmessage = function(event){
		console.log("event.data=" + event.data);//必须用data接收
		$("#test").innerHTML += event.data + "<br />";
	};
	source.onerror = function(event){
		console.log("error");
	};
	source.onopen = function(event){
		console.log("open");
	};
}else{
	console.log("此浏览器不支持server-send");
}

实现效果: