在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/Java  HTML/ 在 Vue 項目中如何引用 SocketJS 和 Stomp 這兩個依賴呢?

在 Vue 項目中如何引用 SocketJS 和 Stomp 這兩個依賴呢?

在 Vue 項目中如何引用 SocketJS 和 Stomp 這兩個依賴呢?

之前吾輩在測試的時候使用的是 CDN 服務(wù)引入的,但前端使用的是 Vue 全家桶,應(yīng)該怎樣才能在 Vue 中引入這兩個依賴呢?或者不是用這兩個庫去實現(xiàn)服務(wù)端的消息訂閱?

測試點 JavaScript 代碼

  <script type="application/javascript" src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
  <script type="application/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  <script>
    let socket = new SockJS('http://127.0.0.1:8080/endpoint');
    stompClient = Stomp.over(socket);
    stompClient.connect(
      {},
      // 連接成功回調(diào)函數(shù).
      frame => {
        console.log('服務(wù)端 Socket 連接建立')

        // 獲取 websocket 連接的 sessionId
        const sessionId = /\/([^\/]+)\/websocket/.exec(socket._transport.url)[1];
        console.log("connected, session id: " + sessionId);

        // 訂閱廣播消息(服務(wù)端單向推送)
        const subscription_broadcast = stompClient.subscribe('/topic/broadcasting/unidirectional/allClient',
          (response) => {
            console.log(`[廣播(服務(wù)端單向推送)]: ${response.body}`)
          });

        // 訂閱廣播消息(雙向通信)
        stompClient.subscribe('/topic/broadcasting/bilateral/allClient', res => {
          console.log(`[廣播(雙向通信)]: ${res.body}`)
        })

        // 訂閱私人消息(雙向通信)
        stompClient.subscribe(`/user/${sessionId}/push/bilateral/thisClient`, res => {
          console.log(`[點對點推送(雙向通信)]: ${res.body}`)
        })

        send()

      }, error => {
        console.log('Socket 連接失敗')
      });

    function send() {
      // 發(fā)送一個消息到服務(wù)端
      var headers = {};
      var body = {
        'message': '消息內(nèi)容'
      };
      stompClient.send("/talk", headers, JSON.stringify(body));

      // 發(fā)送一個消息到客戶端并且只向當(dāng)前 session 通信
      stompClient.send('/speak', headers, JSON.stringify(body))
    }

    /**
     * 監(jiān)聽窗口關(guān)閉事件,窗口關(guān)閉前,主動關(guān)閉連接,防止連接還沒斷開就關(guān)閉窗口,server 端會拋異常
     */
    window.onbeforeunload = function () {
      if (stompClient !== null) {
        stompClient.disconnect();
        socket.close();
      }
      console.log('斷開連接');
    };
  </script>

那么,客戶端應(yīng)該怎么才能引用依賴呢?或者說有其他解決方案?

回答
編輯回答
陌如玉

npm install sockjs-client --savenpm install stompjs --save
然后在script引入依賴

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

然后正常使用就可以了

2018年7月19日 18:01