electron测试TCP通信

这几天学习了一下Elctron，对于这个应用有了一点简单的认识，将这个过程记录一下。

首先，electron会加载main.js，在这里将整个程序启动，相当于其他程序的main函数了。

我是基于electron-api-demos来简单改写的，所以将服务器端放到了main-process文件夹，在这个文件夹中的js文件，会在启动的时候被require进来，驻在后台，可以通过设置断点调试了。PS：使用的是VS Code

然后就是使用IPC通信来完成这个服务器端的工作，ipcMain在服务器端的接收通信。先创建一个server

 1 function createServer(port) {
 2   const HOST = '127.0.0.1';
 3 
 4   if (server) {
 5       server.close();
 6   }
 7 
 8   server = net.createServer();
 9   
10   server.listen(port, HOST, function() {
11     console.log('Server listen on port:' + server.address().address);
12     
13     sendServerData('start-server', 'server is listening...');
14   });
15 
16 
17   server.on('connection', socket => {
18     sendServerData('connect-server', 'Get conneciton from:' + socket.remoteAddress);
19     
20     socket.on('data', data => {
21       sendServerData('data-server', 'Get data from socket:' + socket.remoteAddress + '. The data:' + data);
22       socket.write('you said:' + data);
23     });
24 
25     socket.on('close', () => {
26       sendServerData('close-server', 'Socket:' + socket.remoteAddress + " closed");      
27     })
28   });
29   
30 }

create server

通过这个方法就可以建立一个TCP服务器，当收到前端发送的event，就可以创建了，这里前端发送的消息是 start-server

 1 const net = require('net');
 2 const {ipcMain} = require('electron')
 3 
 4 let server;
 5 let client;
 6 let serverEvent, clientEvent;
 7 
 8 ipcMain.on('start-server', (event, arg) => {
 9     serverEvent = event;
10     // event.sender.send()
11     createServer(arg);
12 })

start server

补一个函数，就将消息返回给前端

 1 function sendServerData(channel, msg) {
 2   try {
 3     console.log(`server send event ${channel}, ${msg}`);
 4     
 5     if (serverEvent) {
 6       serverEvent.sender.send(channel, msg);
 7     }
 8   } catch (error) {
 9     console.error('gt error:' + error);
10     
11   }
12 }
13   

View Code

这样一个简单的TCP服务器端就搞定了

接下来就是在前端创建一个html，加一个按钮（tcp-server）、一个文本框(port-input)用于输入端口和文本框(log-text)用于显示接受的消息，当点击按钮就发送event到后端

 1 const ipc = require('electron').ipcRenderer
 2 
 3 var severBtn = document.getElementById('tcp-server');
 4 var port = document.getElementById('port-input');
 5 var logoutput = document.getElementById('log-text');
 6 
 7 severBtn.addEventListener("click", () => {
 8 
 9     ipc.send('start-server', port.value);
10 })
11 
12 ipc.on('start-server', (evnet, args) => {
13     addText(args);
14 })
15 
16 ipc.on('connect-server', (evnet, args) => {
17     addText(args);
18 })
19 
20 ipc.on('data-server', (evnet, args) => {
21     addText(args);
22 })
23 
24 ipc.on('close-server', (evnet, args) => {
25     addText(args);
26 })
27 
28 function addText(msg) {
29     logoutput.textContent += msg + '\n';
30 }

Server Front

tcp-server