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;
}
}
Vue Stomp+SocketJS 数据报错[Object object]的更多相关文章
- Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
Vue的报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' ...
- Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#<Object>‘的解决方法
发现问题 运行一下以前的一个Vue+webpack的 vue仿新闻网站 小项目,报错 由于自己vue学习不深入,老是这个报错,找了好久(确切的说是整整一下午^...^)才找到原因 -v- Uncau ...
- Vue 使用自定义组件时报错:Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
自己试做了一下vue的插件 参考element-ui: 写了一个组件 import message from './packages/message/index.js'; const install ...
- vue运行报错error:Cannot assign to read only property 'exports' of object '#<Object>'
用weex做项目的时候,npm start 之后一直报错error:Cannot assign to read only property 'exports' of object '#<Obje ...
- Vue不兼容IE8原因以及Object.defineProperty详解
Vue不兼容IE8原因以及Object.defineProperty详解 原因概述: Vue.js使用了IE8不能模拟的ECMAScript5特性. Vue.js支持所有兼容ES5的浏览器. Vue将 ...
- 在Vue中使用i18n 国际化遇到 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
最近用Vue在搭建前端框架,在引用i18n时,运行的时候报错:Uncaught TypeError: Cannot assign to read only property 'exports' of ...
- oracle创建包后执行报错:object omgmig.test_package is invalid.
今天学习了一下oracle的包的写法,然后碰到这么个问题.包声明和包主体都正确,但是就是执行报错:object omgmig.test_package is invalid. 这是会报错的sql,看起 ...
- 安装Django时报错'module' object has no attribute 'lru_cache'
使用pip方法安装Django时报错'module' object has no attribute 'lru_cache' 解决办法如下 命令行输入命令sudo pip install Django ...
- python报错'str' object is not callable
>>> x=1.235 >>> int(x) 1 >>> str="fsgavfdbafdbntsbgbt" >> ...
随机推荐
- Html 页面底部添加版权信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 「杂谈」最有可能成为第五个一线城市,苏州 or 杭州?
最有可能成为第五个一线城市,苏州 or 杭州? 一线城市的几个硬指标 所谓的"一线城市",并不是政府提倡或者说是官方发布的城市称号,是最近十几年因房地产行业的强势崛起,一些媒体尤其 ...
- C和C++中的struct的不同
C和C++中的struct的不同: (1)定义变量: C语言中: struct stu { ...... }; struct stu student; C++语言中: struct stu { . ...
- linux远程Windows服务器
Rdesktop -f ip 端口 Ctrl+alt+enter退出全屏
- Go命令行库Cobra的核心文件root.go
因为docker及Kubernetes都在用cobra库,所以记录一下. 自定义的地方,高红标出. root.go /* Copyright © 2019 NAME HERE <EMAIL AD ...
- 5.Java基础_Java算术/字符/字符串/赋值运算符
/* 算术/字符/字符串/赋值 运算符 */ public class OperatorDemo01 { public static void main(String[] args){ //算术运算符 ...
- 高频Python面试题分享
一.Python语言中你用过哪些方式来实现进程间通信1.队列Queue 2.Pipe管道 只适用于两个进程之间的通信, pipe的效率高于queue 3.共享内存 4.socket套接字(UDP即可) ...
- Centos 7+KVM(Windows Server 2008 r2 )
KVM虚拟机 Kernel-based Virtual Machine的简称,是一个开源的系统虚拟化模块,自Linux 2.6.20之后集成在Linux的各个主要发行版本中.它使用Linux自身的调度 ...
- c# WF 第11节 RichTextBox
本节内容: 1:RichTextBox的简介: 2:实例 1:RichTextBox的简介: 2:实例 实现实例: 1个RichTextBox 2个label 9 个button 步骤一: 步骤2 ...
- LeetCode 分治算法
分治算法:是将问题划分为一些独立的子问题,递归的求解个子问题,然后合并子问题的解而得到原问题的解. 分治算法步骤 step1 分解:将原问题分解为若干个规模较小,相互独立,与原问题形式相同的子问题: ...