electron ant-design-vue 不能用_Electron与工业CCD通过TCP Server协议连接通讯

Electron与工业CCD通过TCP Server协议连接通讯

CCD可以理解为是一个相机，在工业上可以通过CCD给物体拍照，然后识别出物体表面激光刻印的信息，大概如下图，下图是我公司研发的软件一张截图，软件是使用C#实现的，这个工业软件还是很厉害的，里面涉及到了许多与工业传感器的数据交互。现在我的工作主要就是使用前端知识重构这个软件，要与硬件打交道了，当然要选择Electron和Node技术栈了。

CCD底层是通过TCP Server协议进行通讯的，所以要想与CCD进行数据对接，就要在Electron中实现TCP Server服务了。

这个知识我是不会的，最先是读C#的代码，看之前人家是怎么实现的，6000行的代码，看的我也是头晕脑胀的。再后来就是在网上找资料了，可是发现网上关于Electron连接TCP Server的资料真不多，但还是有的，下面就开始实现吧。

参考资料一：electron测试TCP通信，这篇文章写的估计也就只有博主自己能看懂吧！没办法参考着他的代码，我居然还悟出来点东西。

首先声明我的Electron是通过Vue CLI Plugin Electron Builder创建出来的。在主进程(background.js)中添加下面这段代码：

// TCP/IP通讯

// 试了半天，才发现这是创建一个 TCP Server 的
function createServer(port) {
  const HOST = '127.0.0.1';
  // const port = 7899;
  if (server) {
    server.close();
  }

  server = net.createServer();

  server.listen(port, HOST, function () {
    console.log('Server listen on port:' + server.address().address);
    console.log('--------------------------------------服务正在监听中---------------------------------------');
    sendServerData('start-server', '服务正在监听中，server is listening...');
  });


  server.on('connection', socket => {
    sendServerData('connect-server', 'Get conneciton from:' + socket.remoteAddress);

    socket.on('data', data => {
      sendServerData('data-server', 'Get data from socket:' + socket.remoteAddress + '. The data:' + data);
      socket.write('you said:' + data);
    });

    socket.on('close', () => {
      sendServerData('close-server', 'Socket:' + socket.remoteAddress + " closed");
    })
  });

}

let server;
let client;
let serverEvent, clientEvent;
// 通过这个方法就可以建立一个TCP服务器，当收到前端发送的event，就可以创建了，这里前端发送的消息是 start-server
ipcMain.on('start-server', (event, arg) => {
  serverEvent = event;
  // event.sender.send()
  console.log('+++++++++++++++++++++++++++ event ++++++++++++++++++++++++++++++++++++++++++++++')
  console.log(event)
  console.log('=================================== arg =============================================')
  console.log(arg)
  createServer(arg);
})

// 将消息返回给前端
function sendServerData(channel, msg) {
  try {
    console.log(`server send event ${channel}, ${msg}`);
    if (serverEvent) {
      serverEvent.sender.send(channel, msg);
    }
  } catch (error) {
    console.error('gt error:' + error);
  }
}

然后在前端页面上新增两个输入框和一个按钮，如下图：

Home.vue 代码：

<div class="home"><img alt="Vue logo" src="../assets/logo.png" /><div>
      发送的消息：<input type="text" v-model="msg" />div><div>
      接收的消息：<input type="text" v-model="msg2">div><div><button @click="tcpServer">TCP通信button>div>div>template><script>const ipc = window.require("electron").ipcRenderer;
ipc.on("start-server", (evnet, args) => {console.log(evnet,args)
});
ipc.on("data-server", (evnet, args) => {console.log(evnet,args)
});
ipc.on("close-server", (evnet, args) => {console.log(evnet,args)
});// @ is an alias to /srcimport HelloWorld from "@/components/HelloWorld.vue";export default {name: "Home",components: {
    HelloWorld,
  },
  data() {return {msg: "",msg2: "",
    };
  },methods: {
    tcpServer() {console.log(this.msg);
      ipc.send("start-server", this.msg);
    },
    addText(msg) {this.msg2 += msg + "\n";
    },
  },
};script><style lang="css" scoped>img {-webkit-app-region: drag;
}style>

下面这张图是主进程在控制台输出的信息，从中可以看出event参数是这么一大坨东西，arg参数就是我们输入框输入的111。

如果我们先通过网络调试助手，创建一个ip为 127.0.0.1 端口号为 7899 的 TCP Server，然后再回到页面上在输入框内也输入7899，然后点击按钮，就发现报错了，报错说127.0.0.1:7899已经被创建了。

可以看出在主进程里面加的这段代码其实是通过渲染进程来创建一个TCP Server的，可这并不是我的需求，我的需求是将Electron作为一个客户端，可以向CCD的TCP服务器发送消息，并且可以接收CCD返回给我的信息，下面实现一下。

参考资料二、electron 使用tcp套接字(一)

参考资料三、Node.js Net 模块

在主进程(background.js)中添加下面这段代码：

// 作为客户端
var net = require('net');
var HOST = '127.0.0.1';
var PORT = 7899;

var client = new net.Socket();
client.connect(PORT, HOST, function() {
    console.log('CONNECTED TO: ' + HOST + ':' + PORT);
    // 建立连接后立即向服务器发送数据，服务器将收到这些数据
    client.write('Hello TCP/IP! 老子终于通过 Electron 实现和你通信了！！！');

});

// 为客户端添加“data”事件处理函数
// data是服务器发回的数据
client.on('data', function(data) {
    console.log('DATA: ' + data);
    // 完全关闭连接
    client.destroy();
});

// 为客户端添加“close”事件处理函数
client.on('close', function() {
    console.log('Connection closed');
});

然后通过网络调试助手打开一个127.0.0.1:7899的TCP Server服务，我们通过Electron向网络调试助手发送一条消息。

再次启动我们的Electron项目，项目一启动就会自动向网络调试助手发送一条信息，在网络调试助手中我们就可以看到这条消息了

然后再通过网络调试助手给我们的客户端Electron发送一条数据：

然后我们的Electron也就可以收到来自TCP Server服务端的消息了，至此，大功告成。

最后贴出我主进程background.js的完整代码：

'use strict'

import {
  app,
  protocol,
  BrowserWindow,
  ipcMain,
} from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
import installExtension, {
  VUEJS_DEVTOOLS
} from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

const net = require('net');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{
  scheme: 'app',
  privileges: {
    secure: true,
    standard: true
  }
}])

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 700,
    // 设置窗口的透明属性为true
    // transparent:true,
    // 禁用默认边框，无法拖拽移动窗口，也无法最大化、最小化、关闭窗口
    frame: false,
    // 透明的窗口不可调整大小,所以将resizable属性也设置为false
    // resizable:false,
    // 为了防止双击窗口可拖拽区域触发最大化事件,将maximizable属性也设置为false
    // maximizable:false,
    webPreferences: {
      // nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      // 注意devTools可能会影响到transparent
      // devTools: false,
      nodeIntegration: true,
      // enableRemoteModule:true
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    // Load the index.html when not in development
    win.loadURL('app://./index.html')
  }

  win.on('closed', () => {
    win = null
  })
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }

  // 最小化窗体
  ipcMain.on('minWindow', () => {
    win.minimize()
  })

  // 关闭窗体
  ipcMain.on('closeWindow', () => {
    win.close()
  })

  // 最大化窗体
  ipcMain.on('maxWindow', () => {
    win.isMaximized() ? win.unmaximize() : win.maximize()
  })

  createWindow()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}


// TCP/IP通讯

// 试了半天，才发现这是创建一个 TCP Server 的
// function createServer(port) {
//   const HOST = '127.0.0.1';
//   // const port = 7899;
//   if (server) {
//     server.close();
//   }

//   server = net.createServer();

//   server.listen(port, HOST, function () {
//     console.log('Server listen on port:' + server.address().address);
//     console.log('--------------------------------------服务正在监听中---------------------------------------');
//     sendServerData('start-server', '服务正在监听中，server is listening...');
//   });


//   server.on('connection', socket => {
//     sendServerData('connect-server', 'Get conneciton from:' + socket.remoteAddress);

//     socket.on('data', data => {
//       sendServerData('data-server', 'Get data from socket:' + socket.remoteAddress + '. The data:' + data);
//       socket.write('you said:' + data);
//     });

//     socket.on('close', () => {
//       sendServerData('close-server', 'Socket:' + socket.remoteAddress + " closed");
//     })
//   });

// }

// let server;
// let client;
// let serverEvent, clientEvent;
// // 通过这个方法就可以建立一个TCP服务器，当收到前端发送的event，就可以创建了，这里前端发送的消息是 start-server
// ipcMain.on('start-server', (event, arg) => {
//   serverEvent = event;
//   // event.sender.send()
//   console.log('+++++++++++++++++++++++++++ event ++++++++++++++++++++++++++++++++++++++++++++++')
//   console.log(event)
//   console.log('=================================== arg =============================================')
//   console.log(arg)
//   createServer(arg);
// })

// 将消息返回给前端
// function sendServerData(channel, msg) {
//   try {
//     console.log(`server send event ${channel}, ${msg}`);
//     if (serverEvent) {
//       serverEvent.sender.send(channel, msg);
//     }
//   } catch (error) {
//     console.error('gt error:' + error);
//   }
// }


// 作为客户端
var HOST = '127.0.0.1';
var PORT = 7899;

var client = new net.Socket();
client.connect(PORT, HOST, function() {
    console.log('CONNECTED TO: ' + HOST + ':' + PORT);
    // 建立连接后立即向服务器发送数据，服务器将收到这些数据
    client.write('Hello TCP/IP! 老子终于通过 Electron 实现和你通信了！！！');
});

// 为客户端添加“data”事件处理函数
// data是服务器发回的数据
client.on('data', function(data) {
    console.log('DATA: ' + data);
    // 完全关闭连接
    client.destroy();
});

// 为客户端添加“close”事件处理函数
client.on('close', function() {
    console.log('Connection closed');
});