124 lines
3.4 KiB
Vue
124 lines
3.4 KiB
Vue
<template>
|
||
<!-- <el-button
|
||
type="primary"
|
||
size="mini"
|
||
@click.prevent="handleMenuSelect('/device')"
|
||
>设备</el-button
|
||
> -->
|
||
<div>
|
||
<!-- 使用:src绑定base64图片 -->
|
||
<img :src="base64Image" alt="Base64 Image" width="100%" height ="100%"/>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { ref, onMounted, inject, onUnmounted } from "vue";
|
||
import router from "@/router/index.js";
|
||
import { ElMessage } from 'element-plus';
|
||
export default {
|
||
data() {
|
||
return {
|
||
circleUrl:
|
||
"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
|
||
device_id: -1,
|
||
base64Image:"",
|
||
cnt: 0,
|
||
intervalId: null,
|
||
tokenData: {
|
||
token: localStorage.getItem("token"),
|
||
ip: localStorage.getItem("ip"),
|
||
userId: localStorage.getItem("userId"),
|
||
username: localStorage.getItem("username"),
|
||
to_user_id: this.to_user_id,
|
||
},
|
||
intervalId: ref(null),
|
||
timerId: null, // 用于存储定时器的ID
|
||
};
|
||
},
|
||
methods: {
|
||
handleMenuSelect(val) {
|
||
this.socket.close();
|
||
router.push(val);
|
||
},
|
||
connectWebSocket() {
|
||
// 连接WebSocket
|
||
let _this = this;
|
||
if (typeof WebSocket == "undefined") {
|
||
console.log("浏览器不支持WebSocket");
|
||
} else {
|
||
console.log("浏览器支持WebSocket");
|
||
let socketUrl =
|
||
"wss://gep.ljsea.xyz/device/get_real_time_image?device_id=" +
|
||
this.device_id +
|
||
"&token=" +
|
||
this.tokenData.token;
|
||
|
||
// console.log("socketUrl:", socketUrl);
|
||
if (this.socket != null) {
|
||
this.socket.close();
|
||
this.socket = null;
|
||
}
|
||
// 开启一个websocket服务
|
||
this.socket = new WebSocket(socketUrl);
|
||
//打开事件
|
||
this.socket.onopen = function () {
|
||
this.loading = false;
|
||
//alert("连接成功");
|
||
ElMessage.success("连接成功!");
|
||
};
|
||
this.socket.onerror = (error) => {
|
||
console.error("WebSocket Error:", error);
|
||
};
|
||
//关闭事件
|
||
this.socket.onclose = function () {
|
||
//alert("连接已关闭!");
|
||
ElMessage.success("连接已关闭!");
|
||
router.push("/user");
|
||
};
|
||
// 浏览器端收消息，获得从服务端发送过来的文本消息
|
||
this.socket.onmessage = async function (msg) {
|
||
//console.log("收到数据====" + msg.data);
|
||
let data = JSON.parse(msg.data); // 对收到的json数据进行解析， 类似这样的：
|
||
console.log("收到数据====" + data);
|
||
// 如果服务器端发送过来的json数据
|
||
if (data.type == "img") {
|
||
_this.base64Image = 'data:image/png;base64,'+data.data
|
||
|
||
// console.log("收到数据====" + msg.data);
|
||
}
|
||
};
|
||
}
|
||
},
|
||
},
|
||
// 生命周期钩子,在组件挂载完成后被调用
|
||
mounted() {
|
||
this.device_id = localStorage.getItem("realvp_device_id");
|
||
this.connectWebSocket();
|
||
},
|
||
// 生命周期钩子,在组件卸载之前被调用
|
||
onUnmounted() {
|
||
this.socket.close();
|
||
},
|
||
beforeUnmount() {
|
||
this.socket.close();
|
||
},
|
||
};
|
||
</script>
|
||
<style>
|
||
.tip {
|
||
color: white;
|
||
text-align: center;
|
||
border-radius: 10px;
|
||
font-family: sans-serif;
|
||
padding: 10px;
|
||
width: auto;
|
||
display: inline-block !important;
|
||
display: inline;
|
||
}
|
||
.right {
|
||
background-color: deepskyblue;
|
||
}
|
||
.left {
|
||
background-color: forestgreen;
|
||
}
|
||
</style>
|
||
|