How do you reference SocketJS and Stomp dependencies in a Vue project?

< H1 > how do you reference SocketJS and Stomp dependencies in a Vue project? < / H1 > < H2 > We used the CDN service to test before, but the front end uses Vue family buckets. How can we introduce these two dependencies in Vue ? Or not use these two libraries to implement the server-side message subscription? < / H2 >

Test point JavaScript Code

</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>

so how can the client reference dependencies? Or is there another solution?

Apr.28,2021

first npm install sockjs-client-- save and npm install stompjs-- save
then introduce dependency

in script .
import SockJS from "sockjs-client";
import Stomp from "stompjs";

then use it normally

Menu