使用SSE(Server-Sent Events)实现服务端给客户端发消息

首先是客户端,看着比较简单。但实际应用中可能要比这复杂,因为默认sse只支持get请求,而且没法携带header。所以如果默认的方法达不到需求的话可能需要额外实现,当然也可以引用第三方库,比如@rangermauve/fetch-event-source。所以有谁会自己实现呢?

javascript 复制代码
if(typeof(EventSource)!=="undefined")
{
    var source=new EventSource("http://localhost:9001");
	source.onopen = function(event) {
  		console.log("onopen")
	};
	source.onmessage=function(event)
	{
		console.log("onmessage");
		console.log("data is ", event.data);
		document.getElementById("result").innerHTML=event.data + "<br>";
	};
}
else
{
	// 浏览器不支持 server-sent 事件
}

服务端java代码如下:

java 复制代码
package com.zhouz.signing.controller.v1;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;

@RestController
@CrossOrigin
public class TestController {
    protected static Logger logger = LoggerFactory.getLogger(UserController.class);

    @RequestMapping(value = "/testsse")
    @ResponseBody
    public void getStreamDataImprove(HttpServletResponse httpServletResponse) {
        httpServletResponse.setContentType("text/event-stream"); // content-type必须是text/event-stream
        httpServletResponse.setCharacterEncoding("utf-8"); // 编码必须是utf-8
        // 这里用死循环是为了和客户端建立长连接
        while (true) {
            String s = "retry:10000\n"; // retry:后面跟单位为毫秒的数字,客户端会在断开连接后按照设置的毫秒数进行重连
            String i = new Date().toString();
            s += "id:" + i + "\n"; // id: 设置id,可以在比如客户端网络错误的时候下一次再连接时向服务端发送的请求中header中带有Last-Event-Id参数,服务端拿到这个值就可以将未推送的数据再次推送给客户端
            s += "data:" + i + "\n\n"; // data: 设置数据,注意一则消息的最后必须要有两个换行符
            try {
                PrintWriter pw = httpServletResponse.getWriter();
                Thread.sleep(1000L); // 如果不想给客户端发送消息过于频繁,可以设置等待时间
                pw.write(s);
                pw.flush();
                if (pw.checkError()) {
                    logger.info("客户端断开连接");
                    break; // 判断出错后,需要结束死循环,本次请求也就结束了。
                }
            } catch (IOException | InterruptedException e) {
                e.printStackTrace();
            }
        }
    }
}

服务端php代码

php 复制代码
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: *");
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');

while(true) {
	$time = date('r');
	echo "data: {$time}\n\n";
    ob_flush();
    flush();
    sleep(1);

    // TODO 这里不知道是否可以用这个方法来判断客户端断开了连接
    if (connection_aborted()) {
    	break;
    }
}

需要注意的是,如果服务端不加死循环,前端看着是3秒发起一个请求。而加了死循环之后,前端实际上只发送了一次请求。

相关推荐
Predestination王瀞潞1 小时前
Java EE开发技术(Servlet整合JDBC银行管理系统-上)
java·servlet·java-ee·jdbc
寻星探路1 小时前
Java EE初阶启程记13---JUC(java.util.concurrent) 的常见类
java·开发语言·java-ee
怪兽20142 小时前
什么是 Redis?
java·数据库·redis·缓存·面试
Gu_yyqx2 小时前
Java 队列
java
落日漫游2 小时前
数据结构笔试核心考点
java·开发语言·算法
疯狂吧小飞牛2 小时前
Lua C API 中的注册表介绍
java·c语言·lua
kyle~2 小时前
C++--- override 关键字 强制编译器验证当前函数是否重写基类的虚函数
java·前端·c++
Hello.Reader2 小时前
Flink 受管状态的自定义序列化原理、实践与可演进设计
java·网络·flink
Light603 小时前
像素退场,曲线登场:现代响应式 CSS 全家桶 | 领码课堂
前端·css·响应式设计·css函数·布局系统·相对单位·设计令牌
让我上个超影吧3 小时前
设计模式【工厂模式和策略模式】
java·设计模式·策略模式