利用STOMP主动让server给browser推送数据（webSocket)

需求：每一次后台数据推送信息跳出dialog

1.可以将数据存储到VUEX中，并且在页面中用watch去监听 store.state中的值，来达到数据更新跳出弹出框的效果

    //监听store中的值
    "$store.state.xxx"(newValue, oldValue) {
         //做点什么
    },

2.因为是全局跳出弹出框，所以我们可以将dialog放在最根部的主页面下

<template>
  <div></div>
</template>

<script>
import Stomp from "stompjs";
import SockJS from "sockjs-client";
import { ws } from "@/utils"; // 类似路径为 const ws = "/baidu/ws";
var client;
export default {
  data() {
    return {};
  },

  mounted() {
    this.connect(); //初始化建立连接
  },

  methods: {
    connect() {
      var headers = {};
      client = Stomp.over(new SockJS(ws));
      client.connect(headers, this.onConnected, this.onFailed);
    },
    CallBack(frame) {
      console.log("frame");
      let transferNum = frame.body; //拿到数据
    },
    onConnected(frame) {
      console.warn("连接成功: " + frame);
      //client.subscribe 第一个为链接路径，第二个为回调函数
      client.subscribe("/topic/transferNum", this.CallBack);
    },
    onFailed(frame) {
      console.warn("连接失败： " + JSON.stringify(frame));
      setTimeout(() => {
        this.connect();
      }, 3000);
    },
  },
};
</script>

<style lang="scss" scoped></style>

参考文档：segmentfault.com/a/119000000…

官方文档: jmesnil.net/stomp-webso…