nuxt3 中的 Websocket / SSE(Server-sent events) 客户端实现

小半 • 2024年3月2日下午5:59 • 前端开发 • 阅读 155

什么是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>