vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的實(shí)例代碼
更新時(shí)間：2019年07月11日 11:42:12 作者：gh786395613
這篇文章主要介紹了vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
先給大家介紹下vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求
直接上代碼：
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: "", 49 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;
// 斷開(kāi)重連機(jī)制,嘗試發(fā)送消息,捕獲異常發(fā)生時(shí)重連
this.timer = setInterval(() => {
try {
that.stompClient.send("test");
} catch(err) {
console.log("斷線了: " + err);
that.connection();
}
}, 5000);
},
connection() {
// 建立連接對(duì)象
let socket = new SockJS('http://XXX.XX.XX.XXX:8081/energy-system-websocket');
// 獲取STOMP子協(xié)議的客戶(hù)端對(duì)象
this.stompClient = Stomp.over(socket);
// 定義客戶(hù)端的認(rèn)證信息,按需求配置
let headers = {
access_token: "92c31bd5-ae43-4f25-9aad-c4eb1a92d61d"
// Authorization: ''
}
// 向服務(wù)器發(fā)起websocket連接
this.stompClient.connect(headers, () => {
this.stompClient.subscribe('/user/topic/data', (msg) => { // 訂閱服務(wù)端提供的某個(gè)topic
console.log('廣播成功')
// console.log(msg); // msg.body存放的是服務(wù)端發(fā)送給我們的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body);
}, headers),
this.stompClient.subscribe('/user/topic/alarm', (msg) => { // 訂閱服務(wù)端提供的某個(gè)topic
console.log('廣播告警成功')
//console.log(msg); // msg.body存放的是服務(wù)端發(fā)送給我們的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body);
}, headers);
this.stompClient.subscribe('/user/topic/cmd_ack', (msg) => { // 訂閱服務(wù)端提供的某個(gè)topic
console.log('下控指令應(yīng)答成功')
//console.log(msg); // msg.body存放的是服務(wù)端發(fā)送給我們的信息
console.log(msg.body);
this.newsData = JSON.parse(msg.body);
}, headers);
this.stompClient.subscribe('/user/topic/response', (msg) => { //指令的應(yīng)答（僅表示服務(wù)端接收成功或者失?。?
console.log('SEND指令的應(yīng)答成功')
//console.log(msg); // msg.body存放的是服務(wù)端發(fā)送給我們的信息
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
}276 //配電房溫度
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", // # 訂閱需要監(jiān)控的測(cè)點(diǎn)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", //334 "baaf1733-124e-46fd-9d58-c069b747317a"
]
})
) //用戶(hù)加入接口
}, (err) => {
// 連接發(fā)生錯(cuò)誤時(shí)的處理函數(shù)
console.log('失敗')
console.log(err);
});
}, //連接 后臺(tái)
disconnect() {
if(this.stompClient) {
this.stompClient.disconnect();
}
}, // 斷開(kāi)連接
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("合閘失?。≌?qǐng)聯(lián)系管理員");
}379 })
.catch(error => {
console.log(error)
})
},
fenzha() {
alert("分閘"); //3#樓3AA-4_分閘
}
},
mounted() {
this.initWebSocket();
},
beforeDestroy: function() { // 頁(yè)面離開(kāi)時(shí)斷開(kāi)連接,清除定時(shí)器
this.disconnect();
clearInterval(this.timer);
},
created() {
}
}
</script>
在main.js設(shè)置全局http地址：
Axios.defaults.baseURL = 'http://XXX.XXX.XX.XXX:9001'; Axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
在main.js中設(shè)置header中token值：
// 添加請(qǐng)求攔截器
Axios.interceptors.request.use(function(config) {
config.headers.access_token = "add7c097-f12b-40fe-8e48-6fe1f2120fa5";
// config.headers.Authorization = localStorage.token; //將token設(shè)置成請(qǐng)求頭
console.log("請(qǐng)求============" + config);
// 在發(fā)送請(qǐng)求之前做些什么
return config;
}, function(error) {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
});
數(shù)據(jù)刷起來(lái)！
ps：下面給大家介紹下vue websocket 請(qǐng)求
首先寫(xiě)一個(gè)公共方法
socket.js
function getSocket(url, params, callback) {
let socket;
if (typeof (WebSocket) === 'undefined') {
console.log('您的瀏覽器不支持WebSocket');
} else {
console.log('您的瀏覽器支持WebSocket');
// 初始化 WebSocket 對(duì)象，指定要連接的服務(wù)器地址與端口建立連接
socket = new WebSocket(url);
// 打開(kāi)事件
socket.onopen = function() {
console.log('Socket 已打開(kāi)');
socket.send(params);
};
// 獲得消息事件
socket.onmessage = function(msg) {
// 發(fā)現(xiàn)消息進(jìn)入, 開(kāi)始處理前端觸發(fā)邏輯
callback(msg, socket);
};
// 關(guān)閉事件
socket.onclose = function() {
console.log('Socket 已關(guān)閉');
};
// 發(fā)生了錯(cuò)誤事件
socket.onerror = function() {
console.log('Socket 發(fā)生了錯(cuò)誤,請(qǐng)刷新頁(yè)面');
// 此時(shí)可以嘗試刷新頁(yè)面
};
}
}
export {
getSocket
};
使用
test.vue
<script>
import {getSocket} from '@/utils/socket.js';
export default {
data() {
return {
wsData: {}, // 保存 websocket 數(shù)據(jù)對(duì)象
form: { // 表單
name: '',
age: ''
}
}
},
beforeDestroy() {
this.wsData.close(); // 關(guān)閉 websocket
},
created() {
this.getSocketData();
},
methods: {
// 獲取數(shù)據(jù)
getSocketData() {
let params = this.form;
getSocket(
`ws://path`,
JSON.stringify(params),
(data, ws) => {
console.log(data, ws);
// 保存數(shù)據(jù)對(duì)象, 以便發(fā)送消息
this.wsData = ws;
}
);
},
// 發(fā)送數(shù)據(jù)
sendSocketData() {
let params = this.form;
params.name = 'xx';
params.age= '18';
this.wsData.send(JSON.stringify(params));
}
}
}
</script>
總結(jié)
以上所述是小編給大家介紹的vue發(fā)送websocket請(qǐng)求和http post請(qǐng)求的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器的方法
最近在項(xiàng)目中使用 webpack 打包后升級(jí)，用戶(hù)反饋使用瀏覽器（chrome 45）訪問(wèn)白屏。經(jīng)過(guò)排查發(fā)現(xiàn)：由于 chrome 45 無(wú)法兼容 ES6 語(yǔ)法導(dǎo)致的，接下來(lái)給大家介紹下Vue中?引入使用?babel-polyfill?兼容低版本瀏覽器方法,需要的朋友可以參考下2023-02-02
基于vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動(dòng)的方法
本篇文章主要介紹了基于vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)錨點(diǎn)鏈接平滑滾動(dòng)的方法，非常具有實(shí)用價(jià)值，有興趣的可以了解一下2018-01-01
這篇文章主要介紹了vue3組件的掛載更新流程，文中通過(guò)代碼示例給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解
今天小編就為大家分享一篇對(duì)vuex中g(shù)etters計(jì)算過(guò)濾操作詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn)的過(guò)程詳解
這篇文章主要介紹了HBuilder導(dǎo)入vue項(xiàng)目并通過(guò)域名訪問(wèn),一般情況下運(yùn)行vue項(xiàng)目需要安裝node.js，通過(guò)npm命令來(lái)安裝vue組件和運(yùn)行vue項(xiàng)目，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細(xì)介紹了vue-table實(shí)現(xiàn)添加和刪除，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
vue項(xiàng)目使用websocket連接問(wèn)題及解決
這篇文章主要介紹了vue項(xiàng)目使用websocket連接問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue如何更改表格中的某一行選項(xiàng)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了Vue.js -- 過(guò)濾器使用總結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)簡(jiǎn)易打地鼠游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-08-08