include realtime server as part of express server

README.md

@@ -10,5 +10,12 @@ $ API=http://localhost:3001 nodemon server.js
 $ node-sass -w sass/application.scss public/css/application.css
 ```
 
+To run the server as a daemon that will be re-run if it crashes, you can
+use the forever node package.
+```
+$ npm install -g forever
+$ forever start server.js
+```
+
 Run the metamaps api in another terminal using
 `$ rails s -p 3001`

apiProxyMiddleware.js

@@ -4,6 +4,7 @@ function apiProxyMiddleware (req, res, next) {
     if (!req.xhr) {
         return next()
     }
+    console.log('xhr request', req.originalUrl)
     const method = req.method.toLowerCase()
     req.pipe(
         request[method](process.env.API + req.originalUrl, {
@@ -14,6 +15,7 @@ function apiProxyMiddleware (req, res, next) {
             followRedirect: false
         })
     )
+    .on('error', console.log)
     .pipe(res)
 }
 

realtime/README.md

@@ -1,17 +0,0 @@
-## Node.js realtime server
-
-To run the server, you need to install the dependencies and run the server.
-Please ensure you have followed the OS-specific instructions in doc/ to
-install NodeJS. Once you have node, then you can proceed to install the
-node packages for the realtime server:
-
-    npm install #creates node_modules directory
-    node realtime/realtime-server.js
-
-That's it!
-
-To run the server as a daemon that will be re-run if it crashes, you can
-use the forever node package.
-
-    sudo npm install -g forever
-    forever start realtime/realtime-server.js

realtime/global.js

@@ -7,7 +7,7 @@ const {
   LEAVE_CALL,
   JOIN_MAP,
   LEAVE_MAP
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../src/Metamaps/Realtime/events')
 
 module.exports = function(io, store) {
   store.subscribe(() => {

realtime/index.js

@@ -0,0 +1,16 @@
+const signalling = require('./signal')
+const junto = require('./junto')
+const map = require('./map')
+const global = require('./global')
+const stunservers = [{'url': 'stun:stun.l.google.com:19302'}]
+
+const { createStore } = require('redux')
+const reducer = require('./reducer')
+
+module.exports = (io) => {
+    let store = createStore(reducer)
+    global(io, store)
+    signalling(io, stunservers, store)
+    junto(io, store)
+    map(io, store)
+}

realtime/junto.js

@@ -17,7 +17,7 @@ const {
   INVITE_A_CALL,
   JOIN_CALL,
   LEAVE_CALL
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../src/Metamaps/Realtime/events')
 
 const { mapRoom, userMapRoom } = require('./rooms')
 

realtime/map.js

@@ -10,7 +10,7 @@ const {
   SEND_COORDS,
   SEND_MAPPER_INFO,
   DRAG_TOPIC
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../src/Metamaps/Realtime/events')
 
 const { mapRoom, userMapRoom } = require('./rooms')
 

realtime/realtime-server.js

@@ -1,19 +0,0 @@
-const io = require('socket.io')()
-const signalling = require('./signal')
-const junto = require('./junto')
-const map = require('./map')
-const global = require('./global')
-const stunservers = [{'url': 'stun:stun.l.google.com:19302'}]
-
-const { createStore } = require('redux')
-const reducer = require('./reducer')
-
-let store = createStore(reducer)
-
-global(io, store)
-signalling(io, stunservers, store)
-junto(io, store)
-map(io, store)
-
-io.listen(parseInt(process.env.NODE_REALTIME_PORT) || 5000)
-console.log('booting up', process.env.NODE_REALTIME_PORT || 5000)

realtime/reducer.js

@@ -4,7 +4,7 @@ const {
   LEAVE_MAP,
   JOIN_CALL,
   LEAVE_CALL
-} = require('../frontend/src/Metamaps/Realtime/events')
+} = require('../src/Metamaps/Realtime/events')
 
 const NOT_IN_CONVERSATION = 0
 const IN_CONVERSATION = 1

server.js

@@ -1,29 +1,43 @@
 const path = require('path')
 const express = require('express')
 const webpack = require('webpack')
+const socketio = require('socket.io')
+const { createServer } = require('http')
 const webpackDevMiddleware = require('webpack-dev-middleware')
 const apiProxyMiddleware = require('./apiProxyMiddleware')
+const realtime = require('./realtime')
 const port = process.env.PORT || 3000
 
-const app = express();
+const app = express()
+const server = createServer(app)
+const io = socketio(server)
+realtime(io) // sets up the socketio event listeners
 
+// serve the whole public folder as static files
 app.use(express.static(path.join(__dirname, 'public')))
 
-const config = require('./webpack.config.js');
+const config = require('./webpack.config.js')
-const compiler = webpack(config);
+const compiler = webpack(config)
 // Tell express to use the webpack-dev-middleware and use the webpack.config.js
 // configuration file as a base.
 app.use(webpackDevMiddleware(compiler, {
   publicPath: config.output.publicPath
 }))
 
+// pass XMLHttpRequests
+// through to the API
+// anything which is the UI wanting to make requests to the API
 app.use(apiProxyMiddleware)
 
+// for any normal route
 app.get('*', function (req, res) {
-    res.sendFile(path.join(__dirname, 'public/index.html'))
+  // respond with the same html file
+  // since the whole UI technically boots
+  // from the React app and the javascript
+  res.sendFile(path.join(__dirname, 'public/index.html'))
 })
 
 // Serve the files on set port or port 3000.
-app.listen(port, function () {
+server.listen(port, function () {
   console.log('Metamaps listening on port ' + port + '\n')
 });