vue发送websocket请求和http post请求

 ?1 <script> ?2 ????import SockJS from ‘sockjs-client‘; ?3 ????import Stomp from ‘stompjs‘; ?4 ????import qs from "qs" ?5 ??6 ????export default { ?7 ????????name: "pdf", ?8 ????????data() { ?9 ????????????return { 10 ????????????????newsData: [], 11 ????????????????tagGuid_mx: "", 12 ????????????????tagGuid_4AA_Ia: "", 13 ????????????????tagGuid_4AA_P: "", 14 ????????????????tagGuid_4AA_Q: "", 49 ????????????????tagGuid_1AA_6_Ib: "", 50 ????????????????tagGuid_1AA_6_Ic: "", 51 ????????????????tagGuid_pdfwd: "", 52 ????????????????tagGuid_pdfsd: "", 53 ????????????????stompClient: ‘‘, 54 ????????????????timer: ‘‘, 55 ????????????????visibilityHeZha: "hidden", 56 ????????????????visibilityFenZha: "hidden", 57 ????????????????hezhaData:[] 58 ????????????} 59 ????????}, 60 ????????methods: { 61 ????????????initWebSocket() { 62 ????????????????this.connection(); 63 ????????????????let that = this; 64 ????????????????// 断开重连机制,尝试发送消息,捕获异常发生时重连 65 ????????????????this.timer = setInterval(() => { 66 ????????????????????try { 67 ????????????????????????that.stompClient.send("test"); 68 ????????????????????} catch(err) { 69 ????????????????????????console.log("断线了: " + err); 70 ????????????????????????that.connection(); 71 ????????????????????} 72 ????????????????}, 5000); 73 ????????????}, 74 ????????????connection() { 75 ????????????????// 建立连接对象 76 ????????????????let socket = new SockJS(‘http://XXX.XX.XX.XXX:8081/energy-system-websocket‘); 77 ????????????????// 获取STOMP子协议的客户端对象 78 ????????????????this.stompClient = Stomp.over(socket); 79 ????????????????// 定义客户端的认证信息,按需求配置 80 ????????????????let headers = { 81 ????????????????????access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d" 82 ????????????????????// ???????????????????Authorization: ‘‘ 83 ????????????????} 84 ????????????????// 向服务器发起websocket连接 85 ????????????????this.stompClient.connect(headers, () => { 86 ????????????????????this.stompClient.subscribe(‘/user/topic/data‘, (msg) => { // 订阅服务端提供的某个topic 87 ????????????????????????????console.log(‘广播成功‘) 88 ????????????????????????????// ???????????????????????console.log(msg); // msg.body存放的是服务端发送给我们的信息 89 ????????????????????????????console.log(msg.body); 90 ????????????????????????????this.newsData = JSON.parse(msg.body); 91 ?92 ????????????????????????}, headers), 93 ????????????????????????this.stompClient.subscribe(‘/user/topic/alarm‘, (msg) => { // 订阅服务端提供的某个topic 94 ????????????????????????????console.log(‘广播告警成功‘) 95 ????????????????????????????//console.log(msg); // msg.body存放的是服务端发送给我们的信息 96 ????????????????????????????console.log(msg.body); 97 ????????????????????????????this.newsData = JSON.parse(msg.body); 98 ?99 ????????????????????????}, headers);100 ????????????????????this.stompClient.subscribe(‘/user/topic/cmd_ack‘, (msg) => { // 订阅服务端提供的某个topic101 ????????????????????????console.log(‘下控指令应答成功‘)102 ????????????????????????//console.log(msg); // msg.body存放的是服务端发送给我们的信息103 ????????????????????????console.log(msg.body);104 ????????????????????????this.newsData = JSON.parse(msg.body);105 106 ????????????????????}, headers);107 108 ????????????????????this.stompClient.subscribe(‘/user/topic/response‘, (msg) => { //指令的应答（仅表示服务端接收成功或者失败）109 ????????????????????????console.log(‘SEND指令的应答成功‘)110 ????????????????????????//console.log(msg); // msg.body存放的是服务端发送给我们的信息111 ????????????????????????console.log(msg.body);112 ????????????????????????this.newsData = JSON.parse(msg.body);113 ????????????????????????this.newsData = this.newsData.data;114 ????????????????????????console.log(this.newsData);115 ????????????????????????for(var i = 0; i < this.newsData.length; i++) {　116 ????????????????????????????//母线uab117 ????????????????????????????if(this.newsData[i].tagGuid == "a3a95bf3-fef8-454e-9175-19a466e40c3d") {　　　　　　118 ????????????????????????????????this.tagGuid_mx = this.newsData[i].value != ‘‘ ? this.newsData[i].value.toFixed(2) : ""119 ????????????????????????????}120 ????????????????????????????//电容柜4AA_Ia121 ????????????????????????????if(this.newsData[i].tagGuid == "4cf6e256-6c3a-4853-a087-dfd263916dab") {　　　　　　122 ????????????????????????????????this.tagGuid_4AA_Ia = this.newsData[i].value　123 ????????????????????????????}124 ????????????????????????????//电容柜4AA_P125 ????????????????????????????if(this.newsData[i].tagGuid == "52e8265a-0a20-4e3b-a670-14a8df373bf7") {　　　　　　126 ????????????????????????????????this.tagGuid_4AA_P = this.newsData[i].value　127 ????????????????????????????}128 ????????????????????????????//电容柜4AA_Q129 ????????????????????????????if(this.newsData[i].tagGuid == "ef369a17-0bbd-4295-8ac7-816c23fcb065") {　　　　　　130 ????????????????????????????????this.tagGuid_4AA_Q = this.newsData[i].value != ‘‘ ? this.newsData[i].value.toFixed(2) : 0　131 ????????????????????????????}276 ????????????????????????????//配电房温度277 ????????????????????????????if(this.newsData[i].tagGuid == "ead49446-07f9-43b7-a4ce-cd974d53728e") {　　　　　　278 ????????????????????????????????this.tagGuid_pdfwd = this.newsData[i].value　279 ????????????????????????????}280 ????????????????????????????//配电房湿度281 ????????????????????????????if(this.newsData[i].tagGuid == "baaf1733-124e-46fd-9d58-c069b747317a") {　　　　　　282 ????????????????????????????????this.tagGuid_pdfsd = this.newsData[i].value　283 ????????????????????????????}284 285 ????????????????????????}286 ????????????????????}, headers);287 ????????????????????this.stompClient.send("/app/monitor/subTagGuid", // # 订阅需要监控的测点ID288 ????????????????????????headers,289 290 ????????????????????????JSON.stringify({291 ????????????????????????????"stationCode": "00013",292 ????????????????????????????"tagGuids": [293 ????????????????????????????????"a3a95bf3-fef8-454e-9175-19a466e40c3d", //294 ????????????????????????????????"4cf6e256-6c3a-4853-a087-dfd263916dab", //295 ????????????????????????????????"52e8265a-0a20-4e3b-a670-14a8df373bf7", //296 ????????????????????????????????"ef369a17-0bbd-4295-8ac7-816c23fcb065", //334 ????????????????????????????????"baaf1733-124e-46fd-9d58-c069b747317a"335 ????????????????????????????]336 ????????????????????????})337 ????????????????????) //用户加入接口338 ????????????????}, (err) => {339 ????????????????????// 连接发生错误时的处理函数340 ????????????????????console.log(‘失败‘)341 ????????????????????console.log(err);342 ????????????????});343 ????????????}, //连接 后台344 ????????????disconnect() {345 ????????????????if(this.stompClient) {346 ????????????????????this.stompClient.disconnect();347 ????????????????}348 ????????????}, // 断开连接349 ????????????changeColor(evt) {350 ????????????????this.rect.setAttributeNS(null, "fill", "blue")351 ????????????},352 ????????????shl3aa4() {353 ????????????????this.visibilityHeZha = this.visibilityHeZha == "visibility" ? "hidden" : "visibility";354 ????????????????this.visibilityFenZha = this.visibilityFenZha == "visibility" ? "hidden" : "visibility";355 ????????????},356 ????????????shl3aa42() {357 ????????????????setTimeout(() => {358 ????????????????????this.visibilityHeZha = "hidden";359 ????????????????????this.visibilityFenZha = "hidden";360 ????????????????}, 1200)361 ????????????},362 ????????????hezha() {363 ????????????????//3#楼3AA-4_合闸364 ????????????????this.$axios.post("/energy-system/auth/monitor/ykcmd", {365 ????????????????????????checkUser: "admin",366 ????????????????????????checkPass: "123456",367 ????????????????????????stationCode:"00013",368 ????????????????????????tagGuid: "89d1d312-17be-4d20-8471-baa08ba734e0",369 ????????????????????????value: 1370 ????????????????????})371 ????????????????????.then(res => {372 ????????????????????????this.hezhaData=JSON.parse(res.config.data)373 ????????????????????????if(this.hezhaData.tagGuid=="89d1d312-17be-4d20-8471-baa08ba734e0" && this.hezhaData.value==1){374 ????????????????????????????alert("合闸成功！");375 ????????????????????????}else{376 ????????????????????????????alert("合闸失败！请联系管理员");377 ????????????????????????}379 ????????????????????})380 ????????????????????.catch(error => {381 ????????????????????????console.log(error)382 ????????????????????})383 ????????????},384 ????????????fenzha() {385 ????????????????alert("分闸"); //3#楼3AA-4_分闸386 ????????????}387 ????????},388 ????????mounted() {389 ????????????this.initWebSocket();390 ????????},391 ????????beforeDestroy: function() { // 页面离开时断开连接,清除定时器392 ????????????this.disconnect();393 ????????????clearInterval(this.timer);394 ????????},395 ????????created() {396 397 ????????}398 ????}399 </script>

// 添加请求拦截器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);});