vue3使用sse

以下是chatgpt4对于sse技术的阐述

SSE (Server-Sent Events) 技术是一种基于 HTTP 的推送技术，通过一个持久性的 HTTP 连接，服务器可以将实时数据推送给客户端，而客户端无需发送任何请求，也无需刷新页面即可实时接收数据。

SSE 技术可以用于实时更新数据，例如股票价格、天气预报、即时通讯等应用场景。SSE 相对于 WebSocket 技术来说，更加轻量级，因为 SSE 只需要一个 HTTP 连接即可实现推送功能，而 WebSocket 则需要建立一个全双工的 TCP 连接。

在使用 SSE 技术时，客户端需要使用 JavaScript API 来建立 SSE 连接，服务器端需要实现 SSE 推送功能。SSE 通过一种特殊的 MIME 类型 text/event-stream 来传递推送数据。服务器端通过将数据封装为一段文本，按照一定的格式发送给客户端，客户端可以通过 onmessage 事件监听服务器端发送的数据。

SSE 技术不仅可以在 Web 应用中使用，还可以在移动应用中使用。例如，使用 SSE 技术可以实现推送消息、即时通讯、在线游戏等功能。

这个技术的主要操作由后端完成，前端无需进行额外配置，通知后端建立以及关闭连接，接收后端推送的消息即可，前端需要做的操作主要如下

// 页面加载时建立链接
onMounted(() => {
	createEventSource();
});
const createEventSource = () => {
	if (window.EventSource) {
		state.source = new EventSource(`需要替换：这里是建立连接的通知`);
		state.source.addEventListener(
			'open',
			function () {
				console.log('建立连接。。。');
			},
			false
		);
		state.source.addEventListener('message', function (e) {
			console.log('收到消息', e.data);
		});
		state.source.addEventListener(
			'error',
			function (e) {
				if (e.readyState === EventSource.CLOSED) {
					console.log('连接关闭');
				} else {
					console.log(e);
				}
			},
			false
		);
	} else {
		 console.log('你的浏览器不支持SSE');
	}
};

//离开页面关闭连接
onUnmounted(() => {
	if (state.source) {
		state.source.close();
		// 通知后端关闭连接
		// 这里写通知后端关闭的接口以及需要的参数
});