vue3 封装WebSocket(直接复制)

创建文件WebSocket.js

只有基本的功能

javascript 复制代码
import { ref } from 'vue';
import store from "@/store";

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

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

    socket.onopen = () => {
        console.log('WebSocket连接已建立');
    };

    socket.onmessage = (event) => {
        const receivedMessage = JSON.parse(event.data);
        //接收到后端消息,根据业务逻辑自行处理
    };

    socket.onclose = () => {
        console.log('WebSocket连接已关闭');
    };
    return {
        messagesData,
        sendMessage: (message) => {
            if (socket.readyState === WebSocket.OPEN) {
                socket.send(message);
            }
        },
        closeConnection: () => {
            socket.close();
        }
    };
}
页面使用

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

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

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

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

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

相关推荐
千里码aicood19 分钟前
python+vue旅游购票管理系统设计(源码+文档+调试+基础修改+答疑)
vue.js·python·旅游
用户47949283569152 小时前
从 58MB 到 2.6MB:我是如何将 React 官网性能提升 95% 的
前端·javascript
该用户已不存在2 小时前
7个让全栈开发效率起飞的 Bun 工作流
前端·javascript·后端
芙蓉王真的好12 小时前
Angular CDK 响应式工具指南:从基础到自适应布局应用
前端·javascript·angular.js
麦麦大数据2 小时前
F038 vue+flask 微博舆情热搜情感分析大数据分析系统|前后端分离架构
vue.js·架构·flask·情感分析·微博·舆情分析
qq_339191142 小时前
vue3 npm run dev局域网可以访问,vue启动设置局域网访问,
前端·vue.js·npm
明仔的阳光午后4 小时前
React 入门 01:快速写一个React的HelloWorld项目
前端·javascript·react.js·前端框架·reactjs·react
橙某人5 小时前
Vue3 + Pinia 移动端Web应用:页面缓存策略解决方案💡
前端·javascript·vue.js
San305 小时前
使用 OpenAI API 生成文本与图片:从环境搭建到提示工程完全解析
javascript·人工智能·node.js
TimelessHaze5 小时前
🚀 一文吃透 React 性能优化三剑客:useCallback、useMemo 与 React.memo
前端·javascript·react.js