Creating a real-time widget

The configuration options and well thought out methods of socket.io make for a highly versatile library. Let's explore the dexterity of socket.io by making a real-time widget that can be placed on any website and instantly interface with a remote socket.io server to begin providing a constantly updated total of all users currently on site. We'll name it the Live Online Counter (loc for short).

Our widget is for easy user consumption and should require very little knowledge to get working, so we want a very simple interface. Loading our widget through a script tag, and then initializing the widget with a prefabricated init method would be ideal (this allows us to pre-define properties before initialization if necessary).

Getting ready

We'll need to create a new folder with some new files: widget_server.js, widget_client.js, server.js, and index.html.

Before we start let's also get the socket.io-client module from npm. We'll be using this to build our custom socket...