What is this

While this was primarily build as a learning excercise, my goal was to end up with something that's at least a little interesting and potentially useful.

First a user registers/logs in, then they are connected to the server via Websockets. Their location is sent to the server and subsequently pushed to all connected clients. All clients are updated with the locations of all other clients, and this location data is plotted on a Google Map.

If a user clicks another user's icon on the map, a "profile box" pops up for the selected user.

Users are able to edit their own profiles, and any change they make will be visiblle to all connected clients within 5 seconds. On 5 second intervals, users' locations are pinged to the server and all connected clients' see their maps update to show any change.

For a similar project, see spaceDagger, which uses Meteor to accomplish most of the same functionality with far less code.

Does it work?

It should, except there might be a bug where only one user can be logged in at once.

How was it built

The server is written in ES6 Javacript, but can run on older platforms as well via Babel.

There are two web servers running concurrently:

1. Express.js is the "main" server which connects to the database and serves HTML pages
2. ws provides a Websocket server

Sequelize is a promise-based ORM used with Express.

For the client, Bower is used as a package manager and the standard HTML5 Websocket API is used. Google Maps Javascript API is used along with HTML5 geolocation

How to run this

Note that all the following commands should be run from within the repo's root directory. In other words, don't cd anywhere else before running them.

start by cloning the repo

1. Go to scripts/env_setup.sh.example and fill in the required environment variables. Then remove the .example from the extension. This file is in .gitignore.
2. Start the server: there are two ways to do this:
3. using babel to compile. Use scripts/compile_and_run to do this.
4. using Node without compilation. npm start accomplishes this, or nodejs main.js. To do this, the installed Node version must be modern enough to support ES6 features (promises, arrow functions, template strings, etc). I'm using Node 5.11.1.
5. The app can be loaded into a REPL using scripts/console. All the app's code is namespaced under server, which is available as a variable in the REPL. See scripts/console for other available variables (everything defined on the context object.)
6. babel_node can also load the app into a REPL using scripts/babel_repl.

How code is organized

• client/
  • public/bower_components/ client-side package manager
  • views/
    • auth/ components of the login page
    • auth.ejs the login page
    • authenticated.ejs the post-login page. Also contains DOM-related Javscript
    • index.ejs wrapper for other pages
    • websockets.ejs client-side websocket code, not initialized until login
  • layout.ejs layout template
• compiled/ destination for code transpiled by Babel
• node_modules/ all NPM depenencies are fully present in this folder. No need to npm install
• scripts/ shell scripts
  • lib/ helpers, no need to execute these
  • babel_repl Starts a REPL using babel-node
  • compile Compiles the app using Babel
  • compile_and_run Combines compile and run_compiled_app scripts
  • console Loads a REPL for the app using Node
  • run_compiled_app Runs the server from compiled/
  • start Starts the server with Nodejs
• server/
  • models/ Individual models - only User, actually
  • auth.js Authentication module
  • env_vars.js.example Config file, should be edited and .example removed
  • expressConfig.js Express configuration
  • models.js model definitions with Sequelize. Loads additional models from server/models/
  • request_objects.js turning request parameters into objects
  • routes.js express routes
  • websockets.js server-side websockets code
• .babelrc babel config
• .bowerrc bower config
• bower.json registers this app as a Bower app
• main.js The entry point for this app
• package.json registers this app as a NPM module, lists dependencies, and defines npm start