@bams-app/websocket

@work/websocket-vue3

websocket封装 - Vue3版本

安装

npm install @work/websocket-vue3

使用

全局注册

import { createApp } from "vue";
import App from "./App.vue";
import workWebsocketVue3 from "@work/websocket-vue3";

const app = createApp(App);

// 配置websocket连接
app.use(workWebsocketVue3, "ws://localhost:8080/ws", {
  reconnection: true,
  reconnectionDelay: 1000,
  heartCheckTime: 30000,
  heartCheckMsg: "ping"
});

app.mount("#app");

组件使用

基础用法

<template>
  <use-websocket :socketParams="params" @message="handleMessage">
    <template #default="{ valMap }">
      <div>{{ valMap }}</div>
    </template>
  </use-websocket>
</template>

<script setup>
  import { ref } from "vue";

  const params = ref({
    type: "hs",
    field: "real_point_data",
    keys: ["key1", "key2"]
  });

  const handleMessage = (data) => {
    console.log("收到消息:", data);
  };
</script>

带Keys的用法

<template>
  <use-ws :keys="keys" :interval="'2'" @message="handleMessage">
    <template #default="{ valMap }">
      <div>{{ valMap }}</div>
    </template>
  </use-ws>
</template>

<script setup>
  import { ref } from "vue";

  const keys = ref(["key1", "key2", "key3"]);

  const handleMessage = (data) => {
    console.log("收到消息:", data);
  };
</script>

组件使用（Options API）

<template>
  <div>{{ message }}</div>
</template>

<script>
  export default {
    data() {
      return {
        message: ""
      };
    },
    sockets: {
      onmessage(data) {
        this.message = data;
      }
    },
    methods: {
      sendMessage() {
        this.$socketSend({
          type: "hs",
          field: "real_point_data",
          keys: ["key1"]
        });
      }
    }
  };
</script>

组件使用（Composition API + defineOptions）

<template>
  <div>{{ message }}</div>
</template>

<script setup>
  import { ref } from "vue";
  import { getCurrentInstance } from "vue";

  const message = ref("");

  // 使用defineOptions定义sockets选项
  defineOptions({
    sockets: {
      onmessage(data) {
        message.value = data;
      }
    }
  });

  // 发送消息
  const sendMessage = () => {
    const vm = getCurrentInstance()?.proxy;
    vm?.$socketSend({
      type: "hs",
      field: "real_point_data",
      keys: ["key1"]
    });
  };
</script>

全局方法

$connectWebsocket

手动连接websocket

this.$connectWebsocket("ws://localhost:8080/ws", {
  reconnection: true
});

$disconnectWebsocket

手动断开websocket

this.$disconnectWebsocket();

$socketSend

发送消息

this.$socketSend({
  type: "hs",
  field: "real_point_data",
  keys: ["key1"]
});

配置项

事件

与Vue2版本的区别

1. 保持了Vue2的核心API：继续使用sockets选项和$socketSend方法，确保代码迁移的平滑性
2. 支持Vue3的Composition API：同时提供Options API和Composition API两种使用方式
3. 组件注册方式：改为Vue3的全局注册方式
4. 生命周期钩子：只使用Vue3的beforeUnmount钩子，不再支持Vue2的beforeDestroy
5. 兼容性：仅兼容Vue3，不再支持Vue2

License

ISC