vue3 封装WebSocket（直接复制）

时间：2025-01-19 13:11:20
创建文件

只有基本的功能

import { ref } from 'vue';
import store from "@/store";

export default function useWebSocket(url) {
    const messagesData = ref([]);

    // 创建WebSocket连接和相关方法
    const socket = new WebSocket(url);

     = () => {
        ('WebSocket连接已建立');
    };

     = (event) => {
        const receivedMessage = ();
        //接收到后端消息，根据业务逻辑自行处理
    };

     = () => {
        ('WebSocket连接已关闭');
    };
    return {
        messagesData,
        sendMessage: (message) => {
            if ( === ) {
                (message);
            }
        },
        closeConnection: () => {
            ();
        }
    };
}
页面使用

一般是登陆成功时调用，可以在登陆页面引入(如果不是全局需要，那就在你需要的页面引入)

import useWebSocket from "./utils/WebSocket";
/**
 * 这段代码是放在登陆成功时调用，或者自身设置特定条件调用
 * 实例化useWebSocket
 * 获取token，无论vuex还是本地存储
 * 写好地址调用
 * 可以保存更新后端的信息(根据自身业务需要，没有就删除)
 */
let socket = ref(null);
const token = ;
 = useWebSocket(`地址?token=${token}`);
("setMessagesData", );
销毁
//一般是退出登录、离开某个页面时销毁
();
注意

当使用f5或者点击刷新页面以后, websocket连接就会强制关闭

我的处理方法是：每次进入程序前都会重新加载文件，因此在此文件执行创建websocket实例化最为合适，无论刷新进入哪个页面都将重新创建websocket。(可以写一些判断，例如判断是否有token，有则重新创建连接，否则啥也不做)

接受和发送消息 直接调用封装的函数即可

相关文章