vue.jsでスプリングストンプウェブソケット

Question

私はVueでSpring websockets（STOMP）を使用しようとしていますが、それを行う方法や可能性を理解できません。私のWebSocketは普通のJSで動作しますが、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コードです。コールバック関数が必要ですが、これは決して起動しません。私はまた、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. プロジェクト

今すぐVueのCLIプロジェクトを開始し、ファイル名を指定して実行WebSocketConfig

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

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

追加許さ原点から春ブートデモをダウンロード：

、

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

プロジェクトを実行し、テスト：

1. はあなただけでレイアウト

.vueコンポーネントを追加するためにnpm install bootstrap@3を必要とするので、私は、ブートストラップクラスを使用STOMP npm install webstomp-client

をインストールSockJS npm install sockjs-client

インストールデフォルトで8081ポートから開始する必要があります。