vue中websoket的使用
首先安装npm install --save websocket-heartbeat-js@^1.0.7
在main.js中 引入并挂载全局方法
import WebsocketHeartbeatJs from 'websocket-heartbeat-js';
if (JSON.parse(getStore('userInfo'))!= null) {
let userId = JSON.parse(getStore('userInfo')).id;
let websocketHeartbeatJs = new WebsocketHeartbeatJs({
// url: 'ws://192.168.0.68:8888/websocket/' + userId
url: 'ws://192.168.0.22:8888/websocket/' + userId
pongTimeout: 1800000,reconnectTimeout: 100
});
Vue.prototype.websocketHeartbeatJs = websocketHeartbeatJs;
}
在app.vue中 建立连接
mounted() {
// console.log(JSON.parse(this.getStore("userInfo")),'--------JSON.parse(this.getStore("userInfo"))-------')
if (JSON.parse(this.getStore("userInfo")).id != "") {
// console.log(JSON.parse(this.getStore("userInfo")).id);
if ("WebSocket" in window) {
this.websocketHeartbeatJs.onopen = function() {};
var that = this;
this.websocketHeartbeatJs.onmessage = function(e) {
// console.log(JSON.parse(e.data),'-------------JSON.parse(e.data)-----------------');
that.$store.state.websocketMsg = JSON.parse(e.data);
在store中存放webscoket信息
// console.log(that.$store.state.websocketMsg);
};
this.websocketHeartbeatJs.onreconnect = function() {};
} else {
alert("当前浏览器 Not support websocket");
}
}
},
在vue组件中使用
computed: {
websocketInfo() {
return this.$store.state.websocketMsg;
//创建完成时存在store中的信息
}
},
watch: {
websocketInfo: function (nv, ov) {
console.log(nv);
this.websocketSuccess = nv.result.success;
this.websocketMsg = nv.result.message;
console.log(this.websocketSuccess, '-----------websocketSuccess----------');
console.log(this.websocketMsg, '----------websocketMsg-------------');
// console.log(nv.result.result.error.code);
if (this.websocketSuccess == true && this.websocketMsg == "true") {
// 创建云盘成功后挂载云主机
if (nv.result.result.inventory != undefined) {
this.diskid = nv.result.result.inventory.uuid;
this.id = this.$store.state.vmId;
}
this.$Notice.destroy({
name: "warning",
duration: 1
});
var imageNames = this.vmName == "" ? "" : "'" + this.vmName + "'";
this.$Notice.success({
title: this.operation == "" ?
this.$store.state.operationed : "云盘"+ imageNames + this.operation +"成功"
});
this.getImagesList(this.pageSize, this.pageNumber);
this.$refs.child.getinfo();
this.$refs.child.chishihua();
this.value2 = true;
// 创建完成挂载云主机
if(this.operation == '' && this.$store.state.operationed == '创建镜像成功'){
this.guazai();
};
this.operation == "" ;
} else if (
this.websocketSuccess == true &&
this.websocketMsg == "false"
) {
var str = nv.result.result.error.details;
// str = str.split("不")[0];
// console.log(str);
this.$Notice.warning({
title: str
});
} else if (
this.websocketSuccess == true &&
this.websocketMsg == ""
) {
this.$Notice.warning({
title: this.$store.state.operationed + "创建中",
duration: 1
});
}
},
},
vue中websoket的使用的更多相关文章
- swoole中websoket创建在线聊天室(php)
swoole中websoket创建在线聊天室(php) swoole现仅支持Linix,macos 创建websocket服务器 首先现在服务器创建一个websocket服务器 <?php // ...
- vue中如何不通过路由直接获取url中的参数
前言:为什么要不通过路由直接获取url中的参数? vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接 ...
- vue中的重要特性
一.vue中的自定义组件 html的代码: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- vue中使用stompjs实现mqtt消息推送通知
最近在研究vue+webAPI进行前后端分离,在一些如前端定时循环请求后台接口判断状态等应用场景用使用mqtt进行主动的消息推送能够很大程度的减小服务端接口的压力,提高系统的效率,而且可以利用mqtt ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- 七、vue中v-for有时候对页面不会重新渲染,数组变化后如何到渲染页面
v-for不能进行双向数据绑定,页面渲染完成后,再次更改v-for遍历的数据,js里面打印的数据看到数据值已经更改,但是页面的数据就是没有渲染,这是为什么呢? vue中v-for和angularj ...
- 【Vue】Vue中的父子组件通讯以及使用sync同步父子组件数据
前言: 之前写过一篇文章<在不同场景下Vue组件间的数据交流>,但现在来看,其中关于“父子组件通信”的介绍仍有诸多缺漏或者不当之处, 正好这几天学习了关于用sync修饰符做父子组件数据双向 ...
随机推荐
- 单点登录之CAS简介
cas官网http://www.ja-sig.org/products/cas/. ok,如今開始本文的重点内容解说,先来了解一下cas 实现single sign out的原理,如图所看到的: ...
- POJ 2636:Electrical Outlets
Electrical Outlets Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9597 Accepted: 718 ...
- hdoj--2187--悼念512汶川大地震遇难同胞——老人是真饿了(贪心)
悼念512汶川大地震遇难同胞--老人是真饿了 Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...
- BZOJ_4398_福慧双修&&BZOJ_2407_探险_分治+dij
BZOJ_4398_福慧双修&&BZOJ_2407_探险_分治+dij Description 菩萨为行,福慧双修,智人得果,不忘其本. ——唐朠立<大慈恩寺三藏法师传> ...
- python 统计文件的个数
import os path = r'F:\1back\picture' #获取当前路径 count = 0 for root,dirs,files in os.walk(path): #遍历统计 i ...
- pgsql数据库应用两点注意
今天在写一个sql脚本时遇到了两个问题,记录一下. 1,pgsql中没有select top n语句,可以用limit n代替. 2,pgsql可以在定义函数存储过程时使用变量,但要注意函数定义中的函 ...
- 用msys1.0+mingw gcc4.7.1编译libodb(C++ ORM)
这里主要使用的是libodb 对sqlite数据库的支持. (1)下载编译sqlite3,当初编译go-sqlite3的时候下载过sqlite3,就直接拿过来用了. start msys.bat gc ...
- 14. extjs中treepanel属性和方法
转自:http://www.cnblogs.com/connortang/p/4414907.html 1.Ext.tree.TreePanel 主要配置项: root:树的根节点. rootVisi ...
- 私有CA和证书
证书类型 证书授权机构的证书 服务器 用户证书 获取证书两种方法 使用证书授权机构: 生成签名请求(csr ) 将csr发送给CA 从CA处接收签名 自签名的证书: 自已签发自己的公钥 openSSL ...
- bzoj 2427: [HAOI2010]软件安装【tarjan+树形dp】
一眼最大权闭合子图,然后开始构图,画了画之后发现我其实是个智障网络流满足不了m,于是发现正确的打开方式应该是一眼树上dp 然后仔细看了看性质,发现把依赖关系建成图之后是个奇环森林,这个显然不能直接dp ...