springboot项目 集成sse

SSE

SSE简介

1. 信息推送

SSE用于服务端主动向客户端推送消息，使客户端能够即时接收到信息

2. 使用场景

1. 页面接收到点赞，消息提醒
2. 聊天功能
3. 弹幕功能
4. 实时更新数据功能

3. SSE和WebSocket区别

1. websocket是全双工通道，都是用来建立浏览器和服务器之间的通信渠道
2. SSE是部署在HTTP协议之上的，现又的服务器软件都支持；websocket是一个新的协议，需要服务器端支持；
3. SSE是一个轻量级协议，相对简单；websocket是一种较重的协议，相对复杂
4. SSE默认支持断线重连；websocket需要额外部署
5. SSE支持自定义的发送数据类型

4. SSE使用

1. 引入依赖

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

2. sse连接

import lombok.extern.slf4j.Slf4j;
import org.apache.commons.compress.utils.Lists;
import org.springframework.stereotype.Component;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
import java.util.List;
import java.util.concurrent.CopyOnWriteArrayList;

@Slf4j
@Component
public class SseEmitters {

    private final List<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    public SseEmitter add(SseEmitter emitter) {
        this.emitters.add(emitter);
        emitter.onCompletion(() -> this.emitters.remove(emitter));
        emitter.onTimeout(() -> {
            emitter.complete();
            this.emitters.remove(emitter);
        });
        return emitter;
    }

    public void send(Object obj) {
        log.info("当前emitters连接数:{}", this.emitters.size());
        List<SseEmitter> failedEmitters = Lists.newArrayList();
        this.emitters.forEach(emitter -> {
            try {
                emitter.send(obj);
            } catch (Exception e) {
                emitter.completeWithError(e);
                failedEmitters.add(emitter);
            }
        });
        this.emitters.removeAll(failedEmitters);
    }

}

3. 封装响应

import lombok.AllArgsConstructor;
import lombok.Builder;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.io.Serializable;

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class SseMessage implements Serializable {

    private static final long serialVersionUID = 1L;

    private String code;
    private Integer id;
    private Integer status;
    private String msg;
}

4. 推送sse

import com.ai.platform.cloud.ops.constant.ServiceConstants;
import lombok.extern.slf4j.Slf4j;
import org.redisson.api.RTopic;
import org.redisson.api.RedissonClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;

@Slf4j
@Component
public class SseProducer {

    @Autowired
    private RedissonClient redisson;

    public void publish(SseMessage msg) {
        RTopic topic = redisson.getTopic(ServiceConstants.SSE_TOPIC);
        long clientsReceivedMessage = topic.publish(msg);
        log.info("推送sse信息:{}", clientsReceivedMessage);
    }


}

5. 监听器

import com.ai.platform.cloud.ops.constant.ServiceConstants;
import lombok.extern.slf4j.Slf4j;
import org.redisson.api.RTopic;
import org.redisson.api.RedissonClient;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.ApplicationArguments;
import org.springframework.boot.ApplicationRunner;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Slf4j
@Order(1)
@Component
public class SseListener implements ApplicationRunner {

    @Autowired
    private RedissonClient redisson;

    @Autowired
    private SseEmitters emitters;

    @Override
    public void run(ApplicationArguments args) {
        try {
            RTopic topic = redisson.getTopic(ServiceConstants.SSE_TOPIC);
            topic.addListener(SseMessage.class, (channel, msg) -> {
                log.info("redisson-sse 监听器收到消息channel:{},msg:{}", channel, msg);
                emitters.send(msg);
            });
        } catch (Exception e) {
            log.error("redisson-sse 监听器消息异常", e);
        }
    }
}

6.测试

1. 后端接口

import com.ai.platform.cloud.ops.sse.SseEmitters;
import io.swagger.annotations.Api;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;

@Api(tags = "前端推送管理接口")
@Slf4j
@Controller
@RequestMapping("/sse")
public class SseController {

    @Autowired
    private SseEmitters emitters;

    @GetMapping(path = "/subscribe", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter subscribe() {
        log.info("前端订阅成功");
        return emitters.add(new SseEmitter());
    }

}

2. 前端代码

    // 连接服务器
    var sseSource = new EventSource("http://localhost:8080/sse//subscribe");
    // 连接打开
    sseSource.onopen = function () {
        console.log("连接打开");
    }

    // 连接错误
    sseSource.onerror = function (err) {
        console.log("连接错误:", err);
    }
    
	//接收信息
    eventSource.addEventListener("vw", function (event) {
    console.log(event.data);
    .....
  });