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

    }

}