Electron: red y comunicación externa

Las aplicaciones Electron no solo pueden manipular recursos locales, sino también interactuar con servicios de red externos.
Ya sea realizar solicitudes HTTP, establecer conexiones WebSocket en tiempo real, o usar los módulos nativos de Node.jsnetpuedes comunicarte por red igual que en un navegador o en un servidor.

Solicitudes HTTP

Electron admite simultáneamentela API del navegador (fetch)ybibliotecas de terceros (axios)y también puede manejar problemas de CORS y autenticación.

Uso de la API fetch

fetchEs una interfaz de solicitud de red integrada en los navegadores modernos y Node.js (18+).
Admite Promise, su sintaxis es concisa y es adecuado para solicitudes de datos comunes.

Ejemplo

// Ejemplo de solicitud GET
fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => {
    if (!response.ok) throw new Error('Error de respuesta de red');
    return response.json();
  })
  .then(data => {
    console.log('Datos devueltos:', data);
  })
  .catch(error => {
    console.error('Solicitud fallida:', error);
  });

Descripción de parámetros:

  • fetch(url, options): realizar una solicitud;
  • options.method: el método de solicitud (GET, POST, PUT, DELETE);
  • options.headers: establecer los encabezados de solicitud;
  • options.body: el cuerpo de la solicitud, comúnmente usado en POST.

Ejemplo de POST:

fetch('https://api.example.com/login', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ username: 'admin', password: '123456' })
});

Integración con axios

axiosEs un cliente HTTP potente que admite características como interceptores, tiempo de espera, concurrencia, y se usa comúnmente en aplicaciones Electron para comunicarse con APIs de backend.

Instalación:

npm install axios

Ejemplo de uso:

const axios = require('axios');

// GET 请求
axios.get('https://jsonplaceholder.typicode.com/users')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

// POST 请求
axios.post('https://api.example.com/data', { name: 'Tom' })
  .then(res => console.log('上传成功', res.data))
  .catch(err => console.error('上传失败', err));

Descripción de parámetros:

  • axios.get(url, config): realizar solicitud GET;
  • axios.post(url, data, config): realizar solicitud POST;
  • config.timeout: establecer tiempo de espera;
  • config.headers: encabezados de solicitud personalizados.

Manejo de problemas de CORS

En Electron, como se ejecuta en un entorno de escritorio, por defectono existe la restricción CORS del navegador。
Pero si la página del frontend, medianteBrowserWindowla carga de contenido web y el envío de solicitudes, aún puede provocar problemas de CORS.

Soluciones:

UsarnodeIntegration：
realizar la solicitud en el proceso principal en lugar del proceso de renderizado.

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

ipcMain.handle('getData', async () => {
  const res = await axios.get('https://api.example.com/data');
  return res.data;
});

Mediantesession.webRequestla modificación de los encabezados de solicitud:

const { session } = require('electron');
session.defaultSession.webRequest.onBeforeSendHeaders((details, callback) => {
  details.requestHeaders['Origin'] = '*';
  callback({ requestHeaders: details.requestHeaders });
});

Comunicación WebSocket

WebSocket proporciona un canal de comunicación en tiempo real, persistente y full-duplex, muy adecuado para aplicaciones como chat, push de datos, cotizaciones de bolsa, etc.

Implementación del cliente WebSocket

Electron puede usar directamente el WebSocket nativo del navegador.WebSocket API：

Ejemplo

const socket = new WebSocket('wss://echo.websocket.org');

socket.onopen = () => {
  console.log('Conexión WebSocket establecida');
  socket.send('Hello Server!');
};

socket.onmessage = (event) => {
  console.log('Mensaje recibido:', event.data);
};

socket.onclose = () => {
  console.log('Conexión cerrada');
};

Descripción de parámetros:

  • new WebSocket(url): crear conexión;
  • socket.send(data): enviar mensaje;
  • onmessage: escuchar la respuesta del servidor;
  • onclose: escuchar el cierre de la conexión.

Ejemplo de aplicación de comunicación en tiempo real

Supongamos que construimos una interfaz de sala de chat en tiempo real:

Ejemplo

const socket = new WebSocket('wss://chat.example.com');

socket.onmessage = (e) => {
  const messageBox = document.getElementById('messages');
  messageBox.innerHTML += `<div>${e.data}</div>`;
};

function sendMessage() {
  const input = document.getElementById('input');
  socket.send(input.value);
  input.value = '';
}

HTML del proceso de renderizado:

Ejemplo

<input id="input" placeholder="Ingrese mensaje">
<button onclick="sendMessage()">Enviar</button>
<div id="messages"></div>

Este patrón permite implementar fácilmente funciones como chat en tiempo real, sincronización de estado y edición colaborativa.

Módulo de red nativo

El proceso principal de Electron proporciona elnetmódulo de Node.js, que puede crear conexiones TCP o IPC directamente a un nivel más bajo, adecuado para protocolos personalizados o interacción con servicios locales.

Uso del módulo net

netEl módulo te permite crear clientes o servidores TCP.

Crear un servidor TCP:

Ejemplo

const net = require('net');

const server = net.createServer(socket => {
  console.log('Cliente conectado');
  socket.write('Bienvenido al servidor TCP de Electron');
 
  socket.on('data', data => {
    console.log('Datos recibidos:', data.toString());
  });
});

server.listen(8080, () => {
  console.log('Servidor TCP iniciado, puerto 8080');
});

Conexión del cliente TCP:

Ejemplo

const client = net.createConnection({ port: 8080 }, () => {
  console.log('Conectado al servidor');
  client.write('Hello Server!');
});

client.on('data', data => {
  console.log('Respuesta del servidor:', data.toString());
});

Descripción de parámetros:

  • net.createServer(callback): crear servidor;
  • socket.write(data): enviar datos;
  • socket.on('data'): recibir datos;
  • server.listen(port): escuchar en el puerto.

Gestión de session

En Electron, elsessionmódulo puede controlar la información de sesión de red como caché, cookies, proxy, etc.

Ejemplo

const { session } = require('electron');

const ses = session.defaultSession;

// Limpiar caché
ses.clearCache().then(() => console.log('Caché limpiada'));

// Configurar proxy
ses.setProxy({ proxyRules: 'http=127.0.0.1:8080' });

Manejo de cookies

Ejemplo

const { session } = require('electron');
const cookies = session.defaultSession.cookies;

// Establecer cookie
cookies.set({
  url: 'https://example.com',
  name: 'token',
  value: 'abc123',
  expirationDate: Date.now() / 1000 + 3600
});

// Obtener cookie
cookies.get({ url: 'https://example.com' })
  .then(cookies => {
    console.log('Cookie actual:', cookies);
  });

Resumen

Al realizar comunicaciones de red y externas en Electron, puedes elegir con flexibilidad:

Escenario Solución recomendada
Solicitudes HTTP normales fetch o axios
Datos en tiempo real WebSocket
Comunicación local o de bajo nivel módulo net
Gestión del estado de inicio de sesión / caché session + cookies

Esta capacidad de red de múltiples niveles permite que las aplicaciones Electron puedan acceder a APIs en la nube y también operar de forma coordinada con servicios locales.

Ejemplo

El siguiente ejemplo es un «panel de datos en tiempo real» que muestra en el proceso de renderizado los datos obtenidos de una API, recibe mensajes WebSocket en tiempo real y, al mismo tiempo, gestiona la cookie del estado de inicio de sesión.

1. Estructura del proyecto

my-electron-network-demo/
├── package.json
├── main.js             # 主进程逻辑
├── preload.js          # 预加载脚本
└── index.html          # 前端界面

2. package.json

{
  "name": "my-electron-network-demo",
  "version": "1.0.0",
  "description": "Electron 网络通信综合示例",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "latest",
    "axios": "^1.5.0"
  }
}

Instalar dependencias:

npm install

3. main.js (proceso principal)

Ejemplo

const { app, BrowserWindow, ipcMain, session } = require('electron')
const path = require('path')
const axios = require('axios')
const WebSocket = require('ws')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 900,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  mainWindow.loadFile('index.html')
}

// Ejemplo de solicitud HTTP
ipcMain.handle('fetch-data', async () => {
  try {
    const res = await axios.get('https://jsonplaceholder.typicode.com/posts/1')
    return res.data
  } catch (err) {
    return { error: err.message }
  }
})

// Ejemplo de servidor WebSocket
const wss = new WebSocket.Server({ port: 8081 })
wss.on('connection', ws => {
  console.log('El cliente se ha conectado a WebSocket')
  ws.send('Bienvenido a los datos en tiempo real de WebSocket')
  // Enviar datos periódicamente
  const interval = setInterval(() => {
    ws.send(`Mensaje en tiempo real: ${new Date().toLocaleTimeString()}`)
  }, 3000)

  ws.on('close', () => clearInterval(interval))
})

// Reenviar mensajes WebSocket al proceso de renderizado
ipcMain.handle('connect-ws', async () => {
  return new Promise(resolve => {
    const ws = new WebSocket('ws://localhost:8081')
    ws.on('open', () => console.log('Conectado al servidor WebSocket'))
    ws.on('message', msg => {
      mainWindow.webContents.send('ws-message', msg.toString())
    })
    resolve('Conexión WebSocket establecida')
  })
})

// Ejemplo de gestión de cookies
ipcMain.handle('set-cookie', async (event, name, value) => {
  const cookies = session.defaultSession.cookies
  await cookies.set({
    url: 'http://localhost',
    name,
    value,
    expirationDate: Date.now() / 1000 + 3600
  })
  return 'Cookie establecida correctamente'
})

ipcMain.handle('get-cookie', async (event, name) => {
  const cookies = session.defaultSession.cookies
  const result = await cookies.get({ url: 'http://localhost', name })
  return result.length ? result[0].value : null
})

app.whenReady().then(() => {
  createWindow()
})

4. preload.js (comunicación segura)

Ejemplo

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {
  fetchData: () => ipcRenderer.invoke('fetch-data'),
  connectWS: () => ipcRenderer.invoke('connect-ws'),
  onWSMessage: (callback) => ipcRenderer.on('ws-message', (event, msg) => callback(msg)),
  setCookie: (name, value) => ipcRenderer.invoke('set-cookie', name, value),
  getCookie: (name) => ipcRenderer.invoke('get-cookie', name)
})

5. index.html (interfaz del proceso de renderizado)

Ejemplo

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo de comunicación de red en Electron</title>
  <style>
    body { font-family: sans-serif; padding: 20px; }
    button { margin: 5px; padding: 10px 20px; cursor: pointer; }
    #output { margin-top: 20px; }
  </style>
</head>
<body>
  <h1>Ejemplo de comunicación de red en Electron</h1>

  <button id="fetchBtn">Obtener datos HTTP</button>
  <button id="wsBtn">Conectar WebSocket</button>
  <button id="setCookieBtn">Establecer cookie</button>
  <button id="getCookieBtn">Leer cookie</button>

  <div id="output"></div>

  <script>
    const output = document.getElementById('output')

    document.getElementById('fetchBtn').addEventListener('click', async () => {
      const data = await window.electronAPI.fetchData()
      output.innerHTML += `<p>Datos de respuesta HTTP: ${JSON.stringify(data)}</p>`
    })

    document.getElementById('wsBtn').addEventListener('click', async () => {
      await window.electronAPI.connectWS()
      output.innerHTML += `<p>Conexión WebSocket establecida</p>`
    })

    window.electronAPI.onWSMessage(msg => {
      output.innerHTML += `<p>Mensaje WebSocket: ${msg}</p>`
    })

    document.getElementById('setCookieBtn').addEventListener('click', async () => {
      const res = await window.electronAPI.setCookie('token', 'abc123')
      output.innerHTML += `<p>${res}</p>`
    })

    document.getElementById('getCookieBtn').addEventListener('click', async () => {
      const value = await window.electronAPI.getCookie('token')
      output.innerHTML += `<p>Valor del token de Cookie: ${value}</p>`
    })
  </script>
</body>
</html>

6. Ejecución y resultados

npm start
  • ClicObtener datos HTTP: Obtén datos de la API mediante axios y muéstralos en la página.
  • ClicConectar WebSocket: Establece una conexión en tiempo real y recibe un mensaje cada 3 segundos.
  • ClicEstablecer Cookie: Creartoken Cookie.
  • ClicLeer Cookie: Lee y muestratokenel valor.
Otras extensiones