通用方法存档

Server-Sent Events（SSE）前后端配置

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
const eventSource = new EventSource('http://47.109.186.180:8102/api/test/sse'); // 替换为后端地址

eventSource.onopen = function(event) {
  console.log("链接成功",event)
}

eventSource.onmessage = function(event) {
  console.log("收到消息",event)
}

eventSource.onerror = function(event) {
  console.log("链接失败",event)
}

后端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@RestController
@RequestMapping("/test")
@Slf4j
public class testC {

    private final ExecutorService executorService = Executors.newCachedThreadPool();
    private final CopyOnWriteArrayList<SseEmitter> emitters = new CopyOnWriteArrayList<>();

    @GetMapping(value = "/sse", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public SseEmitter handleSse() {
        SseEmitter emitter = new SseEmitter(Long.MAX_VALUE); // 设置超时时间为 Long.MAX_VALUE
        emitters.add(emitter);

        // 移除已完成的连接
        emitter.onCompletion(() -> emitters.remove(emitter));
        emitter.onTimeout(() -> emitters.remove(emitter));
        return emitter;
    }

    // 向前端发送消息接口
    @PostMapping("/send")
    public void sendMessage(@RequestBody String message) {
        for (SseEmitter emitter : emitters) {
            executorService.submit(() -> {
                try {
                    emitter.send(message);
                } catch (Exception e) {
                    emitters.remove(emitter); // 如果发送失败，移除该连接
                }
            });
        }
    }
}

全局事件总线 mitt

安装mitt依赖

npm install mitt

src 目录下创建/bus/index.ts

1
2
3
4
// 引入mitt插件，mitt是一个方法，方法执行返回bus对象。
import mitt from "mitt";
let $bus = mitt();
export default $bus;

监听事件

1
2
3
4
5
6
7
8
<script lang="ts" setup>
	import $bus from "../../bus" // 找到bus文件夹
	// 监听事件on（"监听事件名称","接收的事件数据回调"）
	$bus.on("getName",(name) => {
        console.log(name);
    })
    
</script>