Broadcasting an image to other sockets

Typically, the src attribute for an HTML image tag will be a link to the location of the image. However, instead of a link to the image, we can actually provide the binary data for the image itself. This ability allows us to store and load actual images and not just the link to the image location.

We can actually use Socket.IO to send images from a browser to a server and then display them in another browser without ever storing them on a server, in a filesystem, or in a database of any kind. In instances where we don't need the data to be stored, this can be really useful.

In this recipe, we will demonstrate how we can pipe an image from our filesystem to the browser over WebSockets.

Getting ready…

In this recipe, I will use a static image called woodchuck.jpg to pipe into the browser. It is located at the root of the app along with the server.js and index.html files. You should be able to put any image that you want to use in that location as long as...