This course has been updated! We now recommend you take the Complete Intro to Real-Time course.
Table of Contents
HTML5 API's
Introduction
Kyle 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.js
Kyle 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 Facades
Before 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 API
Local 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 API
Graphics 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.
getUserMedia
The 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.
requestAnimationFrame
The 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 Sockets
Web 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
Node.js Observations
Before 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".
Hello World
For this first example, Kyle begins by adding some code into "1.js". He demonstrates the way Node provides a hosting environment for the JavaScript code it compiles.
Accepting Input
Building 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 Help
Most 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 & Modules
Kyle'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 IO
Kyle 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.
Asynquence
Kyle 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 Asynquence
Now 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 Survey
Kyle 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 Modules
One 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 Modules
Now 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 Modules
Libraries 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 & Gulp
Whether 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 Streams
Rather 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 Streams
The 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 Webserver
Kyle 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 Requests
Kyle 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.
Framework Discussion
While fielding a few audience questions, Kyle expresses his general opinions about JavaScript frameworks and how the should look once they are in production code.
Simulating Asyncronicity
Kyle tasks the audience with adding a couple setTimeout statements to simulate an asynchronous behavior.
Adding Asynquence
The next task Kyle gives to the audience is to convert the nested setTimeout statements into Asynquence chains.
Serving Static Files
Up 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.
Socket.io
Setting Up Socket.io
Socket.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 Connection
Now 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 Messages
Kyle 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 Messaging
In 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 Movement
Kyle 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-up
Kyle concludes his Socket.io coverage with a few audience questions and additional discussion.
WebRTC
WebRTC Introduction
Web 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 DataChannels
RTCPeerConnection 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 Application
The 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 Demo
Kyle spends the last few minutes demonstrating a real-world WebRTC application at talky.io. He also provides a few additional resources for WebRTC.