Book Image

Socket.IO Real-time Web Application Development

By : Rohit Rai
Book Image

Socket.IO Real-time Web Application Development

By: Rohit Rai

Overview of this book

<p>The expectations of users for interactivity withweb applications have changed over the past few years. No more does the user want to press the refresh button to check if new messages have arrived in their inbox; people expect to see updates in their applications in real-time. Mass multiplayer online games have given up the requirement of plugins and are built entirely in JavaScript. Socket.io enables you to build these highly interactive applications that work cross-browser.<br /><br />"Socket.io Real-time Web Application Development" is a guide to building, deploying, and scaling highly interactive real-time web applications using socket.io. This book will guide you through the building of a chat system using Node.js and socket.io, helping you get familiar with various features of the framework. Going further it will empower you to deploy and scale your applications in production.<br /><br />Introducing web application development with Node.js, this book walks you through developing of a full-fledged chat system built with socket.io and introducing all the concepts of socket.io and its usage in the process.<br /><br />It introduces you to the different approaches of bidirectional communication between the browser and the web server and will show you how socket.io abstracts all this for you to provide a single unified and uniform API for messaging and eventing to develop cross-browser applications. It explains how to authenticate your users, segregate the communication to channels, build chat rooms, and handle and scale sessions. It explains the mechanics behind socket.io and it also introduces you to what is involved in deploying the application to production and the intricacies involved in scaling it. <br /><br />This book will introduce you to all that is needed in browser-server communication to develop the next generation of interactive applications and games.</p>
Table of Contents (16 chapters)
Socket.IO Real-time Web Application Development
Credits
About the Author
Acknowledgement
About the Reviewers
www.PacktPub.com
Preface
Index

Designing the chat room


Let's modify the view to make it look like a chat room. We will need an area to display the messages, a text input for the user to enter the message, and a button to send the message. We will add some aesthetic elements, such as a header, banner, and footer. When we are done, our chat room user interface should look like the one shown in the following screenshot:

Awesome chat UI

Let's start editing layout.jade by adding a header and footer to it:

doctype 5 
html 
  block head 
    title= title 
    link(rel='stylesheet', href='/stylesheets/style.css') 
  body 
    header#banner 
      h1 Awesome Chat 
    block content 
    footer Hope you enjoy your stay here

The first change we make is to add the block keyword before head. This makes head a block, to which we can append content from the extending pages.

The other change is the addition of a new header and footer. Note that we are using the header and footer tags from HTML5. This code also introduces us to a new jade...