Lots of progress

package.json

@@ -6,6 +6,7 @@
     "@stdlib/stdlib": "^0.0.35",
     "dotenv": "5.0.1",
     "dotenv-expand": "4.2.0",
+    "electron-log": "^2.2.14",
     "exiftool-vendored": "^4.20.0",
     "inferno": "^5.0.1",
     "inferno-bootstrap": "^5.0.0",
@@ -62,8 +63,8 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
-    "dist": "yarn run build && build",
-    "electron-start": "node src/electron/wait-inferno",
+		"dist": "yarn run build && build",
+		"electron-start": "node src/electron/wait-inferno",
     "electron": "electron .",
     "fix": "eslint --fix src/**/*.js",
     "lint": "eslint src/**/*.js",

src/App.js

@@ -45,7 +45,16 @@ export class App extends Component {
 			webSocketLoaded: true,
 		});
 
-		window.clientWS.onmessage = console.info;
+		window.clientWS.onmessage = message => {
+			console.info(message);
+			console.info(message.data);
+
+			console.info(JSON.parse(message.data));
+			// const fr = new FileReader();
+			// fr.readAsArrayBuffer(message.data);
+
+			// console.info(fr.result);
+		};
 
 		console.info(window.clientWS);
 	}

src/electron/starter.js

@@ -1,13 +1,12 @@
-const electron = require('electron');
-// Module to control application life.
-const app = electron.app;
-// Module to create native browser window.
-const BrowserWindow = electron.BrowserWindow;
+const {app, BrowserWindow} = require('electron');
+const log = require('electron-log');
 
-const WS = require('isomorphic-ws');
+log.transports.file.level = false;
+log.transports.console.level = 'info';
 
 const path = require('path');
 const url = require('url');
+const WS = require('isomorphic-ws');
 
 // eslint-disable-next-line
 global.eval = () => {};
@@ -51,6 +50,10 @@ const createWindow = () => {
 // Some APIs can only be used after this event occurs.
 app.on('ready', createWindow);
 
+app.on('browser-window-created', () => {
+	log.info('New browser window created');
+});
+
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
 	// On OS X it is common for applications and their menu bar
@@ -71,7 +74,6 @@ app.on('activate', () => {
 const wss = new WS.Server({
 	port: 65432,
 });
-
 // In this file you can include the rest of your app's specific main process
 // code. You can also put them in separate files and require them here.
 require('./websocket-events')(wss);

src/electron/wait-inferno.js

@@ -1,18 +1,29 @@
+const {spawn} = require('child_process');
+const log = require('electron-log');
 const net = require('net');
 const port = process.env.PORT ? (process.env.PORT - 100) : 3000;
 
 process.env.ELECTRON_START_URL = `http://localhost:${port}`;
+log.transports.file.level = false;
 
 const client = new net.Socket();
 
 let startedElectron = false;
-const tryConnection = () => client.connect({port: port}, () => {
+const tryConnection = () => client.connect({port}, () => {
 	client.end();
 	if (!startedElectron) {
-		console.log('starting electron');
+		log.info('starting electron');
 		startedElectron = true;
-		const exec = require('child_process').exec;
-		exec('npm run electron');
+		const instance = spawn('node', ['node_modules/electron/cli.js', '.'], {
+			env: {
+				...process.env,
+			},
+			stdio: 'inherit',
+		});
+
+		instance.on('message', (message, sendHandle) => {
+			console.log(message, sendHandle);
+		});
 	}
 });
 

src/electron/websocket-events.js

@@ -1,13 +1,18 @@
 /**
  * Websocket event handlers
  */
+const {JSONMessage} = require('../helpers/web-socket');
 
 module.exports = (wss) => {
-	wss.on('open', ws => {
-		wss.send('server-log', 'Connected to client!');
+	wss.on('connection', ws => {
+		ws.send(JSONMessage('server-log', 'Connected to client!'));
 
-		wss.on('dropped-files', e => {
-			wss.send('recieved-dropped-files', e);
+		ws.on('message', (...args) => {
+			console.info(args);
+		});
+
+		ws.on('dropped-files', e => {
+			ws.send(JSONMessage('recieved-dropped-files', e));
 		});
 	});
 };

src/helpers/index.js

@@ -0,0 +1 @@
+export * from './web-socket';

src/helpers/web-socket.js

@@ -0,0 +1,11 @@
+const JSONMessage = (messageType, data) => {
+	// return new Blob([messageType, JSON.stringify(data)], {type: 'application/json'});
+	return JSON.stringify([
+		messageType,
+		data,
+	]);
+};
+
+module.exports = {
+	JSONMessage,
+};

src/views/HomeView.js

@@ -3,17 +3,19 @@ import {
 	Jumbotron,
 	Row,
 } from '../components/Bootstrap';
+import { JSONMessage } from '../helpers/web-socket';
 
 function handleDrop (e) {
 	e.preventDefault();
 	e.stopPropagation();
 
-	// console.log(e.dataTransfer.files);
-	window.clientWS.send('dropped-files', e.dataTransfer.files);
-
+	const draggedFiles = [];
 	for (const f of e.dataTransfer.files) {
 		console.log('Dragged files', f.path);
+		draggedFiles.push(f.path);
 	}
+
+	window.clientWS.send(JSONMessage('dropped-files', draggedFiles));
 }
 
 function handleDragOver (e) {

yarn.lock

@@ -2668,6 +2668,10 @@ electron-download@^3.0.1:
     semver "^5.3.0"
     sumchecker "^1.2.0"
 
+electron-log@^2.2.14:
+  version "2.2.14"
+  resolved "https://registry.yarnpkg.com/electron-log/-/electron-log-2.2.14.tgz#2123319ccb8d70b0db07f0eda57d5823cb42b4b0"
+
 electron-osx-sign@0.4.10:
   version "0.4.10"
   resolved "https://registry.npmjs.org/electron-osx-sign/-/electron-osx-sign-0.4.10.tgz#be4f3b89b2a75a1dc5f1e7249081ab2929ca3a26"