首页
Preview

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

什么是SSE

SSE(Server-sent events)是一种用于服务器向客户端推送数据的技术,它基于 HTTP 协议,允许服务器不断地向客户端发送事件流数据。与传统的轮询或长轮询相比,SSE 更加高效、实时,并且可以降低服务器和客户端的负载。

SSE 的工作原理是客户端通过 HTTP 请求与服务器建立连接,然后服务器可以在连接保持打开的情况下,不断地向客户端发送事件流数据。每个事件都包含一个事件类型和数据字段,客户端可以通过监听事件类型来处理不同类型的事件数据。

SSE 与 WebSockets 类似,但是它们的应用场景不同。WebSockets 更适合实时双向通信,而 SSE 更适合服务器向客户端推送实时数据,例如实时股票行情、新闻更新、即时通讯等。

VueUse

在这里我们使用@vueuse/coreuseWebSocketuseEventSource,先来安装:

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_URLsocketHandler 作为参数。useWebSocket 函数返回一个包含 statusdatasendopenclose 属性的对象。

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)的服务器端点。

版权声明:本文内容由TeHub注册用户自发贡献,版权归原作者所有,TeHub社区不拥有其著作权,亦不承担相应法律责任。 如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

点赞(1)
收藏(0)
Hedy
大家好!我是一位前端开发工程师,拥有6年以上的前端开发经验。我熟练掌握HTML、CSS、JavaScript等语言,能够灵活运用各种前端框架,如Vue、React、Uniapp、Flutter等。我注重理论与实践相结合,能够为学员提供丰富的案例和实践项目,并以生动、易懂的语言为学员讲解前端开发的核心知识和技能。我不仅注重传授技能,更关注学员的职业发展,希望通过我的教学,帮助学员成为一名优秀的前端开发工程师。

评论(0)

添加评论