310 lines
15 KiB
Vue
310 lines
15 KiB
Vue
<template>
|
||
<div >
|
||
<div >
|
||
<div style="width:100%;height:900px;display:inline-block;border:1px soild #eee;">
|
||
<iframe id="mapModule" src="./VideoWeb/index.html" frameborder="0" style="width: 100%; height:100%;"></iframe>
|
||
<!-- <iframe src="./VideoWeb/index.html" style="height: 100%; width: 100%;border: none"
|
||
ref="iframe"></iframe> -->
|
||
</div>
|
||
<el-dialog title="提示" :visible.sync="showUpdateCertificate" width="30%">
|
||
<el-row>
|
||
<el-col :span="6">
|
||
文件选择：
|
||
</el-col>
|
||
<el-col :span="18">
|
||
<el-upload action="https://jsonplaceholder.typicode.com/posts/">
|
||
<el-button size="small" type="primary">点击上传</el-button>
|
||
</el-upload>
|
||
</el-col>
|
||
</el-row>
|
||
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button type="primary" @click="showUpdateCertificate = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import mqtt from "mqtt"; // mqtt协议
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
form: {
|
||
name1: '离线',
|
||
name2: '重新配置',
|
||
state: '关',
|
||
endTime: '连接',
|
||
blacklist: '-1x-1',
|
||
autograph: '-1x-1',
|
||
version: '0',
|
||
version1: '0',
|
||
version2: '0',
|
||
version4: '',
|
||
version5: '不受支持的',
|
||
version6: '不受支持的',
|
||
version7: '不受支持的',
|
||
version8: '不受支持的',
|
||
},
|
||
showUpdateCertificate: false,
|
||
}
|
||
},
|
||
created() {
|
||
this.testMqtt()
|
||
|
||
},
|
||
methods: {
|
||
// 测试：mqtt测试
|
||
testMqtt() {
|
||
this.getDataByMqtt()
|
||
},
|
||
// mqtt订阅（独立）
|
||
getDataByMqtt(url, topic, cIdNum) {
|
||
|
||
const clientId = "test_id_" + String(new Date().getTime()); // 用户名
|
||
// const host = 'ws://49.234.27.18:10087/'; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||
const host = 'ws://172.16.1.168:10087/';
|
||
|
||
const options = {
|
||
// 配置
|
||
// 测试：订阅本机IP
|
||
// host: host,
|
||
// port: port,
|
||
// host:"172.16.1.168:10086",
|
||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
||
username: 'admin', // 用户名（可选）
|
||
password: '123456', // 密码（可选）
|
||
clientId: clientId, // 客户端ID，默认随机生成
|
||
protocolId: "MQTT",
|
||
protocolVersion: 4,
|
||
clean: true, // false在离线时接收QoS1和2的消息
|
||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||
will: {
|
||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||
topic: "img1", // 要发布的主题
|
||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||
qos: 0, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||
retain: false, // 保留标志
|
||
},
|
||
};
|
||
if (this.mqttClient == undefined) {
|
||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host) // 连接
|
||
// 错误回调
|
||
// console.log("this.mqttClient", this.mqttClient)
|
||
this.mqttClient.on("error", (err) => {
|
||
console.log("[MQTT-TEST] 连接错误：", err);
|
||
this.mqttClient.end();
|
||
});
|
||
// 重连回调
|
||
this.mqttClient.on("reconnect", (reconnect) => {
|
||
// console.log("[MQTT-TEST] 重连中……", reconnect);
|
||
});
|
||
// 连接回调
|
||
this.mqttClient.on("connect", (connect) => {
|
||
// console.log("[MQTT-TEST] 已连接的客户端ID: ", connect);
|
||
// 订阅
|
||
this.mqttClient.subscribe('img0', { qos: 0 });
|
||
this.mqttClient.publish('aaa', '111');
|
||
this.mqttClient.subscribe('img1', { qos: 0 });
|
||
this.mqttClient.subscribe('img2', { qos: 0 });
|
||
this.mqttClient.subscribe('img3', { qos: 0 });
|
||
this.mqttClient.subscribe('img4', { qos: 0 });
|
||
this.mqttClient.subscribe('img5', { qos: 0 });
|
||
this.mqttClient.subscribe('img6', { qos: 0 });
|
||
this.mqttClient.subscribe('img7', { qos: 0 });
|
||
this.mqttClient.subscribe('stream0', { qos: 0 });
|
||
this.mqttClient.subscribe('stream1', { qos: 0 });
|
||
this.mqttClient.subscribe('stream2', { qos: 0 });
|
||
this.mqttClient.subscribe('stream3', { qos: 0 });
|
||
this.mqttClient.subscribe('stream4', { qos: 0 });
|
||
this.mqttClient.subscribe('stream5', { qos: 0 });
|
||
this.mqttClient.subscribe('stream6', { qos: 0 });
|
||
this.mqttClient.subscribe('stream7', { qos: 0 });
|
||
});
|
||
|
||
// 接收回调
|
||
this.mqttClient.on("message", (topic, message, packet) => {
|
||
if (topic.indexOf("img0") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img1") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
// console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img2") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img3") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img4") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img5") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
} else if (topic.indexOf("img6") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
}else if (topic.indexOf("img7") != -1) {
|
||
try {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp) //这一步报错则返回的是二进制流图片，不报错则返回的是JSON的错误提示数据
|
||
console.log("msg", msg) //msg为转换后的JSON数据
|
||
document.getElementById("mapModule").contentWindow.getDestination(JSON.stringify(msg))
|
||
} catch {
|
||
let imageType = 'arraybuffer';
|
||
const blob = new Blob([message], { type: imageType })
|
||
const imageUrl = (window.URL || window.webkitURL).createObjectURL(blob)
|
||
console.log("imageUrl", imageUrl)
|
||
}
|
||
}else if (topic.indexOf("stream0") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} else if (topic.indexOf("stream1") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} else if (topic.indexOf("stream2") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} else if (topic.indexOf("stream3") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} else if (topic.indexOf("stream4") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
} else if (topic.indexOf("stream5") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
}else if (topic.indexOf("stream6") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
}else if (topic.indexOf("stream7") != -1) {
|
||
const utf8decoder = new TextDecoder()
|
||
const u8arr = new Uint8Array(message)
|
||
const temp = utf8decoder.decode(u8arr) // 将二进制数据转为字符串
|
||
const msg = JSON.parse(temp)
|
||
document.getElementById("mapModule").contentWindow.getData(JSON.stringify(msg))
|
||
}
|
||
|
||
});
|
||
}
|
||
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.test-div i {
|
||
font-size: 25px;
|
||
}
|
||
|
||
.el-form-item {
|
||
margin-bottom: 0px;
|
||
}
|
||
</style> |