electron测试TCP通信
2024-08-27 18:29:56
这几天学习了一下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");
})
}); }
create server
通过这个方法就可以建立一个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);
})
start server
补一个函数,就将消息返回给前端
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';
}
Server Front
tcp-server
最新文章
- 利用Swashbuckle生成Web API Help Pages
- PHP 配置文件详解(php.ini 详解 )
- 使用DotNetOpenAuth搭建OAuth2.0授权框架——Demo代码简单说明
- Linux后台开发常用工具
- MySQL的索引创建、删除
- NYOJ--1236--挑战密室(第八届河南省程序设计大赛)
- (转载)2016 CCF大数据与计算智能大赛 开源资料整理
- StringBUffer和StringBuilder详解
- LAMP动静分离安装(源码安装)
- JS高程关于ajax的学习笔记
- 利用node 剥取其他网站的文档数据结构 ---
- Spring Boot 之发送邮件
- Rails/ActiveRecord order by Array
- jupyter修改根目录
- python记录_day07
- Linux下安装PHP+Nginx+Msql
- 之前的一些Oracle的经验总结
- generating-ssh-keys
- MIMO雷达比幅单脉冲测角精度分析(系统工程与电子技术)
- clamav完整查杀linux病毒实战(转)