zoukankan      html  css  js  c++  java
  • 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;
        }
    }
  • 相关阅读:
    Code Review(代码的自我评审)
    在ANDROID STUDIO环境下使用Espresso 测试框架进行UI测试
    第一个迭代任务——倒计时
    Scrum的3种角色划分——倒计时
    需求分析(WBS图)
    countdown(计时器)
    Countdown(计时器)
    团队模式选择
    软件开发流程
    软件团队的模式
  • 原文地址:https://www.cnblogs.com/godoforange/p/11441120.html
Copyright © 2011-2022 走看看