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 代碼：

<template>
  <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>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </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 /src
import 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');
});

文章會首發於我的微信公眾號：小笑殘虹，大家可以關注我，一起交流進步。