Real-Time Web with Node.js
This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Table of Contents
IntroductionKyle begins the course with a brief introduction about his work experience and a few open-source projects he actively maintains. He also discusses the book series he's in the process of writing.
Into Node.jsKyle sets up the scope for what will be covered in this course. He'll be focusing on three major topics: HTML5, Node.js, and WebRTC.
HTML5 FacadesBefore jumping into the HTML5 APIs topic, Kyle talks a little about the facades he likes to wrap around these APIs. Facades add a thin layer of abstraction between the actual API and the production code using it.
Storage APILocal storage and sessions storage are two APIs that have been around for a long time. They give applications the ability to persist data in the browser. The difference between local storage and session storage is the duration the data is stored.
Canvas APIGraphics can be dynamically drawn in the browser using the canvas API. Kyle walks through the façade he created to simplify the canvas methods and enable features like chaining.
getUserMediaThe getUserMedia API allows the browser to attach to media streams from the user. This can be a webcam, a microphone, or even the user's screen in the case of desktop sharing.
requestAnimationFrameThe requestAnimationFrame API allows developers to ask the browser to make visual updates at the most optimal time. This is often used for animating objects but could apply for any visual update that's supposed to occur periodically.
Web SocketsWeb Sockets make an initial request to the server, but unlink a traditional request, the connections remains open. This allows for less latency and faster communication. Kyle demonstrates using the socket.io framework to work with Web Sockets.
Node.js ObservationsBefore diving into code, Kyle shares his personal opinions about where Node.js sits in today's technology stack and where he sees it in the future. He sees Node.js as the "middle end".
Accepting InputBuilding on the Hello World example, Kyle modifies the Node application to accept command-line input. He then imports a module called Minimist that will help parse command-line variables.
Adding HelpMost command-line programs have a help system that provides instructions for how to use the program. Kyle adds a printHelp() method that will display these help messages. Hey also spends a few minutes talking more about the "middle end" area where he sees a place for Node.
File IO & ModulesKyle's next task is to add the ability for the Node application to read a file from the file system. The application will then pull in the contents of the file and display the contents to the screen. Kyle separates this task into its own module
Asynchronous File IOKyle changes the program to read the file asynchronously and passes the readFile method a callback function. This function will be called when the file stream is completed. Kyle also demonstrates how to handle errors in Node.
AsynquenceKyle continues his demonstration of working with asynchronous calls. In this example, though, he is using the Asynquence library. Asynquence adds promise-like syntax to environments that are not promise aware.
Using AsynquenceNow that the HelloWorld2.js module is updated to use Asynquence, Kyle adds the chained calls into the main application. He uses the val() method and the or() method to hand the success and failure results.
Kickstarter SurveyKyle steps away from the current application to show a little code from a GitHub project the created to survey his Kickstarter contributors. In this code, he demonstrates another use of the Asynquence response stream.
Creating NPM ModulesOne method for distributing Node Modules is to publish them to npmjs.org. This site has tons of Node Modules that can be installed via the npm command-line tool. Kyle demonstrates how to package and distribute a Node module using NPM.
Publishing NPM ModulesNow that the module has a package.json file, it can be published to the NPM server for distribution. Once the module has been converted into an NPM module, the require() include can simply reference the module name.
Extending ModulesLibraries like Browserify allow the modules to be packaged and loaded directly into the browser. Kyle also demonstrates some shell code that allows the same module code to run in the Node, the browser, and other loading scenarios like AMD.
Grunt & GulpWhether it's minifying code, using JSLint, or any other build task, modules like Grunt and Gulp add automation to these types of build tasks.
File StreamsRather than reading an external file in one large chuck, data from the file can be loaded piece by piece using the file stream API. The file stream API uses event listeners. For example, the "data" event is fired each time a chunk of data is received.
Piping StreamsThe output from one file stream can be piped to the input of another file stream. Piping typically uses both the read-stream and write-stream APIs. Kyle also demonstrate a great streams resource nodestreams.com
Node as a WebserverKyle transitions away from the command-line to explore how Node behaves as a webserver. He starts by creating a server file and importing the http module.
Handling RequestsKyle modifies the handleHTTP method to return the correct headers for the incoming request. He also incorporates request routing. For example, responding differently to GET and POST requests.
Simulating AsyncronicityKyle tasks the audience with adding a couple setTimeout statements to simulate an asynchronous behavior.
Adding AsynquenceThe next task Kyle gives to the audience is to convert the nested setTimeout statements into Asynquence chains.
Serving Static FilesUp to this point, Node has been pushing content to the browser using the write-stream API. Kyle now modifies the node application to serve static HTML files. Kyle also field a few questions about keeping track of useful node modules.
Setting Up Socket.ioSocket.io is a Node module that enables real-time bidirectional communication in the browser. It's built on top of the native HTML5 Web Socket API. Kyle shows how to install and set up Socket.io with the current Node application.
Making a Socket ConnectionNow that Socket.io is included in the Node application, Kyle walks through how to make a socket connection. He demonstrates the event-driven architecture by listening to connect and disconnect events on both the client and the server.
Sending MessagesKyle tasks the audience with adding a setInterval method that will transmit a message to any client connected to the socket. He uses the emit() method to send the message.
User-Triggered MessagingIn this task, users are to create a simple form to receive input from the user. This input is then sent to the server through Socket.io and displayed for all connected clients. Kyle also shows how to emit messages only to the other clients connected and not to the sender.
Broadcasting Mouse MovementKyle modifies the Node application to now broadcast mouse movements from one connected client to the other. He does this by creating a "spy" event and passing the mouse position as object data.
Socket.io Wrap-upKyle concludes his Socket.io coverage with a few audience questions and additional discussion.
WebRTC IntroductionWeb Real-Time-Communication or WebRTC allows for extremely low-latency peer-to-peer communication. This low-latency communication opens up more possibilities for real-time games and collaboration.
RTCPeerConnection, Signaling, and DataChannelsRTCPeerConnection is an object instantiated in your browser that allows direct communication with an RTCPeerConnection object in another browser. Once connected, streams like video or audio can then be attached to the connection. Kyle explains how this connections is facilitated through something called signaling. He also introduces DataChannels
Creating a WebRTC ApplicationThe final exercise is a WebRTC application. Kyle walks through setting up the initial handshake facilitated by Socket.io on the server. Then Kyle scripts each client to communicate to each other through a RTCPeerConnection.
Real-World WebRTC DemoKyle spends the last few minutes demonstrating a real-world WebRTC application at talky.io. He also provides a few additional resources for WebRTC.