Vue Stomp+SocketJS 數據報錯[Object object]

開頭一句mmp

tmd換位置了也沒個提示！！！！

坑死爹了

<template>
  <div>
    <input type="text" v-model="text">
    <button @click="sendMessage">發送消息</button>
    <br>
    <br>
    <div>{{data}}</div>
  </div>
</template>
<script>
import SockJS from 'sockjs-client'
import Stomp from 'webstomp-client'
export default {
  name: 'ChatRoom',
  data () {
    return {
      text: '',
      data: '',
      stompClient: null
    }
  },
  mounted () {
    if ('WebSocket' in window) {
      this.initWebSocket()
    } else {
      alert('當前瀏覽器 Not support websocket')
    }
  },
  methods: {
    sendMessage () {
      this.stompClient.send('/app/hello', JSON.stringify(this.text), {})
    },
    initWebSocket () {
      this.connection()
    },
    connection () {
      const socket = new SockJS(this.$baseUrl + '/chat')
      this.stompClient = Stomp.over(socket)
      this.stompClient.connect({}, (frame) => {
        this.stompClient.subscribe('/topic/greetings', (greeting) => {
          console.log(JSON.parse(greeting.body))
        })
      })
    }
  }
}
</script>

<style scoped>

</style>

重點是{}參數放最后面！！！！！

哎我擦

 

 接口代碼：

package org.just.computer.mathproject.Controller.WebSocket;

import org.just.computer.mathproject.Bean.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;

import java.security.Principal;

@Controller
public class GreetingController {
    @MessageMapping("/hello")
    @SendTo("/topic/greetings")
    public Message greeting(String content, Principal pl) throws Exception{
        Message message = new Message();
        message.setContent(content);
        message.setName(pl.getName());
        return message;
    }
}