Built Electron helper UI and implemented WebSocket context for listening to and emitting events in React app

Author: jake-pauls

desktop-helper-sample/helper/package.json

@@ -6,7 +6,7 @@
   "main": "public/electron.js",
   "homepage": "./",
   "scripts": {
-    "start": "concurrently -k \"npm run start:react\" \"npm run start:electron\"",
+    "start": "concurrently -k \"npm:start:react\" \"npm:start:electron\"",
     "start:react": "cross-env BROWSER=none react-scripts start",
     "start:electron": "wait-on tcp:3000 && electron public/electron.js",
     "build": "npm run build:react && npm run build:electron",
@@ -15,19 +15,22 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@adobe/react-spectrum": "^3.11.2",
     "concurrently": "^6.2.0",
     "cross-env": "^7.0.3",
     "electron": "^13.1.6",
     "electron-builder": "^22.11.7",
     "wait-on": "^6.0.0"
   },
   "dependencies": {
+    "cors": "^2.8.5",
     "electron-is-dev": "^2.0.0",
     "express": "^4.17.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "socket.io": "^4.1.2"
+    "socket.io": "^4.1.2",
+    "socket.io-client": "^4.1.3"
   },
   "build": {
     "appId": "com.electron.adobe.example.desktop-helper-sample",

desktop-helper-sample/helper/public/electron.js

@@ -14,13 +14,15 @@ const createWindow = () => {
   });
 
   // Configure electron development environment
-  window.loadURL(isDevelopment 
-    ? 'http://localhost:3000' 
-    : `file://${path.join(__dirname, '../build/index.html')}`);
-  
+  window.loadURL(
+    isDevelopment
+      ? 'http://localhost:3000'
+      : `file://${path.join(__dirname, '../build/index.html')}`
+  );
+
   if (isDevelopment) {
-    window.webContents.openDevTools({ 
-      mode: 'detach' 
+    window.webContents.openDevTools({
+      mode: 'detach',
     });
   }
 };
@@ -37,4 +39,4 @@ app.on('activate', () => {
   if (BrowserWindow.getAllWindows().length === 0) {
     createWindow();
   }
-});
+});

desktop-helper-sample/helper/public/server.js

@@ -1,43 +1,58 @@
 const http = require('http');
 const express = require('express');
+const cors = require('cors');
 const { Server } = require('socket.io');
 
 const startServer = async () => {
   const port = 4040;
+
   const app = express();
+  app.use(cors());
+
   const server = http.createServer(app);
 
-  const io = new Server(server);
+  const io = new Server(server, {
+    cors: {
+      origin: 'http://localhost:3000',
+      methods: ['GET'],
+    },
+  });
 
   server.listen(port, () => {
     console.log(`[server] Server listening on port ${port}`);
   });
-  
+
   io.on('connection', (socket) => {
-    console.log('[socket.io] UXP plugin connected');
+    io.emit('server-connection', true);
 
-    io.emit('uxp-connected', true);
+    socket.on('uxp-connected', (socket) => {
+      io.emit('uxp-connected', true);
+    });
 
     socket.on('message', (message) => {
-      console.log(`Message received from client: ${message}`);
+      io.emit('redirect-message', message);
+    });
+
+    socket.on('helper-message', (message) => {
+      io.emit('message', message);
     });
 
     socket.on('disconnect', () => {
-      console.log('[socket.io] UXP plugin disconnected');
+      io.emit('uxp-connected', false);
     });
   });
 
   // Emit connect when uxp attempts to reconnect
   io.on('reconnect', (socket) => {
-    io.emit('uxp-connected', true);
+    io.emit('server-connection', true);
   });
 
-  // Emit disconnect when helper app closes 
+  // Emit disconnect when helper app closes
   process.on('exit', () => {
-    io.emit('uxp-connected', false);
+    io.emit('server-connection', false);
   });
 };
 
 startServer().catch((err) => {
-  console.log(`[server] Error: ${err}`)
-});
+  console.log(`[server] Error: ${err}`);
+});

desktop-helper-sample/helper/src/App.css

@@ -1,13 +1,20 @@
-import './App.css';
+import { Flex, Heading } from '@adobe/react-spectrum';
+
+import OptionsMenu from './components/OptionsMenu';
 
 const App = () => {
   return (
-    <div className="container">
-      <header className="header">
-        <p>Welcome to the UXP Helper App</p>
-      </header>
-    </div>
+    <Flex
+      direction="column"
+      gap="size-100"
+      alignItems="center"
+      justifyContent="center"
+      height="100vh"
+    >
+      <Heading level={2}>Welcome to the UXP Helper App</Heading>
+      <OptionsMenu />
+    </Flex>
   );
-}
+};
 
 export default App;

desktop-helper-sample/helper/src/App.jsx

@@ -0,0 +1,81 @@
+import React, { useState, useEffect, useContext } from 'react';
+import {
+  Button,
+  Flex,
+  Item,
+  Tabs,
+  TabList,
+  TabPanels,
+  TextField,
+  View,
+} from '@adobe/react-spectrum';
+
+import { SocketContext } from './SocketContext';
+
+const OptionsMenu = () => {
+  const socket = useContext(SocketContext);
+
+  const [connectionStatus, setConnectionStatus] = useState(false);
+  const [uxpMessage, setUXPMessage] = useState('');
+  const [helperMessage, setHelperMessage] = useState('');
+
+  useEffect(() => {
+    socket.on('uxp-connected', (isUXPConnected) => {
+      setConnectionStatus(isUXPConnected);
+    });
+
+    socket.on('redirect-message', (receivedMessage) => {
+      setUXPMessage(receivedMessage);
+    });
+  }, []);
+
+  const sendHelperMessage = () => {
+    socket.emit('helper-message', helperMessage);
+  };
+
+  return (
+    <Flex width="size-6000" height="size-8000">
+      <Tabs aria-label="UXP Helper Options">
+        <TabList>
+          <Item key="status">UXP Status</Item>
+          <Item key="message">Send Message</Item>
+          <Item key="data">Data from UXP</Item>
+        </TabList>
+        <TabPanels marginX={4} marginY={16}>
+          <Item key="status">
+            {connectionStatus === false ? 'Disconnected' : 'Connected'}
+          </Item>
+          <Item key="message">
+            <Flex alignItems="center">
+              <TextField
+                aria-label="Send Message"
+                placeholder="Send a message to UXP"
+                onChange={(s) => setHelperMessage(s)}
+              ></TextField>
+              <Button
+                variant="cta"
+                marginX={16}
+                onPress={() => sendHelperMessage()}
+              >
+                Send
+              </Button>
+            </Flex>
+          </Item>
+          <Item key="data">
+            <View
+              borderWidth="thin"
+              borderColor="dark"
+              borderRadius="medium"
+              backgroundColor="dark"
+              padding="size-100"
+            >
+              {uxpMessage === '' ? 'Data From UXP' : uxpMessage}
+            </View>
+          </Item>
+        </TabPanels>
+      </Tabs>
+    </Flex>
+  );
+};
+
+export default OptionsMenu;

desktop-helper-sample/helper/src/components/OptionsMenu.jsx

@@ -0,0 +1,6 @@
+import React, { createContext } from 'react';
+import io from 'socket.io-client';
+
+export const socket = io('http://localhost:4040');
+
+export const SocketContext = createContext();

desktop-helper-sample/helper/src/components/SocketContext.jsx

@@ -1,11 +1,21 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  Provider as SpectrumProvider,
+  defaultTheme,
+} from '@adobe/react-spectrum';
+
 import './index.css';
 import App from './App';
+import { SocketContext, socket } from './components/SocketContext';
 
 ReactDOM.render(
   <React.StrictMode>
-    <App />
+    <SocketContext.Provider value={socket}>
+      <SpectrumProvider theme={defaultTheme}>
+        <App />
+      </SpectrumProvider>
+    </SocketContext.Provider>
   </React.StrictMode>,
   document.getElementById('root')
-);
+);