Chapter 1 🔅


In this reader we will explore different ways in which we can connect objects to the Internet, and communicate with them in real-time via webSockets.


As interaction designers you have probably heard about the Internet of things.
The Internet of things is a concept that describes a world in which every-day objects are connected to the Internet, and hence accessible from anywhere in the world.

As electrical components become cheaper and more available, we are starting to see the first examples of web-enabled appliances. In the past 30 years we have gone from building room sized computers that were really not much more than fast calculators, to putting small and extremely fast computers into everyday objects like books, phones, watches, TVs and cars. To really see the power behind the Internet of things, lets consider some of the use-cases for appliances that communicate with you and each other.

Imagine you wake up sometime in the not so distant future. Your house might notice that you woke up. Since your house is connected to the appliances in it, your house can instruct the lights in your bedroom to turn on and start the coffee machine in the kitchen. Once you leave your house you may use your phone to instruct your car to automatically drive to your current location to pick you up, so you can drive to work. Since the car knows it's you it's picking up, it can automatically set the seats into the right position even before you get in. On your way to work your car can constantly communicate with the cars around it and centralised traffic computers to find out the fastest route. Whilst you are on your way to work, you might receive a message from your house to notify you that there is somebody at the door. You could use your phone to connect to the intercom and talk to the person outside. When you arrive at work, the car may communicate to the parking lot to find out which parking space, closest to the entrance, is available.

You quickly start to see that this description of the future is quite achievable with today’s technologies. Most of the hardware, software and infrastructure needed to build the Internet of things is available today.

About this reader

This reader is part of the Human and Computer Interaction course, taught at the NKF Interaction design department. In this course we will look at all the different elements needed to connect physical objects to the Internet. At the same time, we will discover and explore new ways to interact with websites.

Please note that although this course is an introduction to some parts of human computer interaction, it requires a good understanding about technologies like HTML, CSS, JavaScript and the general workings of the web. Additionally, this course assumes a good understanding about interaction design in general.

If you are interested to learn more about how to program microcontrollers and connect them to the Internet this is the place to be.

The light bulb

To illustrate the challenges met when designing objects that are connected to the Internet, let’s consider the following scenario.

“You want to create a website that is connected to a light bulb in your office. Every time a user visits your website you would like this light bulb to be turned on. The light bulb should turn itself off when a user leaves your website.”


Although this might not be the world’s most useful contraption, it does provide us with a good starting point to discuss the different elements needed to connect everyday objects to the Internet.

As an exercise, you should take pen and paper and try to draw the different elements needed to make such an installation possible. The questions you should ask yourself are as follows:

TIP: A sequence diagram (as describes in there UML standard) is a good way to start exploring the communication and the elements needed.


It’s probably easiest to analyse the “light bulb problem” if we start with the light bulb itself.


Before we can connect the light bulb to a website, we need a controller that can be programed to turn the light bulb on or off.

Thoughts on the Controller.
A microcontroller is a small computer that can be programmed to do simple tasks. Microcontrollers are generally used to turn electrical components on or off or read out their status.


Our programmable controller (microcontroller) needs to be addressable via the Internet, or at least from a computer that is connected. Connecting the microcontroller via USB to a computer with an Internet connection is generally simpler and faster (both important trades when creating a hardware prototype). The computer can then send instructions to the microcontroller to tell it to turn the light bulb on or off.


In order for the computer to be able to receive instructions over the Internet, it will need to run a server.

Thoughts on the server.
A server is a program that is running in the background and looks for incoming connection requests. It may respond to request in different ways. A web server for example would load the requested file and sending it back to the client. In most cases, the webserver will then close the connection and happily forget all about his client. Although this kind of communication works fine if we want to create a server that is fast at responding to file requests, what we really need is a persistent connection. (Otherwise we can’t detect if a user has disconnected and turn the light bulb off.) A persistent connection means, that the client and server connect to each other and keep this connection alive until one of them disconnects. Since we want to interact with our light bulb from a web browser, we can use HTML5 webSockets.


To detect if somebody is visiting our website, we can add a script to the page that connects to the light bulb server. The script can be a short JavaScript program that connects to the server when a user is looking at our website. If the user closes the page the server gets a disconnect message from the client.

How it works

If somebody now visits our website the page will automatically connect to our server. The server in return instructs the microcontroller to turn on the light bulb. The controller will flick a switch and the light will be on. If the server detects that our user has disconnected it will instruct the microcontroller to turn the light bulb off.

If we explore this system more closely, we discover that it is actually quiet expandable. Since our client-server connection is persistent and works in both directions, we could connect a joystick to the microcontroller and in (almost) real-time move things around on the website, while the website sends back feedback whenever we bump into a wall.

We have basically created a system that allows you to build physical devices that can be used as input and output devices for websites and/or apps.


As seen in the previous example there are 3 core elements we need in order for us to be able to build connected objects.

  1. The Microcontroller (to interface with the hardware)
  2. The SocketServer (to expose the controller to the internet)
  3. The Client (to talk to the server)

If the microcontroller and the socketServer are not the same device, we additionally need a communication layer between the two. This we will discuss in chapter 4.

In this reader, we will explore the elements needed to build connected objects. We start by looking at microcontrollers, in chapter 2.