vue项目中使用websocket的实现

 更新时间:2022年01月28日 10:26:07   作者:蓝胖子的多啦A梦  
本文主要介绍了vue项目中使用websocket的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

什么是websocket?

“WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。”

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 基于vue2.x的电商图片放大镜插件的使用

    基于vue2.x的电商图片放大镜插件的使用

    本篇文章主要介绍了基于vue2.x的电商图片放大镜插件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • 基于ant design日期控件使用_仅月份的操作

    基于ant design日期控件使用_仅月份的操作

    这篇文章主要介绍了基于ant design日期控件使用_仅月份的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue实现微信二次分享以及自定义分享的示例

    vue实现微信二次分享以及自定义分享的示例

    这篇文章主要介绍了vue实现微信二次分享以及自定义分享的示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 一文详解Vue3中使用ref获取元素节点

    一文详解Vue3中使用ref获取元素节点

    这篇文章主要介绍了一文详解Vue3中使用ref获取元素节点,本文介绍在vue3的setup中使用composition API获取元素节点的几种方法,需要的朋友可以参考一下
    2022-07-07
  • Vue3中defineEmits、defineProps 不用引入便直接用

    Vue3中defineEmits、defineProps 不用引入便直接用

    这篇文章主要介绍了Vue3中defineEmits、defineProps 不用引入便直接用,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • vue-admin-template 动态路由的实现示例

    vue-admin-template 动态路由的实现示例

    本文主要介绍了ue-admin-template动态路由的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue3+vite+ts使用require.context问题

    vue3+vite+ts使用require.context问题

    这篇文章主要介绍了vue3+vite+ts使用require.context问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue 面包屑导航组件封装

    vue 面包屑导航组件封装

    本文主要介绍了vue 面包屑导航组件封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue项目中使用qrcodesjs2生成二维码简单示例

    vue项目中使用qrcodesjs2生成二维码简单示例

    最近项目中需生成二维码,发现了很好用的插件qrcodesjs2,所以下面这篇文章主要给大家介绍了关于vue项目中使用qrcodesjs2生成二维码的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue-cli中为单独页面设置背景色的实现方法

    Vue-cli中为单独页面设置背景色的实现方法

    下面小编就为大家分享一篇Vue-cli中为单独页面设置背景色的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论