Clean up & Add connection setup

app/package-lock.json

@@ -141,6 +141,14 @@
         "@types/react": "*"
       }
     },
+    "@types/sha1": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@types/sha1/-/sha1-1.1.1.tgz",
+      "integrity": "sha512-Yrz4TPsm/xaw7c39aTISskNirnRJj2W9OVeHv8ooOR9SG8NHEfh4lwvGeN9euzxDyPfBdFkvL/VHIY3kM45OpQ==",
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/socket.io-client": {
       "version": "1.4.32",
       "resolved": "https://registry.npmjs.org/@types/socket.io-client/-/socket.io-client-1.4.32.tgz",
@@ -924,6 +932,11 @@
       "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
       "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -1210,6 +1223,11 @@
         "which": "^1.2.9"
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -4475,6 +4493,15 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "sha1": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/sha1/-/sha1-1.1.1.tgz",
+      "integrity": "sha1-rdqnqTFo85PxnrKxUJFhjicA+Eg=",
+      "requires": {
+        "charenc": ">= 0.0.1",
+        "crypt": ">= 0.0.1"
+      }
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

app/package.json

@@ -18,6 +18,7 @@
     "@types/node": "^10.12.18",
     "@types/react": "^16.7.18",
     "@types/react-dom": "^16.0.11",
+    "@types/sha1": "^1.1.1",
     "@types/socket.io-client": "^1.4.32",
     "@types/vis": "^4.21.9",
     "awesome-typescript-loader": "^5.2.1",
@@ -26,6 +27,7 @@
     "react": "^16.3.2",
     "react-dom": "^16.3.3",
     "react-json-view": "^1.19.1",
+    "sha1": "^1.1.1",
     "socket.io-client": "^2.2.0",
     "source-map-loader": "^0.2.4",
     "typescript": "^3.2.2",

app/src/App.tsx

@@ -5,11 +5,13 @@ import { Tree } from './components/Tree/Tree'
 import TitleBar from './components/TitleBar'
 import Sidebar from './components/Sidebar/Sidebar'
 import Connection from './components/ConnectionSetup/Connection'
+// import { default as EventBus } from '../../events'
 
 import { withTheme, Theme } from '@material-ui/core/styles'
 
-class State {
-  public selectedNode?: q.TreeNode | undefined
+interface State {
+  selectedNode?: q.TreeNode,
+  connectionId?: string
 }
 
 interface Props {
@@ -55,7 +57,7 @@ class App extends React.Component<Props, State> {
       <TitleBar />
       <div>
           <div style={this.getStyles().left}>
-            <Tree didSelectNode={(node: q.TreeNode) => {
+            <Tree connectionId={this.state.connectionId} didSelectNode={(node: q.TreeNode) => {
               this.setState({ selectedNode: node })
             }} />
           </div>
@@ -63,7 +65,7 @@ class App extends React.Component<Props, State> {
             <Sidebar node={this.state.selectedNode} />
           </div>
       </div>
-      <Connection />
+      <Connection onConnection={(connectionId: string) => this.setState({ connectionId })}/>
     </div >
   }
 }

app/src/components/ConnectionSetup/Connection.tsx

@@ -1,12 +1,15 @@
 import * as React from 'react'
-
 import { Typography, Toolbar, Modal, MenuItem, Button, Grid, Paper, TextField, Switch, FormControlLabel } from '@material-ui/core'
 import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
+import { MqttOptions, DataSourceState } from '../../../../backend/src/DataSource'
+import { addMqttConnectionEvent, makeConnectionStateEvent, rendererEvents } from '../../../../events'
+import sha1 = require('sha1')
 
 interface Props {
   classes: {[s: string]: string}
   theme: Theme
-  onAbort: () => void
+  onAbort: () => void,
+  onConnection: (connectionId: string) => void
 }
 
 const protocols = [
@@ -16,7 +19,6 @@ const protocols = [
 
 interface State {
   visible: boolean
-  name: string
   host: string
   protocol: string
   port: number
@@ -27,13 +29,22 @@ interface State {
   password: string
 }
 
+declare var window: any
+
 class Connection extends React.Component<Props, State> {
   constructor(props: any) {
     super(props)
-    this.state = {
+    const storedSettingsString = window.localStorage.getItem('connectionSettings')
+    let storedSettings
+    try {
+      storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
+    } catch {
+      window.localStorage.setItem('connectionSettings', undefined)
+    }
+
+    const defaultState = {
       visible: true,
-      name: '',
-      host: '',
+      host: 'nodered',
       protocol: protocols[0],
       port: 1883,
       ssl: false,
@@ -42,6 +53,38 @@ class Connection extends React.Component<Props, State> {
       username: '',
       password: '',
     }
+
+    this.state = Object.assign({}, defaultState, storedSettings)
+  }
+
+  private saveConnectionSettings() {
+    window.localStorage.setItem('connectionSettings', JSON.stringify(this.state))
+  }
+
+  private optionsFromState(): MqttOptions {
+    const protocol = this.state.protocol === 'tcp://' ? 'mqtt://' : this.state.protocol
+    const url = `${protocol}${this.state.host}:${this.state.port}`
+
+    return {
+      url,
+      username: this.state.username || undefined,
+      password: this.state.username || undefined,
+      ssl: this.state.ssl,
+      sslValidation: this.state.sslValidation,
+    }
+  }
+
+  private connect() {
+    const options = this.optionsFromState()
+    const connectionId = (sha1(Math.random() + JSON.stringify(options)).slice(0, 8)) as string
+    rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
+    rendererEvents.subscribe(makeConnectionStateEvent(connectionId), (state: DataSourceState) => {
+      console.log(state)
+      if (state.connected) {
+        this.props.onConnection(connectionId)
+        this.setState({ visible: false })
+      }
+    })
   }
 
   public static styles: StyleRulesCallback<string> = (theme: Theme) => {
@@ -91,46 +134,6 @@ class Connection extends React.Component<Props, State> {
           <form className={classes.container} noValidate autoComplete="off">
 
             <Grid container spacing={24}>
-              <Grid item xs={5}>
-                <TextField
-                  label="Name"
-                  className={classes.textField}
-                  value={this.state.name}
-                  onChange={this.handleChange('name')}
-                  margin="normal"
-                />
-              </Grid>
-              <Grid item xs={1}></Grid>
-              <Grid item xs={3}>
-                <div className={classes.switch}>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        checked={this.state.sslValidation}
-                        onChange={() => this.setState({ sslValidation: !this.state.sslValidation })}
-                        color="primary"
-                      />
-                    )}
-                    label="Validate certificate"
-                    labelPlacement="bottom"
-                  />
-                </div>
-              </Grid>
-              <Grid item xs={3}>
-                <div className={classes.switch}>
-                  <FormControlLabel
-                    control={(
-                      <Switch
-                        checked={this.state.ssl}
-                        onChange={() => this.setState({ ssl: !this.state.ssl })}
-                        color="primary"
-                      />
-                    )}
-                    label="Encryption"
-                    labelPlacement="bottom"
-                  />
-                </div>
-              </Grid>
               <Grid item xs={2}>
                 <TextField
                   select
@@ -184,19 +187,49 @@ class Connection extends React.Component<Props, State> {
                   margin="normal"
                 />
               </Grid>
-              <Grid item xs={4}></Grid>
+              <Grid item xs={3}>
+                <div className={classes.switch}>
+                  <FormControlLabel
+                    control={(
+                      <Switch
+                        checked={this.state.sslValidation}
+                        onChange={() => this.setState({ sslValidation: !this.state.sslValidation })}
+                        color="primary"
+                      />
+                    )}
+                    label="Validate certificate"
+                    labelPlacement="bottom"
+                  />
+                </div>
+              </Grid>
+              <Grid item xs={3}>
+                <div className={classes.switch}>
+                  <FormControlLabel
+                    control={(
+                      <Switch
+                        checked={this.state.ssl}
+                        onChange={() => this.setState({ ssl: !this.state.ssl })}
+                        color="primary"
+                      />
+                    )}
+                    label="Encryption"
+                    labelPlacement="bottom"
+                  />
+                </div>
+              </Grid>
+              <Grid item xs={6}></Grid>
             </Grid>
             <br />
             <div style={{ textAlign: 'right' }}>
               <Button variant="contained" className={classes.button}>
                 Test Connection
               </Button>
-              <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.setState({ visible: false })}>
-                Cancel
-              </Button>
-              <Button variant="contained" color="primary" className={classes.button}>
+              <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
                 Save
               </Button>
+              <Button variant="contained" color="primary" className={classes.button} onClick={() => this.connect()}>
+                Connect
+              </Button>
             </div>
           </form>
         </Paper>

app/src/components/Sidebar/ValueRenderer.tsx

@@ -53,6 +53,8 @@ class ValueRenderer extends React.Component<Props, State> {
       return this.renderRawValue(node.message.value)
     } else if (typeof json === 'number') {
       return this.renderRawValue(node.message.value)
+    } else if (typeof json === 'boolean') {
+      return this.renderRawValue(node.message.value)
     } else {
       const theme = this.props.theme.palette.type === 'dark' ? 'monokai' : 'bright:inverted'
       return <ReactJson

app/src/components/Tree/Tree.tsx

@@ -1,25 +1,22 @@
 import * as React from 'react'
-import * as io from 'socket.io-client'
 import * as q from '../../../../backend/src/Model'
 import TreeNode from './TreeNode'
 import List from '@material-ui/core/List'
-
-class TreeState {
-  public tree: q.Tree
-  public msg: any
-  constructor(tree: q.Tree, msg: any) {
-    this.tree = tree
-    this.msg = msg
-  }
-}
-
-export interface TreeNodeProps {
-  didSelectNode?: (node: q.TreeNode) => void
-}
+import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
+import {  } from '../../../../events/Events'
 declare const performance: any
 
-export class Tree extends React.Component<TreeNodeProps, TreeState> {
-  private socket: SocketIOClient.Socket
+interface Props{
+  didSelectNode?: (node: q.TreeNode) => void
+  connectionId?: string
+}
+
+interface TreeState {
+  tree: q.Tree
+  msg: any
+}
+
+export class Tree extends React.Component<Props, TreeState> {
   private renderDuration: number = 300
   private updateTimer?: any
   private lastUpdate: number = 0
@@ -28,8 +25,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
   constructor(props: any) {
     super(props)
     const tree = new q.Tree()
-    this.state = new TreeState(tree, {})
-    this.socket = io('http://localhost:3000')
+    this.state = { tree, msg: {} }
   }
 
   public time(): number {
@@ -55,18 +51,37 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
     }, Math.max(0, timeUntilNextUpdate))
   }
 
+  public componentWillReceiveProps(nextProps: Props) {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+    if (nextProps.connectionId) {
+      const event = makeConnectionMessageEvent(nextProps.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
+  }
+
   public componentDidMount() {
-    this.socket.on('message', (msg: any) => {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.subscribe(event, this.handleNewData)
+    }
+  }
+
+  public componentWillUnmount() {
+    if (this.props.connectionId) {
+      const event = makeConnectionMessageEvent(this.props.connectionId)
+      rendererEvents.unsubscribeAll(event)
+    }
+  }
+
+  private handleNewData = (msg: any) => {
     const edges = msg.topic.split('/')
     const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
     this.state.tree.updateWithNode(node.firstNode())
 
     this.throttledStateUpdate({ msg, tree: this.state.tree })
-    })
-  }
-
-  public componentWillUnmount() {
-    this.socket.removeAllListeners()
   }
 
   public render() {
@@ -74,7 +89,7 @@ export class Tree extends React.Component<TreeNodeProps, TreeState> {
       <List>
         <TreeNode
           animateChages={true}
-          autoExpandLimit={3}
+          autoExpandLimit={0}
           isRoot={true}
           didSelectNode={this.props.didSelectNode}
           treeNode={this.state.tree}

app/src/components/Tree/TreeNode.tsx

@@ -1,13 +1,11 @@
 import * as React from 'react'
 import * as q from '../../../../backend/src/Model'
 import { withTheme, Theme } from '@material-ui/core/styles'
-const throttle = require('lodash.throttle')
 import { isElementInViewport } from '../helper/isElementInViewport'
 import TreeNodeTitle from './TreeNodeTitle'
 import TreeNodeSubnodes from './TreeNodeSubnodes'
 
 declare var performance: any
-declare var window: any
 
 export interface TreeNodeProps {
   animateChages: boolean
@@ -37,7 +35,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
   private cssAnimationWasSetAt?: number
 
   private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLElement>()
+  private titleRef = React.createRef<HTMLDivElement>()
 
   private subnodesDidchange = () => {
     this.dirtySubnodes = true
@@ -139,7 +137,7 @@ class TreeNode extends React.Component<TreeNodeProps, TreeNodeState> {
     this.dirtyState = this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
 
     return <div key={this.props.treeNode.hash()} style={ displayBlock }>
-      <div style={animationStyle} ref={this.titleRef}>
+      <div style={animationStyle} ref={this.titleRef} onClick={() => this.toggle()}>
         <TreeNodeTitle
           edgeCount={this.state.edgeCount}
           collapsed={this.collapsed()}

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -29,7 +29,11 @@ class TreeNodeSubnodes extends React.Component<Props, {}> {
       const listItems = edges
         .map(edge => edge.target)
         .map(node => (
-          <ListItem key={node.hash()} style={listItemStyle} button>
+          <ListItem
+            key={node.hash()}
+            style={listItemStyle}
+            button
+          >
             <TreeNode
               animateChages={this.props.animateChanges}
               treeNode={node}

app/tsconfig.json

@@ -4,7 +4,7 @@
     "noImplicitAny": true,
     "strictNullChecks": true,
     "strict": true,
-    "lib": ["es2017"],
+    "lib": ["es2017", "dom"],
     "outDir": "./build/",
     "sourceMap": true,
     "module": "commonjs",
@@ -14,6 +14,9 @@
   "include": [
     "./src/**/*"
   ],
+  "exclude": [
+    "**/*.d.ts"
+  ],
   "awesomeTypescriptLoaderOptions": {
         "useCache": true,
         "transpileModule": true,

app/webpack.config.js

@@ -12,6 +12,8 @@ module.exports = {
       splitChunks: false,
     },
 
+    target: 'electron-renderer',
+
     mode: 'production',
 
     // Enable sourcemaps for debugging webpack's output.

backend/src/DataSource/DataSource.ts

@@ -8,6 +8,7 @@ interface DataSource<DataSourceOptions> {
   disconnect(): void
   onMessage(messageCallback: MessageCallback): void
   topicSeparator: string
+  stateMachine: DataSourceStateMachine
 }
 
 export { DataSource, MessageCallback }

backend/src/DataSource/DataSourceState.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from 'events'
+import { EventDispatcher } from '../../../events'
 
 export interface DataSourceState {
   connecting: boolean
@@ -6,7 +6,8 @@ export interface DataSourceState {
   error?: Error
 }
 
-export class DataSourceStateMachine extends EventEmitter {
+export class DataSourceStateMachine {
+  public onUpdate = new EventDispatcher<DataSourceState, DataSourceStateMachine>(this)
   private state: DataSourceState = {
     error: undefined,
     connected: false,
@@ -19,6 +20,7 @@ export class DataSourceStateMachine extends EventEmitter {
       error: undefined,
       connecting: false,
     }
+    this.onUpdate.dispatch(this.state)
   }
 
   public setError(error: Error) {
@@ -27,6 +29,7 @@ export class DataSourceStateMachine extends EventEmitter {
       connected: false,
       connecting: false,
     }
+    this.onUpdate.dispatch(this.state)
   }
 
   public setConnecting() {
@@ -35,6 +38,7 @@ export class DataSourceStateMachine extends EventEmitter {
       connected: false,
       connecting: true,
     }
+    this.onUpdate.dispatch(this.state)
   }
 
   public toJSON() {

backend/src/DataSource/MqttSource.ts

@@ -3,9 +3,14 @@ import { DataSource, DataSourceStateMachine } from './'
 
 export interface MqttOptions {
   url: string
+  username?: string
+  password?: string
+  ssl: boolean
+  sslValidation: boolean
 }
 
 export class MqttSource implements DataSource<MqttOptions> {
+  public stateMachine: DataSourceStateMachine = new DataSourceStateMachine()
   private client: Client | undefined
   private messageCallback?: (topic: string, message: Buffer) => void
   private rootSubscription = '#'
@@ -16,8 +21,7 @@ export class MqttSource implements DataSource<MqttOptions> {
   }
 
   public connect(options: MqttOptions): DataSourceStateMachine {
-    const state = new DataSourceStateMachine()
-
+    this.stateMachine.setConnecting()
     const client = mqttConnect(options.url, {
       resubscribe: false,
     })
@@ -25,19 +29,19 @@ export class MqttSource implements DataSource<MqttOptions> {
     this.client = client
 
     client.on('error', (error: Error) => {
-      state.setError(error)
+      this.stateMachine.setError(error)
     })
 
     client.on('close', () => {
-      state.setConnected(false)
+      this.stateMachine.setConnected(false)
     })
 
     client.on('reconnect', () => {
-      state.setConnecting()
+      this.stateMachine.setConnecting()
     })
 
     client.on('connect', () => {
-      state.setConnected(true)
+      this.stateMachine.setConnected(true)
       client.subscribe(this.rootSubscription, (err: Error) => {
         if (err) {
           throw new Error('mqtt subscription failed')
@@ -49,7 +53,7 @@ export class MqttSource implements DataSource<MqttOptions> {
       this.messageCallback && this.messageCallback(topic, message)
     })
 
-    return state
+    return this.stateMachine
   }
 
   public disconnect() {

backend/src/Model/TopicProperties.ts

@@ -1,4 +0,0 @@
-export class TopicProperties {
-  public topicSeparator: string = '/'
-  public multilevelWildcard: string | null = '#'
-}

backend/src/Model/index.ts

@@ -3,5 +3,4 @@ export { TreeNode, TreeNodeUpdateEvents } from './TreeNode'
 export { Message } from './Message'
 export { TreeNodeFactory } from './TreeNodeFactory'
 export { Tree } from './Tree'
-export { TopicProperties } from './TopicProperties'
 export { Hashable } from './Hashable'

backend/src/index.ts

@@ -1,34 +1,46 @@
-import * as socketIO from 'socket.io'
-const http = require('http')
-
-import { TopicProperties, Tree, TreeNodeFactory } from './Model'
+import { addMqttConnectionEvent, backendEvents, makeConnectionStateEvent, makeConnectionMessageEvent, AddMqttConnection } from '../../events'
 import { MqttSource, DataSource } from './DataSource'
 
-const options = { url: 'mqtt://nodered' }
-const dataSource = new MqttSource()
+class ConnectionManager {
+  private connections: {[s: string]: DataSource<any>} = {}
 
-const a: any[] = []
-
-const server = http.createServer()
-const io = socketIO(server)
-io.on('connection', (client) => {
-  console.log('connection')
-  a.forEach((b) => {
-    io.emit('message', b)
-  })
-  client.on('disconnect', () => { /* … */ })
-})
-server.listen(3000)
-
-const state = dataSource.connect(options)
-dataSource.onMessage((topic: string, payload: Buffer) => {
-  let buffer = payload
-  if (a.length < 30) {
-    a.push({ topic, payload: buffer.toString('base64') })
+  public manageConnections() {
+    backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
   }
+
+  private handleConnectionRequest = (event: AddMqttConnection) => {
+    console.log(event)
+    const connectionId = event.id
+    const options = event.options
+    const connection = new MqttSource()
+    this.connections[connectionId] = connection
+
+    connection.stateMachine.onUpdate.subscribe((state) => {
+      backendEvents.emit(makeConnectionStateEvent(connectionId), state)
+    })
+
+    connection.connect(options)
+    this.handleNewMessagesForConnection(connectionId, connection)
+  }
+
+  private handleNewMessagesForConnection(connectionId: string, connection: MqttSource) {
+    const messageEvent = makeConnectionMessageEvent(connectionId)
+    connection.onMessage((topic: string, payload: Buffer) => {
+      let buffer = payload
       if (buffer.length > 10000) {
         buffer = buffer.slice(0, 10000)
       }
-
-  io.emit('message', { topic, payload: buffer.toString('base64') })
+      backendEvents.emit(messageEvent, { topic, payload: buffer.toString('base64') })
     })
+  }
+
+  public removeConnection(hash: string) {
+    const connection = this.connections[hash]
+    connection.stateMachine
+    connection.disconnect()
+    delete this.connections[hash]
+  }
+}
+
+const connectionManager = new ConnectionManager()
+connectionManager.manageConnections()

backend/tsconfig.json

@@ -5,7 +5,7 @@
     "strictNullChecks": true,
     "outDir": "./build",
     "strict": true,
-    "lib": ["es2017"],
+    "lib": ["es2017", "dom"],
     "sourceMap": true
   },
   "includes": [
@@ -14,6 +14,8 @@
   "exclude": [
     "app",
     "node_modules",
-    "src/**/*.spec.ts"
+    "src/**/*.spec.ts",
+    "**/*.d.ts",
+    "typings"
   ]
 }

electron.js

@@ -1,6 +1,6 @@
 // Modules to control application life and create native browser window
 const {app, BrowserWindow} = require('electron')
-require('mqtt-explorer-backend')
+require('./backend/build/backend/src/index.js')
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let mainWindow
@@ -27,6 +27,7 @@ function createWindow () {
     // in an array if your app supports multi windows, this is the time
     // when you should delete the corresponding element.
     mainWindow = null
+    app.quit()
   })
 }
 

events/EventBus.ts

@@ -0,0 +1,55 @@
+import { Event } from './Events'
+import { ipcMain, ipcRenderer, IpcRenderer, IpcMain } from 'electron'
+
+interface EventBusInterface {
+  subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void): void
+  unsubscribeAll<MessageType>(event: Event<MessageType>): void
+  emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
+}
+
+class IpcMainEventBus implements EventBusInterface {
+  private ipc: IpcMain
+  private client: any
+  constructor(ipc: IpcMain) {
+    this.ipc = ipc
+  }
+
+  public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
+    console.log('subscribing', event.topic)
+    this.ipc.on(event.topic, (event: any, arg: any) => {
+      this.client = event.sender
+      callback(arg)
+    })
+  }
+
+  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
+    this.ipc.removeAllListeners(event.topic)
+  }
+
+  public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
+    this.client.send(event.topic, msg)
+  }
+}
+
+class IpcRendererEventBus implements EventBusInterface {
+  private ipc: IpcRenderer
+  constructor(ipc: IpcRenderer) {
+    this.ipc = ipc
+  }
+
+  public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
+    this.ipc.on(event.topic, (_event: any, arg: any) => callback(arg))
+  }
+
+  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
+    this.ipc.removeAllListeners(event.topic)
+  }
+
+  public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
+    console.log(event.topic, msg)
+    this.ipc.send(event.topic, msg)
+  }
+}
+
+export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
+export const backendEvents = new IpcMainEventBus(ipcMain)

events/EventDispatcher.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from 'events'
+
+interface CallbackStore {
+  wrappedCallback: any
+  callback: any
+}
+
+export class EventDispatcher<Message, Dispatcher> {
+  private emitter = new EventEmitter()
+  private dispatcher: Dispatcher
+  private callbacks: CallbackStore[] = []
+
+  constructor(dispatcher: Dispatcher) {
+    this.dispatcher = dispatcher
+  }
+
+  public dispatch(msg: Message) {
+    this.emitter.emit('event', msg)
+  }
+
+  public subscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
+    const wrappedCallback = (msg: Message) => {
+      callback(msg, this.dispatcher)
+    }
+    this.emitter.on('event', wrappedCallback)
+
+    this.callbacks.push({
+      callback,
+      wrappedCallback,
+    })
+  }
+
+  public unsubscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
+    const item = this.callbacks.find(store => store.callback === callback)
+    if (!item) {
+      return
+    }
+
+    this.emitter.removeListener('event', item.wrappedCallback)
+    this.callbacks = this.callbacks.filter(a => a !== item)
+  }
+
+  public removeAllListeners() {
+    this.emitter.removeAllListeners()
+    this.callbacks = []
+  }
+}

events/Events.ts

@@ -0,0 +1,39 @@
+import { MqttOptions, DataSourceState } from '../backend/src/DataSource'
+
+export interface Event<MessageType> {
+  topic: string
+}
+
+export interface AddMqttConnection {
+  id: string,
+  options: MqttOptions
+}
+
+export const addMqttConnectionEvent: Event<AddMqttConnection> = {
+  topic: 'connection/add/mqtt',
+}
+
+interface RemoveConnection {
+  connectionId: string,
+}
+
+export const removeConnection: Event<string> = {
+  topic: 'connection/remove',
+}
+
+export function makeConnectionStateEvent(connectionId: string): Event<DataSourceState> {
+  return {
+    topic: `conn/state/${connectionId}`,
+  }
+}
+
+interface Message {
+  topic: string,
+  payload: any
+}
+
+export function makeConnectionMessageEvent(connectionId: string): Event<Message> {
+  return {
+    topic: `conn/${connectionId}`,
+  }
+}

events/index.ts

@@ -0,0 +1,3 @@
+export * from './Events'
+export * from './EventDispatcher'
+export * from './EventBus'

events/test.js

@@ -0,0 +1,9 @@
+const { EventEmitter } = require('events');
+
+const a = new EventEmitter()
+a.on('test', () => console.log('test'))
+a.on('test2', () => console.log('test2'))
+a.removeAllListeners('test')
+
+a.emit('test')
+a.emit('test2')

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "start": "electron .",
     "test": "npm run test-backend",
+    "build": "cd app; npm run build; cd ..; cd backend; npm run build; cd ..",
     "test-backend": "cd backend && npm run test && cd ..",
     "release": "npm run test && ./release.sh"
   },
@@ -38,6 +39,9 @@
     "typescript": "^3.2.2"
   },
   "dependencies": {
-    "mqtt-explorer-backend": "file:backend"
+    "@types/electron": "^1.6.10",
+    "@types/socket.io": "^2.1.2",
+    "mqtt-explorer-backend": "file:backend",
+    "socket.io": "^2.2.0"
   }
 }