回答

1、Electron 中使用 TCP 通信

直接引入net

const net = window.require("net");

我们以vue为例

<template>
  <div class="home">
    
    <div>发送的消息：<input type="text" v-model="msg" /></div>
    <div>接收的消息：<input type="text" v-model="msg2" /></div>
    <div>
      <button @click="tcpClick">发送</button>
    </div>
  
  </div>
</template>

<script>
// 引入 net 模块
const net = window.require("net");


export default {
  name: "Home",
 
  data() {
    return {
      client: null,
      HOST: "127.0.0.1",
      PORT: 7899,
      msg: "",
      msg2: "",
    };
  },
  created() {},
  mounted() {
    // console.log(net);
    this.initTcp();
    this.connect(this.PORT, this.HOST);
    this.data();
    this.close()
    // this.tcpClicent(this.PORT,this.HOST,'hellow TCP')
  },
  destroyed() {},
  methods: {
    // 初始化TCP连接
    initTcp() {
      this.client = new net.Socket();
    },
    // 当一个 socket 连接成功建立的时候触发该事件。
    connect(PORT, HOST) {
      this.client.connect(PORT, HOST, () => {
        console.log("连接成功: " + HOST + ":" + PORT);
        // 建立连接后立即向服务器发送数据，服务器将收到这些数据
        this.sendMsgToTcp('hellow TCP')
      });
    },
    // 当接收到数据的时触发该事件。
    data() {
      this.client.on("data", (data) => {
        console.log("DATA: " + data);
        this.msg2 = data;
        this.destroyTcp();
      });
    },
    // 一旦 socket 完全关闭就发出该事件, 监听连接关闭事件
    close() {
      this.client.on("close", function () {
        console.log("关闭连接");
      });
    },
    // 向服务器发送数据，服务器将收到这些数据
    sendMsgToTcp(msg) {
      this.client.write(msg);
    },
    // 手动关闭连接
    destroyTcp() {
      this.client.destroy();
    },
    tcpClick() {
      console.log(this.msg);
      this.sendMsgToTcp(this.msg);
    },
  },
};
</script>

<style lang="css" scoped>
img {
  -webkit-app-region: drag;
}
</style>

2、Electron 中使用 WebSocket 通信

<template>
  <div>
    <h1>websocket</h1>
    <el-input v-model="sendMessage" placeholder="请输入内容"></el-input>
    <el-button size="mini" type="primary" @click="send">发送消息</el-button>
    <el-input
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4}"
      placeholder="收到的消息"
      v-model="textarea2"
    ></el-input>
    <div>{{testMsg | addZero}}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      path: "ws://192.168.43.50:8082/websocket1",
      socket: "",
      sendMessage: "",
      textarea2: "",
      testMsg: 9,
    };
  },
  mounted() {
    // 初始化
    this.init();
    if (this.socket.readyState != this.socket.OPEN) {
      console.log("连接已中断!");
      //todo...
      this.init();
      return false;
    }
  },
  destroyed() {
    // 销毁监听
    this.socket.onclose = this.close;
  },
  methods: {
    init() {
      if (typeof WebSocket === "undefined") {
        alert("您的浏览器不支持socket");
      } else {
        // 实例化socket
        this.socket = new WebSocket(this.path);
        // 监听socket连接
        this.socket.onopen = this.open;
        // 监听socket错误信息
        this.socket.onerror = this.error;
        // 监听socket消息
        this.socket.onmessage = this.getMessage;
        this.socket.onclose = this.close;
      }
    },
    open() {
      console.log("socket连接成功");
    },
    error() {
      console.log("连接错误");
      this.init();
    },
    getMessage(msg) {
      // 得到服务器返回的数据
      console.log(msg);
      this.textarea2 = msg.data;
    },
    send() {
      console.log("发送消息");
      this.socket.send(this.sendMessage);
    },
    close() {
      console.log("socket已经关闭");
    },
  },
};
</script>

<style lang="scss" scoped>
</style>