创建文件WebSocket.js
只有基本的功能
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();}};
}
页面使用
一般是登陆成功时调用,可以在登陆页面引入(如果不是全局需要,那就在你需要的页面引入)
import useWebSocket from "./utils/WebSocket";
/*** 这段代码是放在登陆成功时调用,或者自身设置特定条件调用* 实例化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);
销毁
//一般是退出登录、离开某个页面时销毁
socket.value.closeConnection();
注意
当使用f5或者点击刷新页面以后, websocket连接就会强制关闭
我的处理方法是:每次进入程序前都会重新加载App.vue文件,因此在此文件执行创建websocket实例化最为合适,无论刷新进入哪个页面都将重新创建websocket。(可以写一些判断,例如判断是否有token,有则重新创建连接,否则啥也不做)
接受和发送消息 直接调用封装的函数即可