SSE(Server-Sent Events):替代websocket完成服务器推送

Posted 品茗IT

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SSE(Server-Sent Events):替代websocket完成服务器推送相关的知识,希望对你有一定的参考价值。


一、概述

提到服务端数据推送,你可以一下子就想到了Websocket,WebSocket是一种全新的协议,随着html5草案的不断完善,越来越多的现代浏览器开始全面支持WebSocket技术了,它将TCP的Socket(套接字)应用在了webpage上,从而使通信双方建立起一个保持在活动状态连接通道。

但你可能不知道,HTML5中有一个轻量的替代Websocket的方案:SSE(Server-Sent Events)。

WebSocket 和 SSE 都是传统请求-响应 Web 架构的替代方案,但它们不是完全冲突的技术。

  • WebSocket 架构在客户端与服务器之间打开一个套接字,用于实现全双工(双向)通信。
    无需发送 GET 消息并等待服务器响应,客户端只需监听该套接字,接收服务器更新,并使用收到的数据来发起或支持各种交互。
    客户端也可以使用套接字与服务器通信,例如在成功收到更新时发送 ACK 消息。

  • SSE 是一种更简单的标准,是作为 HTML5 的扩展而开发的。
    尽管 SSE 支持从服务器向客户端发送异步消息,但客户端无法向服务器发送消息。
    对于客户端只需接收从服务器传入的更新的应用程序,SSE 的半双工通信模型最适合。
    与 WebSocket 相比,SSE 的一个优势是它是基于 HTTP 而运行的,不需要其他组件。

几乎所有现代浏览器都支持 WebSocket 协议,包括移动浏览器。然而Microsoft IE 和 Edge不支持SSE
但这并不妨碍我们使用SSE,毕竟用IE的人还有几个呢?如果是内部使用,为什么不使用更简单的SSE呢?

本篇不讲websocket,有兴趣的可以阅读了解更多关于websocket的使用。

这里讲述如何使用SSE建立服务端的推送。

二、服务端

这里我们使用聊天来模拟SSE的数据推送。我这里写了几个自定义的对象

  • Chater对象存储聊天人的信息。

  • WebSSEUser是一个存储用户名userName和Chater对象的map。

2.1 配置

在Springboot项目中使用SSE,是不需要额外引入依赖的,只需要把spring-boot-starter-web引入即可。也不需要额外的配置。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.2 服务端text/event-stream长连接

示例:

@GetMapping(value = "/subscribe", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
public SseEmitter to(HttpServletRequest request) {
    String userName = (String) request.getSession().getAttribute("userName");
    // 超时时间设置为3分钟
    SseEmitter sseEmitter = new SseEmitter(180000L);
    Chater chater = WebSSEUser.getChater(userName);
    sseEmitter.onTimeout(() -> chater.setSseEmitter(null));
    sseEmitter.onCompletion(() -> System.out.println("完成!!!"));
    chater.setSseEmitter(sseEmitter);
    return sseEmitter;
}

这里是Springboot应用中使用SSE,我定义了/subscribe接口:

  • produces指定了响应类型text/event-stream

  • userName从session中获取,并获取到聊天对象Chater。

  • 这里调用时创建SseEmitter对象,设置超时时间3分钟,onTimeout超时后清除SseEmitter对象,因为SSE可以超时重连,超时会再次调用这个接口,就会重新生成SseEmitter对象。

  • onCompletion完成后逻辑自定义,但是不要清除SseEmitter对象,否则会一直重连。

SSE调用/subscribe接口接口以后,会一直使用一个请求,类似websocket。

2.3 服务端发送消息

上面的代码只是保持了长连接,而且是单向的,只能是服务端给客户端发消息。

单向的意思就是,客户端不能通过SSE去发送消息,服务端可以通过SSE给客户端发送消息。

但是我们还是可以使用SSE来完成聊天功能的,因为客户端可以通过普通http请求去发送消息,到服务端以后再发送给其他客户端。

示例:

@RequestMapping(value = "/send")
public ResultModel send(@RequestBody MessageDTO<String> messageDTO, HttpServletRequest request) {
    logger.info("收到发往用户[{}]的文本请求;", messageDTO.getTargetUserName());
    Object userName = request.getSession().getAttribute("userName");
    if (userName == null)
        return ResultModel.error("无用户");
    messageDTO.setFromUserName((String) userName);
    messageDTO.setMessageType(Type.TYPE_TEXT.getMessageType());
    Chater chater = WebSSEUser.getChater(messageDTO.getTargetUserName());
    try {
        chater.getSseEmitter().send(messageDTO);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return ResultModel.ok();
}

这里,通过目标的userName获取到Chater对象,然后Chater对象中保存有SseEmitter对象,SseEmitter对象可以直接发送消息到客户端。

三、客户端

前面讲述了服务端维持SSE的方法。下面讲述下客户端如何操作。

3.1 SSE连接

调用服务端的/subscribe接口,维持长连接,请阅服务端消息。

var url = "/subscribe";
var es = new EventSource(url);
es.addEventListener("message"function(e){
    decode(e);
},false);

不需要额外引入js,addEventListener中可以调用其他方法对消息解析并操作。

这里的decode(e);是对应服务端的chater.getSseEmitter().send(messageDTO);

3.2 普通http请求发送消息

普通的ajax请求即可,无需额外处理,调用服务端的/send接口即可。

四、截图

如图:

在这里插入图片描述
  1. 客户端连接服务端的/subscribe接口,这个连接会一直持续下去,图上已经持续了十几秒。

  2. 客户端连接服务端的/send接口,发送消息给服务端,服务端转发给其他客户端。



这里就先说这么多了,可以点击左下方的【阅读原文】查看完整的关于sse的介绍!


欢迎在评论区留下你的观点,一起讨论提高。

如果今天的文章让你有新的启发,或者在学习能力的提升上有新的认识,欢迎转发分享给更多人。


欢迎各位读者加入品茗IT技术群聊,群号:801159061



以上是关于SSE(Server-Sent Events):替代websocket完成服务器推送的主要内容,如果未能解决你的问题,请参考以下文章

WebFlux系列 Server-Sent Events

Server-sent events(SSE)& EventSource 客户端使用与服务器基础实现(基于Node.js)

Server-Sent Events 服务端发送事件

Web Worker 和 Server-Sent Events

WebFlux系列Server-Sent Events(续)

pushpin Server-sent events && openresty 集成试用