什么是SSE
SSE（Server-sent events）是一种用于服务器向客户端推送数据的技术，它基于 HTTP 协议，允许服务器不断地向客户端发送事件流数据。与传统的轮询或长轮询相比，SSE 更加高效、实时，并且可以降低服务器和客户端的负载。
SSE 的工作原理是客户端通过 HTTP 请求与服务器建立连接，然后服务器可以在连接保持打开的情况下，不断地向客户端发送事件流数据。每个事件都包含一个事件类型和数据字段，客户端可以通过监听事件类型来处理不同类型的事件数据。
SSE 与 WebSockets 类似，但是它们的应用场景不同。WebSockets 更适合实时双向通信，而 SSE 更适合服务器向客户端推送实时数据，例如实时股票行情、新闻更新、即时通讯等。
VueUse
在这里我们使用@vueuse/core的useWebSocket和useEventSource，先来安装：
npm i -D @vueuse/core
//或者
yarn add @vueuse/core
创建一个WebSocket连接
<script setup >
import { useWebSocket} from "@vueuse/core";
const socketHandler = {
autoReconnect: true,
heartbeat: {
message: 'ping',
interval: 5000,
pongTimeout: 5000,
},
onOpen: (e, open) => {
console.log('onOpen: ', e, open);
},
onMessage: (e, msg) => {
console.log('onMessage: ', e, msg.data);
},
onError: (e, err) => {
console.log('onError: ', e, err);
},
onClose: (e, close) => {
console.log('onClose: ', e, close);
},
}
let WEBSOCKET_URL = 'ws://test.xxx/8080'
const {status, data, send, open, close } = useWebSocket(WEBSOCKET_URL, socketHandler);
</script>
<template>
<div>
<div>status: {{ status }}</div>
<div>data: {{ data }}</div>
</div>
</template>
<style scoped>
</style>
以上代码导入 useWebSocket 函数，然后定义了一个 socketHandler 对象，用于配置 WebSocket 连接的参数和处理函数。
接下来，使用 useWebSocket 函数创建 WebSocket 连接，传入了 WEBSOCKET_URL 和 socketHandler 作为参数。useWebSocket 函数返回一个包含 status、data、send、open 和 close 属性的对象。
SSE(Server-sent events)
与websockets不同的是，sse在标准中本身就有重连机制，所以要简单一些。
<script setup>
import { useEventSource } from '@vueuse/core';
let WEBSOCKET_URL = 'ws://test.xxx/8080'
const { status, data, error, close } = useEventSource(WEBSOCKET_URL);
</sciript>
<template>
<div>
<div>
<div>status: {{ status }}</div>
<div>data: {{ data }}</div>
<div>error: {{ error }}</div>
</div>
</div>
</template>
注意：useEventSource 函数需要传递一个参数，即要连接的事件源 URL，这个 URL 应该是一个支持服务器发送事件（SSE）的服务器端点。
评论(0)