vue发送websocket请求和http post请求
直接上代码:
pdf.vue
<script>
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
import qs from "qs" export default {
name: "pdf",
data() {
return {
newsData: [],
tagGuid_mx: "",
tagGuid_4AA_Ia: "",
tagGuid_4AA_P: "",
tagGuid_4AA_Q: "", tagGuid_1AA_6_Ib: "",
tagGuid_1AA_6_Ic: "",
tagGuid_pdfwd: "",
tagGuid_pdfsd: "",
stompClient: '',
timer: '',
visibilityHeZha: "hidden",
visibilityFenZha: "hidden",
hezhaData:[]
}
},
methods: {
initWebSocket() {
this.connection();
let that = this;
// 断开重连机制,尝试发送消息,捕获异常发生时重连
this.timer = setInterval(() => {
try {
that.stompClient.send("test");
} catch(err) {
console.log("断线了: " + err);
that.connection();
}
}, 5000);
},
connection() {
// 建立连接对象
let socket = new SockJS('http://XXX.XX.XX.XXX:8081/energy-system-websocket');
// 获取STOMP子协议的客户端对象
this.stompClient = Stomp.over(socket);
// 定义客户端的认证信息,按需求配置
let headers = {
access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d"
// Authorization: ''
}
// 向服务器发起websocket连接
this.stompClient.connect(headers, () => {
this.stompClient.subscribe('/user/topic/data', (msg) => { // 订阅服务端提供的某个topic
console.log('广播成功')
// console.log(msg); // msg.body存放的是服务端发送给我们的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body); }, headers),
this.stompClient.subscribe('/user/topic/alarm', (msg) => { // 订阅服务端提供的某个topic
console.log('广播告警成功')
//console.log(msg); // msg.body存放的是服务端发送给我们的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body); }, headers);
this.stompClient.subscribe('/user/topic/cmd_ack', (msg) => { // 订阅服务端提供的某个topic
console.log('下控指令应答成功')
//console.log(msg); // msg.body存放的是服务端发送给我们的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body); }, headers); this.stompClient.subscribe('/user/topic/response', (msg) => { //指令的应答(仅表示服务端接收成功或者失败)
console.log('SEND指令的应答成功')
//console.log(msg); // msg.body存放的是服务端发送给我们的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body);
this.newsData = this.newsData.data;
console.log(this.newsData);
for(var i = 0; i < this.newsData.length; i++) {
//母线uab
if(this.newsData[i].tagGuid == "a3a95bf3-fef8-454e-9175-19a466e40c3d") {
this.tagGuid_mx = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : ""
}
//电容柜4AA_Ia
if(this.newsData[i].tagGuid == "4cf6e256-6c3a-4853-a087-dfd263916dab") {
this.tagGuid_4AA_Ia = this.newsData[i].value
}
//电容柜4AA_P
if(this.newsData[i].tagGuid == "52e8265a-0a20-4e3b-a670-14a8df373bf7") {
this.tagGuid_4AA_P = this.newsData[i].value
}
//电容柜4AA_Q
if(this.newsData[i].tagGuid == "ef369a17-0bbd-4295-8ac7-816c23fcb065") {
this.tagGuid_4AA_Q = this.newsData[i].value != '' ? this.newsData[i].value.toFixed(2) : 0
} //配电房温度
if(this.newsData[i].tagGuid == "ead49446-07f9-43b7-a4ce-cd974d53728e") {
this.tagGuid_pdfwd = this.newsData[i].value
}
//配电房湿度
if(this.newsData[i].tagGuid == "baaf1733-124e-46fd-9d58-c069b747317a") {
this.tagGuid_pdfsd = this.newsData[i].value
} }
}, headers);
this.stompClient.send("/app/monitor/subTagGuid", // # 订阅需要监控的测点ID
headers, JSON.stringify({
"stationCode": "00013",
"tagGuids": [
"a3a95bf3-fef8-454e-9175-19a466e40c3d", //
"4cf6e256-6c3a-4853-a087-dfd263916dab", //
"52e8265a-0a20-4e3b-a670-14a8df373bf7", //
"ef369a17-0bbd-4295-8ac7-816c23fcb065", // "baaf1733-124e-46fd-9d58-c069b747317a"
]
})
) //用户加入接口
}, (err) => {
// 连接发生错误时的处理函数
console.log('失败')
console.log(err);
});
}, //连接 后台
disconnect() {
if(this.stompClient) {
this.stompClient.disconnect();
}
}, // 断开连接
changeColor(evt) {
this.rect.setAttributeNS(null, "fill", "blue")
},
shl3aa4() {
this.visibilityHeZha = this.visibilityHeZha == "visibility" ? "hidden" : "visibility";
this.visibilityFenZha = this.visibilityFenZha == "visibility" ? "hidden" : "visibility";
},
shl3aa42() {
setTimeout(() => {
this.visibilityHeZha = "hidden";
this.visibilityFenZha = "hidden";
}, 1200)
},
hezha() {
//3#楼3AA-4_合闸
this.$axios.post("/energy-system/auth/monitor/ykcmd", {
checkUser: "admin",
checkPass: "123456",
stationCode:"00013",
tagGuid: "89d1d312-17be-4d20-8471-baa08ba734e0",
value: 1
})
.then(res => {
this.hezhaData=JSON.parse(res.config.data)
if(this.hezhaData.tagGuid=="89d1d312-17be-4d20-8471-baa08ba734e0" && this.hezhaData.value==1){
alert("合闸成功!");
}else{
alert("合闸失败!请联系管理员");
} })
.catch(error => {
console.log(error)
})
},
fenzha() {
alert("分闸"); //3#楼3AA-4_分闸
}
},
mounted() {
this.initWebSocket();
},
beforeDestroy: function() { // 页面离开时断开连接,清除定时器
this.disconnect();
clearInterval(this.timer);
},
created() { }
}
</script>
在main.js设置全局http地址:
Axios.defaults.baseURL = 'http://XXX.XXX.XX.XXX:9001';
Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
在main.js中设置header中token值:
// 添加请求拦截器
Axios.interceptors.request.use(function(config) {
config.headers.access_token = "add7c097-f12b-40fe-8e48-6fe1f2120fa5";
// config.headers.Authorization = localStorage.token; //将token设置成请求头
console.log("请求============" + config);
// 在发送请求之前做些什么
return config;
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error);
});
数据刷起来!
vue发送websocket请求和http post请求的更多相关文章
- httpclient就是个能发送http连接的工具包,包括能发送post请求和get请求
1.httpclient就是个能发送http连接的工具包,包括能发送post请求和get请求. http 连接一次就有返回流.http是个双向的嘛.只有连接了,就会有输出返回流. 所以在执行http连 ...
- 发送http请求和https请求的工具类
package com.haiyisoft.cAssistant.utils; import java.io.IOException;import java.util.ArrayList; impor ...
- java使用httpclient封装post请求和get的请求
在我们程序员生涯中,经常要复用代码,所以我们应该养成时常整理代码的好习惯,以下是我之前封装的httpclient的post和get请求所用的代码: package com.marco.common; ...
- soap发送报文请求和dom4j解析XML并且获得指定名称的节点信息
package com.lzw.b2b.soap; import java.io.ByteArrayInputStream;import java.io.InputStream;import java ...
- get请求和post的请求的区别
https://www.cnblogs.com/logsharing/p/8448446.html
- HttpLitener处理http请求和Websocket请求
HttpLitener处理http请求和Websocket请求的案例具体步骤如下 1.新建控制台项目TestClientWebsocket 2.选择项目右键添加类HttpAndWebsocket,代码 ...
- Ajax中get请求和post请求
我们在使用Ajax向服务器发送数据时,可以采用Get方式请求服务器,也可以使用Post方式请求服务器,那么什么时候该采用Get方式,什么时候该采用Post方式呢? Get请求和Post请求的区别: 1 ...
- slave IO流程之二:注册slave请求和dump请求
slave IO流程已经在http://www.cnblogs.com/onlyac/p/5815566.html中有介绍 这次我们要探索注册slave请求和dump请求的报文格式和主要流程. 一.注 ...
- iOS开发网络篇—GET请求和POST请求
iOS开发网络篇—GET请求和POST请求 一.GET请求和POST请求简单说明 创建GET请求 // 1.设置请求路径 NSString *urlStr=[NSString stringWithFo ...
随机推荐
- Android的开机启动流程
1.Android的开机启动流程 Android的层次框架图,如下所示: 图片清晰地展示了Android的五层架构,从上到下依次是:应用层.应用框架层.库层.运行时层以及Linux内核层.Androi ...
- thinkphp伪静态怎么实现
thinkphp如何实现伪静态? 去掉 URL 中的 index.php ThinkPHP 作为 PHP 框架,是单一入口的,那么其原始的 URL 便不是那么友好.但 ThinkPHP 提供了各种机制 ...
- C# 使用CefSharp嵌入网站
最近有一个项目,需要在winform中嵌套web网站,从网上了解到几个相关的组件有winform自带的IE内核的WebBrowser,有第三方组件谷歌内核的webkit.cefsharp.chromi ...
- Effective.Java第34-44条(枚举)
34. 使用枚举类型替代整型常量 常量的语义表达不清晰,只能靠前面的名称来区分.枚举具有可读性.更安全.更强大等优势.而且枚举类型对象之间的值比较可以使用==来比较值是否相等的,不是必须使用equa ...
- [Atcoder ARC103D]Robot Arms
题目大意:平面上有$n$个点,要求你构造$m$条边(满足$m\leqslant40$),使得可以从原点到达给定的$n$个点(边必须平行于坐标轴).并要求输出每一条边的方向,每条边必须都使用,无解输出$ ...
- Java并发编程: CountDownLatch、CyclicBarrier和 Semaphore
java 1.5提供了一些非常有用的辅助类来帮助并发编程,比如CountDownLatch,CyclicBarrier和Semaphore. 1.CountDownLatch –主线程阻塞等待,最后完 ...
- 《MySQL实战45讲》学习笔记2——MySQL的日志系统
一.日志类型 逻辑日志:存储了逻辑SQL修改语句 物理日志:存储了数据被修改的值 二.binlog 1.定义 binlog 是 MySQL 的逻辑日志,也叫二进制日志.归档日志,由 MySQL Ser ...
- ML学习笔记之XGBoost实现对鸢尾花数据集分类预测
import xgboost as xgb import numpy as np import pandas as pd from sklearn.model_selection import tra ...
- c#winform简单实现Mysql数据库的增删改查的语句
通过简单的SQL语句实现对数据库的增删改查. 窗口如下: 定义打开与关闭连接函数,方便每次调用: 增加指令: 删除指令: 修改指令: 查找指令: 表格情况:
- Asp.Net 技术
Asp.Net 技术Nuget 管理器Spring.NET 框架Spring.core 包 微服务Consul .NetCore 框架:Spring.net Nhibernate 框架Dapper.n ...