美文网首页VueVue项目Vue专题
vue+elementUI+WebSocket接收后台实时消息推

vue+elementUI+WebSocket接收后台实时消息推

作者: 前端后台都不精 | 来源:发表于2019-04-23 11:24 被阅读1256次

    用户登陆后即时推送业务信息,使用element-UI的Notification 通知进行提示,并通过Notification 通知的onClick方法进行页面跳转。

    1、创建页面时即生效

    我写在了首页,保证一进入系统即开始接收

    created() {
        // 连接webSocket,用于接收后台实时报警信息推送
        this.webSocket();
      },
    

    2、websocket具体操作

    methods: {
        webSocket() {
          const that = this;
          if (typeof (WebSocket) == 'undefined') {
            this.$notify({
              title: '提示',
              message: '当前浏览器无法接收实时报警信息,请使用谷歌浏览器!',
              type: 'warning',
              duration: 0
            });
          } else {
             // 获取token保存到vuex中的用户信息,仅适用于本项目,注意删除或修改
            store.dispatch('GetInfo').then(info => {
              // 实例化socket,这里我把用户名传给了后台,使后台能判断要把消息发给哪个用户,其实也可以后台直接获取用户IP来判断并推送
              const socketUrl = 'ws://127.0.0.1:8868/websocket/' + info.username;
              this.socket = new WebSocket(socketUrl);
              // 监听socket打开
              this.socket.onopen = function() {
                console.log('浏览器WebSocket已打开');
              };
              // 监听socket消息接收
              this.socket.onmessage = function(msg) {
                // 转换为json对象
                const data = JSON.parse(msg.data);
                that.$notify({
                    title: '建立连接',
                    message: '实时报警服务连接成功,点击查看报警信息详情',
                    type: 'success',
                    duration: 0,
                    onClick: () => {
                      that.$router.push({
                        path: '/alarmManage/monitAlarmInfo'
                      });
                    }
                  })
              };
              // 监听socket错误
              this.socket.onerror = function() {
                that.$notify({
                  title: '错误',
                  message: '服务器错误,无法接收实时报警信息',
                  type: 'error',
                  duration: 0
                });
              };
              // 监听socket关闭
              this.socket.onclose = function() {
                console.log('WebSocket已关闭');
              }
            })
          }
        }
      }
    

    相关文章

      网友评论

        本文标题:vue+elementUI+WebSocket接收后台实时消息推

        本文链接:https://www.haomeiwen.com/subject/krvgiqtx.html