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>

重点是{}参数放最后面!!!!!

哎我擦

Vue Stomp+SocketJS 数据报错[Object object]_第1张图片

 

 接口代码:

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

 

你可能感兴趣的:(Vue Stomp+SocketJS 数据报错[Object object])