wuyouming666
2024-05-20 1ac37f17a1e674337ea924e9f930725575cee15d
CanadaMes-ui/src/views/device/talkvue.vue
@@ -1,69 +1,23 @@
<template>
  <!-- <button v-on:click="send">测试发送</button> -->
  <button @click="send()">测试发送</button>
  <div class="container">
    <!-- <iframe src="http://localhost:8080/GERP/optimize/optimize/html/youhuacaidan.jsp"></iframe> -->
  </div>
</template>
<script>
let socket;
export default {
  name: "talkvue",
<style>
.container {
  position: fixed;
 
  data() {
    return {
      messagepack: {
        data: { taskname:"" }
      },
      queryInfo: {
        data: "1",
        pageSize: 10
      },
    };
  },
  created() {
    this.init();
  },
  methods:
  {
    init() {
      let viewname = "talkvue";
  left: 5;
      if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        //console.log("您的浏览器支持WebSocket");
        let socketUrl = "ws://" + "localhost:8888" + "/springboot-vue3/api/talk/" + viewname;
        if (socket != null) {
          socket.close();
          socket = null;
        }
        // 开启一个websocket服务
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function () {
          console.log("websocket已打开");
        };
        //  浏览器端收消息,获得从服务端发送过来的文本消息
        socket.onmessage = function (msg) {
          console.log("收到数据====" + msg.data)
          //let data = JSON.parse(msg.data)  // 对收到的json数据进行解析, 类似这样的: {"users": [{"username": "zhang"},{ "username": "admin"}]}
        };
        //关闭事件
        socket.onclose = function () {
          console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
          console.log("websocket发生了错误");
        }
      }
    },
    send() {
      this.messagepack.data =  {taskname:"前端到后台"} ;
      socket?.send(JSON.stringify(this.messagepack));  // 将组装好的json发送给服务端,由服务端进行转发
    }
  }
  width: 100%;
  height: 100%;
}
</script>
iframe {
  width: 96%;
  height: 99%;
}
</style>