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" >> ...
随机推荐
- xml解析-jaxp遍历结点
jaxp遍历结点 把xml中所有的结点都打印出来 // 遍历结点把所有元素名称打印出来 / 1.创建解析器工厂 * 2.根据解析器工厂创建解析器 * 3.解析xml返回document * * 4.得 ...
- Dynamics 365 Customer Engagement中使用JavaScript和C#调用操作Action示例
微软动态CRM专家罗勇 ,回复334或者20190509可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Action (操作)是流程的一种,可以在工作流中调用,可以使用 ...
- [b0032] python 归纳 (十七)_线程同步_信号量Semaphore
代码: # -*- coding: utf-8 -*- """ 多线程并发同步 ,使用信号量threading.Semaphore 逻辑: 多个线程,对同一个共享变量 , ...
- 一些有价值bug产生的思考
1.异步处理时防止重复点击的逻辑校验 场景 打款请求时,进入异步处理的队列,生成一个任务号,存在如数据库,且状态为未完成.此时,如果并发操作,如重复点击或者重复调用接口,则发出的两条请求可能被分配到不 ...
- 巡风扫描器web界面工作流程
这两周学习了巡风扫描器的搭建,也在学长的带领下看了各部分的下源代码,为了加深记忆,梳理一下巡风大体的工作流程,主要通过web端的页面分析,错误的地方还请大佬们多多指正. 整体看一下巡风的扫描流程:登陆 ...
- 关联规则 -- apriori 和 FPgrowth 的基本概念及基于python的算法实现
apriori 使用Apriori算法进行关联分析 貌似网上给的代码是这个大牛写的 关联规则挖掘及Apriori实现购物推荐 老师 Apriori 的python算法实现 python实现关联规则 ...
- Nginx 安装与部署配置
下载 官方网站:https://nginx.org/en/download.html Windows下安装 安装 下载后解压(切记不能含有中文路径!!),文件结构如图(我解压的路径就有中文,记得拷贝放 ...
- Windows开机自动登录账户
如何在Windows设了账户密码的情况下开机自动登录账户,有以下两种方法. 通过Windows设置自动登录 按“Win+R”组合键打开“运行”框内输入“netplwiz”. 打开以下窗口,将“要使用本 ...
- Paper | BLIND QUALITY ASSESSMENT OF COMPRESSED IMAGES VIA PSEUDO STRUCTURAL SIMILARITY
目录 1. 技术细节 1.1 得到MDI 1.2 判别伪结构,计算伪结构相似性 2. 实验 动机:作者认为,基于块的压缩会产生一种伪结构(pseudo structures),并且不同程度压缩产生的伪 ...
- 深入理解Java8中Stream的实现原理
Stream Pipelines 前面我们已经学会如何使用Stream API,用起来真的很爽,但简洁的方法下面似乎隐藏着无尽的秘密,如此强大的API是如何实现的呢?比如Pipeline是怎么执行的, ...