在 Vue 项目中如何引用 SocketJS 和 Stomp 这两个依赖呢？

Question

在 Vue 项目中如何引用 SocketJS 和 Stomp 这两个依赖呢？

之前吾辈在测试的时候使用的是 CDN 服务引入的，但前端使用的是 Vue 全家桶，应该怎样才能在 Vue 中引入这两个依赖呢？或者不是用这两个库去实现服务端的消息订阅？

测试点 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(
      {},
      // 连接成功回调函数.
      frame => {
        console.log('服务端 Socket 连接建立')

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

        // 订阅广播消息（服务端单向推送）
        const subscription_broadcast = stompClient.subscribe('/topic/broadcasting/unidirectional/allClient',
          (response) => {
            console.log(`[广播（服务端单向推送）]: ${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() {
      // 发送一个消息到服务端
      var headers = {};
      var body = {
        'message': '消息内容'
      };
      stompClient.send("/talk", headers, JSON.stringify(body));

      // 发送一个消息到客户端并且只向当前 session 通信
      stompClient.send('/speak', headers, JSON.stringify(body))
    }

    /**
     * 监听窗口关闭事件，窗口关闭前，主动关闭连接，防止连接还没断开就关闭窗口，server 端会抛异常
     */
    window.onbeforeunload = function () {
      if (stompClient !== null) {
        stompClient.disconnect();
        socket.close();
      }
      console.log('断开连接');
    };
  </script>

那么，客户端应该怎么才能引用依赖呢？或者说有其他解决方案？

Answer 1

先npm install sockjs-client --save和npm install stompjs --save
然后在script引入依赖

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

然后正常使用就可以了