vue3中WebSocket的使用

最新推荐文章于 2025-07-17 17:34:17 发布

糊糊@

最新推荐文章于 2025-07-17 17:34:17 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

文章标签： websocket vue.js

本文链接：https://blog.csdn.net/zhang_1011/article/details/144295807

1.先确立WebSocket的连接是否建立

2.连接后看是否接收到服务器发来的消息

3.WebSocket 连接可关闭（组件销毁时关闭）

4.如果发生错误，将其传递给 Promise 的 reject 函数

代码如下：

// src/types/websocket.js
import { onUnmounted } from "vue";

let socket2 = null;

export function web(url,onMessage,res) {
  return new Promise((resolve, reject) => {
    socket2 = new WebSocket(url);
    socket2.onopen = () => {
      socket2.send(res);（也可在建立成功后给服务器就发消息或者传参数）
      console.log("WebSocket 连接已建立");
    };

    socket2.onmessage = (event) => {
      const data = JSON.parse(event.data);
      console.log("收到来自服务器的消息:", data);
      socket2.send(res);（收到服务器的消息后在发送消息）
      onMessage(data);
    };

    socket2.onclose = () => {
      console.log("WebSocket 连接已关闭");
    };

    socket2.onerror = (error) => {
      console.error("WebSocket 错误:", error);
      reject(error); // 如果发生错误，将其传递给 Promise 的 reject 函数
    };
  });
}

// 用于在组件卸载时关闭 WebSocket 连接
export function useCloseWebSocketOnUnmounted() {
  onUnmounted(() => {
    if (socket2) {
      console.log("正在关闭 WebSocket 连接...");
      socket2.close(); // 直接关闭连接
    }
  });
}

// 用于发送消息
export const sendMessage = () => {
  socket2.send("Hello Server");

  console.log(socket2)
};
// sendMessage()

页面调用可以传url，onMessage，res(参数)，代码如下：

import { useCloseWebSocketOnUnmounted, web } from '@/types/webscoket'
import { onMounted,ref } from 'vue'

// 在组件加载时建立 WebSocket 连接
onMounted(() => {
  web('ws://10.217.101.252:8003', (data) => {
  }, 1)
})
// 在组件卸载时关闭 WebSocket 连接
useCloseWebSocketOnUnmounted()