前端必學技巧sockjs

什么叫websocket：我的理解就是一個特殊的后端接口，只不過這個后端接口不是通過前端點擊什么然后去請求后端接口數據。而是進入一個界面以后就一直與這個接口相連接了。只不過沒有數據傳輸過來。只有當后端通過這個接口傳輸數據時，前端才能夠接受：

代碼如下：

事先引入需求模塊

import SockJS from "sockjs-client";
import Stomp from "stompjs";

 

          /* 建立stomp連接，監聽報警消息 */
    createStomp() {
      const socket = new SockJS(ScheduleApi['CHECK_SOCKJS_URL']);
      // socket.onopen = function(e) { console.log('open'); }
      // socket.onmessage = function(e) { console.log(e.data); }
      // return
      // 經過stomp.over之后，會重寫onopen之類的方法
      const client = Stomp.over(socket);
      // 屏蔽stomp的debug信息
      client.debug = function(str) {
        // console.log('%c'+str, 'color: BlueViolet');
      };

      this.stompClient = client;
      client.connect({}, _ => {
        client.subscribe(ScheduleApi['CHECK_STOMP_TOPIC'], msg => {
          // console.log('Stomp', msg);
          let { body:jsonData } = msg;
          let data;
          try {
            data = JSON.parse(jsonData);
         
          } catch(e) {
            console.log('%c報警stomp，json格式不對', 'color: BlueViolet');
            return;
          }
        });
      });
    },
    /* 銷毀stomp連接 */
    destroyStomp() {
      this.stompClient && this.stompClient.disconnect();
    },