electron測試TCP通信

這幾天學習了一下Elctron，對於這個應用有了一點簡單的認識，將這個過程記錄一下。

 

首先，electron會加載main.js，在這里將整個程序啟動，相當於其他程序的main函數了。

我是基於electron-api-demos來簡單改寫的，所以將服務器端放到了main-process文件夾，在這個文件夾中的js文件，會在啟動的時候被require進來，駐在后台，可以通過設置斷點調試了。PS：使用的是VS Code

 

然后就是使用IPC通信來完成這個服務器端的工作，ipcMain在服務器端的接收通信。先創建一個server

function createServer(port) {
  const HOST = '127.0.0.1';

  if (server) {
      server.close();
  }

  server = net.createServer();
  
  server.listen(port, HOST, function() {
    console.log('Server listen on port:' + server.address().address);
    
    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");      
    })
  });
  
}

通過這個方法就可以建立一個TCP服務器，當收到前端發送的event，就可以創建了，這里前端發送的消息是 start-server

const net = require('net');
const {ipcMain} = require('electron')

let server;
let client;
let serverEvent, clientEvent;

ipcMain.on('start-server', (event, arg) => {
    serverEvent = event;
    // event.sender.send()
    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);
    
  }
}
  

 

這樣一個簡單的TCP服務器端就搞定了

接下來就是在前端創建一個html，加一個按鈕（tcp-server）、一個文本框(port-input)用於輸入端口和文本框(log-text)用於顯示接受的消息，當點擊按鈕就發送event到后端

const ipc = require('electron').ipcRenderer

var severBtn = document.getElementById('tcp-server');
var port = document.getElementById('port-input');
var logoutput = document.getElementById('log-text');

severBtn.addEventListener("click", () => {

    ipc.send('start-server', port.value);
})

ipc.on('start-server', (evnet, args) => {
    addText(args);
})

ipc.on('connect-server', (evnet, args) => {
    addText(args);
})

ipc.on('data-server', (evnet, args) => {
    addText(args);
})

ipc.on('close-server', (evnet, args) => {
    addText(args);
})

function addText(msg) {
    logoutput.textContent += msg + '\n';
}

 

 

 

 

tcp-server