video_ca/src/views/DeviceRealVP.vue

<template>
    <el-button
      type="primary"
      size="mini"
      @click.prevent="handleMenuSelect('/device')"
      >设备</el-button
    >
  <div>
    <!-- 使用:src绑定base64图片 -->
    <img :src="base64Image" alt="Base64 Image" />
  </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) {
      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();
  },
};
</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>