创建websocket.js

// websocket.js
import { ref, onMounted, onBeforeUnmount } from 'vue';
// import { useUserStore } from '@/store/user/index'
const useWebSocket = (url) => {
    const socket = ref(null);
    //  const userStore  = useUserStore()
    const connect = () => {
        socket.value = new WebSocket(url);

        socket.value.addEventListener('open', () => {
            console.log('WebSocket连接已打开');
        });

        socket.value.addEventListener('message', (event) => {
            console.log('收到消息:', event.data);
        });

        socket.value.addEventListener('close', () => {
            console.log('WebSocket连接已关闭');
            // 可以在此处理连接关闭的逻辑，例如尝试重新连接
        });
    };

    const sendMessage = (message) => {
        if (socket.value && socket.value.readyState === WebSocket.OPEN) {
            socket.value.send(message);
        }
    };

    onMounted(() => {
        connect();
    });

    onBeforeUnmount(() => {
        if (socket.value) {
            socket.value.close();
        }
    });

    return {
        socket,
        sendMessage,
    };
};

export default useWebSocket;

在vue页面中的基本使用案例

import { onMounted, onUnmounted, reactive, ref, nextTick } from 'vue'
import useWebSocket from '@/utils/websocket.js'; //引入刚刚创建的js文件
const { socket } = useWebSocket('ws://localhost:12345');

// 接收消息的方法
const handleMessage = (event) => {
    console.log('接收到消息：', event)
};
// 发送消息的方法
const sendMessage = (event) => {
    const message = {
        sendId: '',
        content: ''
    }
    socket.value.send(
        JSON.stringify(message)
    );
};


onMounted(() => {
    if (socket.value) {
        socket.value.addEventListener('message', handleMessage);
    } else {
        console.error('WebSocket not initialized');
    }

});

onUnmounted(() => {
    if (socket.value) {
        socket.value.removeEventListener('message', handleMessage);
    }
});