vue中开发webSocket
先安装 sockjs-client 和 stompjs
npm install sockjs-client
npm install stompjs
<template>
<div>
<el-row :gutter="5"> <div class="head">WebSocket接收后端数据</div> <div class="block">
{{content.age}}
</div>
<el-button type="primary">提交</el-button> </el-row> </div>
</template> <script>
import FloorDashboard from './FloorAndArea'
import Stomp from "stompjs"
import SockJS from "sockjs-client" export default {
name: "Index",
data() {
return {
content: ""
}
},
mounted() {
this.connect();
},
methods: {
connect() {
//连接SockJS的endpoint名称为"endpointOyzc"
let socket = new SockJS('http://test.jd.com:8082/endpointOyzc');
//使用STMOP子协议的WebSocket客户端
let stompClient = Stomp.over(socket); //连接WebSocket服务端
stompClient.connect({}, () => {
//通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
// stompClient.subscribe('/topic/getResponse', function (response) { //广播监听数据
stompClient.subscribe('/user/1/message', (response) => {
let dataType = typeof response.body;
switch (dataType) {
case "string":
this.content = JSON.parse(response.body);
console.log("type is string");
console.log(this.content);
break;
case "object":
console.log(this.content);
console.log("type is string");
this.content = response.body;
}
});
});
}
}
}
</script> <style scoped> </style>
vue中开发webSocket的更多相关文章
- 解决在VUE中绑定WebSocket事件无法传值的问题
this.webSocket.onerror =(env)=>{ this.onError(env) }; https://jsfiddle.net/dko6g9a4/1/
- Vue中使用websocket
<template> <div class="test">websocket demo</div></template> < ...
- 在 vue 中使用 WebSocket
<template> <div class="hello"> <h1>{{ msg }}</h1> <h1>{{ res ...
- atom中开发vue常用插件
atom: 开发利器,界面友好,配色出色,好用的插件众多. language-vue: 这个是首推,因为它就是为vue而生的呀,支持很多vue里的提示.在空的vue页面敲tem,vue模板的提示就自动 ...
- 在pycharm中开发vue
一.在pycharm中开发vue ''' webstorm(vue) pycharm(python) goland(Go语言) idea(java) andrioStuidio(安卓) Php(PHP ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(二十一):在小程序中使用 WebSocket (.NET Core)
本文将介绍如何在 .NET Core 环境下,借助 SignalR 在小程序内使用 WebSocket.关于 WebSocket 和 SignalR 的基础理论知识不在这里展开,已经有足够的参考资料, ...
- vue中如何开发插件
1.vue中提供了install方法用来开发插件 官方:Vue.js 的插件应该有一个公开方法 install.这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象. 2.我的插件目 ...
- vue vuex开发中遇到的问题及解决小技巧
1.在vue的开发中,如果使用了vuex,数据的组装,修改时在mutations中,页面是建议修改变量值的,如果强制修改,控制台就会出现错误.如下: 这种错误虽然不会影响结果,但是是vuex不提倡的方 ...
- 在vue中如何使用WebSocket 以及nginx代理如何配置WebSocket
WebSocket WebSocket是一种网络传输协议,可在单个TCP连接上进行全双工通信.浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输. 浏览器支持情况 现 ...
随机推荐
- codeforces 814 C. An impassioned circulation of affection 【尺取法 or DP】
//yy:因为这题多组数据,DP预处理存储状态比每次尺取快多了,但是我更喜欢这个尺取的思想. 题目链接:codeforces 814 C. An impassioned circulation of ...
- Tomcat的webapps目录下的classes文件夹下缺失编译好的.class文件原因及其解决方法
右键,选择BuildPath: 可以编辑Output folder,指定编译后的文件的存放目录,一般是target/classes目录
- SMB linux&windows共享文件
搭建就不多说了:https://www.xuebuyuan.com/3235974.html 在其中可以用cd(进入目录),ls(罗列文件和文件夹),get(下载文件),put(上载文件) 等命令进行 ...
- 剑指offer5 从尾到头打印链表
错误代码: class Solution { public: vector<int> printListFromTailToHead(ListNode* head){ vector< ...
- 【转】maven命令-P 参数引发的思考
序言: maven 命令:clean package -Dmaven.test.skip=true -P product 1.命令很简单是:清class文件,打包构建,跳过测试,注意最后一个 -P p ...
- 【题解】洛谷P1879 [USACO06NOV] Corn Fields(状压DP)
洛谷P1879:https://www.luogu.org/problemnew/show/P1879 思路 把题目翻译成人话 在n*m的棋盘 每个格子不是0就是1 1表示可以种 0表示不能种 相邻的 ...
- center os 7 修改 mysql 密码
笔记 本redis 密码 654321忘记密码:修改密码update user set authentication_string=password('123456') where user='roo ...
- Oracle session相关数据字典(一)
(一)session相关视图 (1)视图 v$session v$active_session_history dba_hist_active_session_history 如果是多节点数据库,v$ ...
- oracle系列(一)sqlplus命令
该系列是向 韩顺平 老师学习的笔记 高级权限账号:scott pwd sysdba 新建一个 Command Window,也可以 开始,运行 sqlplus 连接命令 --1.0 切换账号 SQ ...
- __doPostBack 方法解析
function __doPostBack(eventTarget, eventArgument)的eventTarget参数是引起回送的控件的ID,eventArgument参数是回调参数(与控件相 ...