vue 项目中使用websocket的正确姿势

发布于：2022-01-28 10:24:57  栏目：技术文档

vue 项目中使用websocket的正确姿势

1. 在utils下新建websocket.js文件 // import { showInfoMsg, showErrorMsg } from ‘@/utils/popInfo’ import ElementUI from ‘element-ui’; function initWebSocket(e) {

    console.log(e)
    const wsUri = WS_API + "/webSocket/" + e;
    this.socket = new WebSocket(wsUri)//这里面的this都指向vue
    this.socket.onerror = webSocketOnError;
    this.socket.onmessage = webSocketOnMessage;
    this.socket.onclose = closeWebsocket;

   } function webSocketOnError(e) {

    ElementUI.Notification({
        title: '',
        message: "WebSocket连接发生错误" + e,
        type: 'error',
        duration: 0,
    });

   } function webSocketOnMessage(e) {

    const data = JSON.parse(e.data);
    console.log(data.msgType === "INFO", data.msgType === "INFO")
    if (data.msgType === "INFO") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'success',
            duration: 3000,
        });
    } else if (data.msgType === "ERROR") {
        ElementUI.Notification({
            title: '',
            message: data.msg,
            type: 'error',
            duration: 0,
        });
    }

   } // 关闭websiocket function closeWebsocket() {

    console.log('连接已关闭...')

   } function close() {

    this.socket.close() // 关闭 websocket
    this.socket.onclose = function (e) {
        console.log(e)//监听关闭事件
        console.log('关闭')
    }

   } function webSocketSend(agentData) {

    this.socket.send(agentData);

   } export default {

    initWebSocket, close

   }

如果想刷新重新链接websocket 可以在App.vue页面里添加个钩子函数 mounted() { //当在任一路由页面被刷新时,便是根组件app被从新建立,此时能够进行webSocket重连 //从localStorage中获取用户信息,是登陆状态则能够进行webSocket重连 let token = localStorage.getItem(“token”); if (token) { // userMessage = JSON.parse(userMessage); this.$websocket.initWebSocket(token); } },

客户端主动关闭websocket 在关闭的地方触发函数就可以 logout() { // localStorage.clear(); localStorage.removeItem(“token”); this.$websocket.close(); this.$store.dispatch(“LogOut”).then(() => { location.reload(); }); },

注：$webSocket 是在main.js中全局注册了websocket.js文件

到此这篇关于vue 项目中使用websocket的文章就介绍到这了,更多相关vue使用websocket内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

相关推荐