使用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秒发起一个请求。而加了死循环之后，前端实际上只发送了一次请求。