“Real-time” is a buzzword that will only get more popular in the future. The term itself is a little indistinct and I can’t help wanting to roll my eyes every time I hear it. If “real-time” is a thing, is there such thing as “fake-time”?
When an app or business states that the service they provide is “real-time”, it depends on the context. It may mean that the service delivers information as it happens. It may refer more specifically to live audio and video streaming. It may even refer to a talk show on HBO with Bill Maher.
With the rise of SPAs (Single Page Applications), we are evolving beyond static websites that must be refreshed in order to see updates. Live, or “real-time”, updating is becoming the new expectation thanks to monumental applications like Gmail and Facetime.
There are many libraries available to us as web developers that simplify “real-time” data transfer. SocketIO is a library that enables real-time bidirectional event-based communication. It is super easy to get up and running with and the fact that their hello-world application is a chat-app supports this claim.
I decided to try SocketIO out by building a multiplayer space combat game that allows users to compete for the high score. I also made use of Phaser, an HTML5 game framework, Node/Express and Angular.
The inspiration for the project came after watching Ari Lerner talk about building games with AngularJS at ng-europe 2014.
Similar to D3, Phaser has an incredible amount of awesome examples. I used one of their tilemap demos for the base of my project. It was easy to find various examples that had certain components that I could emulate. Phaser makes usually complex and tedious tasks like collision detection as simple as possible.
IO / Node / Express
I built a Node/Express server to handle communication across clients. I created two server side models –
Game keeps track of all
Player models. Whenever a player updates, by moving, shooting, or scoring for example, a client-side SocketIO event triggers a server-side SocketIO event that subsequently updates all connected clients. Since this is the case, I needed client-side
Player counterparts as well. I also used local storage so that even when a player disconnected, their username, score and health would persist.
It was easy to keep the application modular using Angular services, factories and custom directives.
Here is the entirety of the app’s body tag (not including scripts):
<div class="container"> <h1 class="app-title">Sci Fly</h1> <game-feed></game-feed> <game-canvas></game-canvas> </div>
Grab a friend and head on over to scifly.herokuapp.com to try it out!