websockData: [],为获取到的数据
hasConnected: false,是否已连接
1、首先获取到后端给的 websocket 请求地址，可以先对该地址进行测试（websocket在线测试工具）
存放在 config —— index.js
2、创建websock.js文件，放在 store —- module —- websocket.js
import { resolve } from "any-promise";
import store from "@/store";
import config from '@/config';
// import { GetRelationList2 } from "../../api/client";
const wsUrl = process.env.NODE_ENV === 'development' ? config.WebSocketUrl.dev : config.WebSocketUrl.pro
export const websocket = {
state: {
websock: null,
// 获取到的数据
websockData: [],
websockData1:[],
// 是否已连接
hasConnected: false,
clients: []
},
mutations: {
setConnection(state, websock) {
state.websock = websock
},
sethasConnected(state, hasConnected) {
state.hasConnected = hasConnected;
},
setDatas(state, data) {
state.clients = data;
},
setWebsockData(state, data) {
state.websockData.push(data);
},
setWebsockData1(state, data) {
state.websockData.push(data);
}
},
//该部分为了获取websocket的相关方法。会发现此处跟mutations 里的写法是类似的，但是，想使用return，需要将相关数据写在getters里面。
getters: {
STAFF_UPDATE(state) {
return state.websock
},
SATFF_DATAS(state) {
return state.clients
}
},
actions: {
STAFF_WEBSOCKET({ state, commit }) {
return new Promise(async (resolve, reject) => {
try {
// const wsuri = "ws://192.168.199.171:8009/ws";
// const wsUrl = "ws://192.168.199.203:8920/api/Chat/Connect?nickName=5678929"
let connection = new WebSocket(wsUrl);
console.log(wsUrl,'0000000000000000000')
commit('setConnection', connection);
commit('sethasConnected', true);
//默认发送UserId关联connectionId
//连接
websocket.state.websock.onopen = function () {
console.log('连接成功111')
websocket.state.websock.send('我已连接成功')
}
// 接收 服务器返回的数据
websocket.state.websock.onmessage = function (e) {
// console.log("服务器返回:" + e.data);
//数据 接收
var dataTitle = JSON.parse(e.data).pragma
var dataList = JSON.parse(e.data).data
if (dataTitle == 'average') {
let actions = {
// 以下数据为项目中真实用到的数据
temperature: dataList.Temperature,//温度
humidity: dataList.Humidity,//湿度
o2: dataList.O2,//氧气
cO2: dataList.CO2,//二氧化碳
voc: dataList.VOC,//VOC
cH2O: dataList.CH2O,//甲醛
pressure: dataList.Pressure,//气压
waterPenetration: dataList.WaterPenetration, //渗水
invade: dataList.Invade, //入侵情况
};
commit('setWebsockData', actions);
// 报警信息
} else if(dataTitle == 'tempAlarm') {
console.log(JSON.parse(e.data).data,'报警信息')
console.log(dataList,'111111111')
let alarmInfo = dataList.Result;
commit('setWebsockData1', alarmInfo);
// 报警条数
}
// else if(dataTitle == 'alarmCount') {
// // console.log(JSON.parse(e.data).data,'报警条数')
// let alarmInfo = dataList.marqueeList;
// commit('setWebsockData', alarmInfo);
// }
// //请求在线终端列表
//store.dispatch("GetRelationList");
}
//关闭
websocket.state.websock.onclose = function (e) {
websocket.state.websock.close();
// //请求在线终端列表
// store.dispatch("GetRelationList");
}
} catch (error) {
reject(error)
setTimeout(() => this.STAFF_WEBSOCKET(), 5000);//连接失败后自动重连
console.log("链接失败")
}
})
},
GetRelationList({ state, commit }) {
return new Promise((resolve, reject) => {
try {
// debugger
// const prm = GetRelationList2();
// prm.then(res => {
// commit("setDatas", res.data.result)
// resolve(res.data.result)
// })
} catch (error) {
reject(error)
}
})
}
}
}
export default websocket
4、在router — index.js 中打开websocket
5、在页面上的具体使用方法
