Realtime hacking with JSOxford

Yesterday I went to a hack day run by JSOxford. The theme was ‘realtime’, i.e. using Web technologies to update a site automatically from a data source.

Since I had no experience with realtime technologies before I came, I didn’t want to make anything too ambitious! I just wanted to learn the basics so that I could make something useful in the future.

The day started off by catching up with a few familiar faces over copious amounts of coffee and pastry. I joined the beginners group where Ryan took us through the creation of a simple chat room application using PubNub, a service which receives and broadcasts messages to anyone who connects with the same publish key. You picked a name and wrote a message which would be sent to the server. The server would then broadcast it to everyone else who was connected.

We then started a new chat app from scratch using the socket.io library. Socket.io works the same way for both the client and server code, so it was a breeze getting communication set up.

Lunch was Mission-Burrito-filled and super tasty as always! 🙂

After lunch, I split off to try something a little bit more original. In a similar way to how the chat app worked, I made a site that would send a colour* to the server, which would then send it to anyone else who was connected to the site. It was so easy to make, and entertained the rest of the group.

Let’s just take a moment and work out what’s actually happening here:

map of the internet

Let’s say there are a few people connected to my site. They all have a live connection to the server, so they can all send and receive data. When you change the colour on your laptop, that colour is sent to your office router which then sends it to the server hosting the website (which I think is in Holland) via a bunch of other servers on the way. The host then sends that colour via a different set of servers/phone masts to everyone with an active connection to the site. When the other computers receive the colour, their background changes too. All of that happens in the blink of an eye.

The Internet is amazing.

When the coding finished, we all gave presentations.

Over the two minutes, the background colour was changed almost 8000 times!

Other projects included a photo chat, Chris’ Countdown game, a flamingo-themed Twitter wall and Marcus’ realtime room temperature graph, powered by a Spark Core.

At the end, we went to the pub, where we had a realtime-inspired cocktail especially made for us!

This was the first hack day where I actually managed to put something online. I mean it’s completely useless but it was great fun to make. Check it out at http://oxdan.azurewebsites.net. (Fork)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s