Second screen is the term commonly used for describing a secondary screen, usually a mobile device or tablet which is used in conjunction with another (usually passive) device to provide an enhanced experience.
It’s also possible to enhance web pages with a second screen, in fact the W3C even have a working group1 dedicated to providing a specification to help facilitate this interaction. Even though this specifcation isn’t due to be completed until 2016 it’s possible today to build a second screen experience on the web using websockets.
This won’t be anything fancy, just a simple proof of concept which will hopefully spark some wider ideas around the usefulness of second screen and website interaction.
To start with we’ll create a simple express app and use the server that comes with it. We’ll also install
socket.io as dependencies. If you’ve downloaded the source code for this project then you can just use the command
npm install to download all the dependencies. Alternatively you can create your own package.json file and add these yourself.
Creating the back end
Next we’ll create the backend. I’ve created a file called server.js which will act as the server for the application. In it, I’ve created some paths for static files to be server from and two routes, a route for the index page of the application and a dynamic route to serve the individual pages.
One thing to note about the index route is that it performs a crude mobile detection test. This is important to be able to send the correct version of the site to either a desktop or mobile client. In this instance we only want the desktop to display the website pages and the mobile device to display the navigation.
Finally there is a small piece of socket.io code at the end of the file. This creates a ‘room’ to use to broadcast events and an event listener / emitter to send and receive events through websockets. This will allow the application to respond to events from the mobile device and update the state of the desktop application.
Hooking up the templates
As mentioned in part one, the index page routes to two separate templates based on which device is being used. In the case of the dektop, it simply shows the page with the text ‘home’. On mobile it shows the navigation for the website.
Viewing the site
Viewing the site on your desktop machine is easy, simply run
node server.js then browse to http://localhost:8000/ and you’ll be served the website by the node server.
To view the site on your mobile device, you’ll need to find the ip address of your computer on the local network. On Mac OS X go to System Preferences > Network.
On a windows PC open Network Connections by clicking the Start button , and then clicking Control Panel. Then select an active network connection, and then, in the toolbar, click View status of this connection and click Details.
As you can see, it’s quite trivial to set up a website which can be controlled by another device. Feel free to grab the full source code from github and create your own.
You can download the source code here: https://github.com/hellotoby/second-screen-nav