Spring stomp websockets avec vue.js

Question

J'essaye d'utiliser Spring websockets (STOMP) avec Vue mais je n'arrive pas à comprendre comment le faire ou si c'est possible. Mes Websockets fonctionnent avec JS, mais quand j'essaie avec Vue, je suis bloqué. Voici mon code vue:

var app = new Vue({ 
el: '#app', 
data: { 
    stompClient: null, 
    gold: 0 
}, 
methods: { 
    sendEvent: function() { 
     this.stompClient.send("/app/hello", {}, JSON.stringify({'name': $("#name").val()})); 
    } 
}, 
created: function() { 
    this.stompClient = Stomp.over(new SockJS('/gs-guide-websocket')); 
    this.stompClient.connect() 
    this.stompClient.subscribe('/topic/greetings', function (greeting) { 
     console.log(JSON.parse(greeting.body).content); 
    }); 
}, 

})

Mes connecter et fonction d'envoi fonctionne et je peux voir le message dans le back-end mais le problème est la fonction abonner. Il a besoin d'une fonction de rappel mais cela ne se déclenche jamais. J'ai également essayé de créer une méthode en vue et appelez cela

this.stompClient.subscribe('/topic/greetings', vueFunc()) 

mais cela ne fonctionne pas non plus. J'ai trouvé une bibliothèque au https://github.com/FlySkyBear/vue-stomp mais je n'arrive pas à comprendre comment l'utiliser et ça a l'air vraiment en désordre. Je préfère utiliser JS simple alors.

Quelqu'un at-il une solution? Merci

Answer 1

Je suis aussi dans la même situation ...

Il semble y avoir une solution de travail ici:

https://github.com/ocinpp/springboot-sockjs-stomp-vue-sample

Answer 2

Voici l'exemple de travail avec Spring Boot Websocket (Stomp) et Vue CLI.

1. Téléchargez la démo de démarrage Spring de https://spring.io/guides/gs/messaging-stomp-websocket/

2. Ajouter origine autorisée dans WebSocketConfig

   @Override 
   public void registerStompEndpoints(StompEndpointRegistry registry) { 
       registry.addEndpoint("/gs-guide-websocket") 
         .setAllowedOrigins("http://localhost:8081") 
         .withSockJS(); 
   } 
   

3. Exécutez le projet

maintenant lancer le projet Vue CLI et:

1. SockJS Installation npm install sockjs-client
2. Installer STOMP npm install webstomp-client
3. J'utilise les classes bootstrap, vous avez donc besoin npm install bootstrap@3 juste pour la mise en page

Ajouter un composant .vue:

<template> 
    <div> 
     <div id="main-content" class="container"> 
      <div class="row"> 
       <div class="col-md-6"> 
        <form class="form-inline"> 
         <div class="form-group"> 
          <label for="connect">WebSocket connection:</label> 
          <button id="connect" class="btn btn-default" type="submit" :disabled="connected == true" @click.prevent="connect">Connect</button> 
          <button id="disconnect" class="btn btn-default" type="submit" :disabled="connected == false" @click.prevent="disconnect">Disconnect 
          </button> 
         </div> 
        </form> 
       </div> 
       <div class="col-md-6"> 
        <form class="form-inline"> 
         <div class="form-group"> 
          <label for="name">What is your name?</label> 
          <input type="text" id="name" class="form-control" v-model="send_message" placeholder="Your name here..."> 
         </div> 
         <button id="send" class="btn btn-default" type="submit" @click.prevent="send">Send</button> 
        </form> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12"> 
        <table id="conversation" class="table table-striped"> 
         <thead> 
          <tr> 
           <th>Greetings</th> 
          </tr> 
         </thead> 
         <tbody> 
          <tr v-for="item in received_messages" :key="item"> 
           <td>{{ item }}</td> 
          </tr> 
         </tbody> 
        </table> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
import SockJS from "sockjs-client"; 
import Stomp from "webstomp-client"; 

export default { 
    name: "websocketdemo", 
    data() { 
    return { 
     received_messages: [], 
     send_message: null, 
     connected: false 
    }; 
    }, 
    methods: { 
    send() { 
     console.log("Send message:" + this.send_message); 
     if (this.stompClient && this.stompClient.connected) { 
     const msg = { name: this.send_message }; 
     this.stompClient.send("/app/hello", JSON.stringify(msg), {}); 
     } 
    }, 
    connect() { 
     this.socket = new SockJS("http://localhost:8080/gs-guide-websocket"); 
     this.stompClient = Stomp.over(this.socket); 
     this.stompClient.connect(
     {}, 
     frame => { 
      this.connected = true; 
      console.log(frame); 
      this.stompClient.subscribe("/topic/greetings", tick => { 
      console.log(tick); 
      this.received_messages.push(JSON.parse(tick.body).content); 
      }); 
     }, 
     error => { 
      console.log(error); 
      this.connected = false; 
     } 
    ); 
    }, 
    disconnect() { 
     if (this.stompClient) { 
     this.stompClient.disconnect(); 
     } 
     this.connected = false; 
    }, 
    tickleConnection() { 
     this.connected ? this.disconnect() : this.connect(); 
    } 
    }, 
    mounted() { 
    // this.connect(); 
    } 
}; 
</script> 

<style scoped> 

</style> 

Exécutez le projet et le test, il devrait commencer au port 8081 par défaut.