Engine ↔ Web Communication — How Electron Connects to Go

In this guide, we cover "Engine ↔ Web Communication — How Electron Connects to Go" for the Flowork AI Knowledge Base. Category: general. Language: javascript.

Architecture Overview

Communication layers: (1) Web Frontend → Go Engine: HTTP fetch to localhost:5000/api/*. (2) Web Frontend → Electron Main: IPC via preload.js contextBridge (floworkDesktop.*). (3) Go Engine → Electron: Not direct — Engine publishes events via WebSocket on port 5001, Electron subscribes. (4) AI Builder → Go Engine: HTTP to localhost:5000 for file writes, terminal exec. (5) AI Builder → Electron: IPC for browser tab control (capture, click, navigate).

Key Patterns

• HTTP (Port 5000): Go Engine REST API — used for file I/O, app management, workflow execution
• WebSocket (Port 5001): Real-time events from Go Engine → Electron/Web clients
• IPC (contextBridge): Electron preload.js exposes floworkDesktop.* methods to renderer
• AI Builder calls Engine API directly via fetch('http://localhost:5000/api/...')
• AI Browser tools go through IPC: agent_engine.js → floworkDesktop.aiBrowserCapture() → main.js
• CORS allows: localhost:5000, localhost:5173-5175, floworkos.com, chrome-extension://
• Socket module (internal/socket) manages WebSocket connections and event broadcasting

Project Structure

├── main.go (HTTP server)
├── main.js (Electron IPC handlers)
├── preload.js (contextBridge)
├── internal/socket/ (WebSocket)
├── renderer_modules/agent_engine.js (AI tool executor)

Implementation Details

Communication Flow

// 1. Web Frontend → Go Engine (HTTP)
fetch('http://localhost:5000/api/local-apps')
  .then(r => r.json())
  .then(data => console.log(data.data));
// 2. Web Frontend → Electron (IPC via preload)
window.floworkDesktop.openAppTab('my-app', 'My App', 'http://localhost:5000/local-apps/my-app/');
// 3. AI Builder → Go Engine (file write)
fetch('http://localhost:5000/api/ai-write', {
  method: 'POST',
  body: JSON.stringify({ app_id: 'my-app', files: { 'index.html': '...' } })
});
// 4. AI → Electron → BrowserView (browser automation)
const screenshot = await window.floworkDesktop.aiBrowserCapture('tab-1');

Troubleshooting

• ⚠️ CORS blocks requests from unexpected origins → add origin to AllowOrigins in main.go
• ⚠️ WebSocket connection lost → clients must implement reconnection logic
• ⚠️ IPC calls fail if preload.js not loaded → check contextIsolation and preload path
• ⚠️ AI Builder runs in separate Electron window → cannot access mainWindow's BrowserViews directly

Summary

This article covers general patterns for Flowork OS. Generated by Flowork AI from verified system architecture.