與vue.js的春天跺腳websockets

Question

我想用Vue的Spring websockets（STOMP），但不知道如何做，或者如果它甚至可能。我的websockets使用普通的JS，但是當我嘗試使用Vue時，我卡住了。這裏是我的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); 
    }); 
}, 

}）

我的連接和發送功能正在工作，我可以看到在後端的消息，但問題是訂閱功能。它需要一個回調函數，但這永遠不會觸發。我也嘗試在vue中創建一個方法，並調用該方法

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

但這也不起作用。我在https://github.com/FlySkyBear/vue-stomp找到了一些圖書館，但我無法弄清楚如何使用它，它看起來非常混亂。我寧願使用普通的JS。

任何人都有解決方案嗎？由於

Answer 1

我也是同樣的情況......

有似乎是一個有效的解決方案在這裏：

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

Answer 2

這裏是春天啓動的WebSocket工作示例（STOMP）和Vue CLI。

1. 從https://spring.io/guides/gs/messaging-stomp-websocket/

2. 添加允許的起源下載Spring啓動演示在WebSocketConfig

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

3. 運行該項目

現在開始Vue的CLI項目：

1. 安裝SockJS npm install sockjs-client
2. 安裝STOMP npm install webstomp-client
3. 我用自舉類，所以你需要npm install bootstrap@3只是佈局

添加.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> 

運行項目和測試，它應該默認從8081端口開始。