Real-time Communication
using Node.js & Socket.IO
Presenter: Vageesh Bhasin, Mindfire Solutions
Date: 20 – June – 2014
Presenter: Vageesh Bhasin, Mindfire Solutions
About Me
By Profession:

Current - Quality Analyst with Mindfire – Web Appl...
Agenda

WebSocket
– Introduction to WebSockets
– How WebSockets work

Socket.IO
– Introduction to Socket.IO
– Using Sock...
WebSockets
Introduction to WebSocket

Protocol providing full-duplex communication channel over single TCP
connection

Web was buil...
How does WebSockets Work?

Establish connection through 'WebSocket Handshake'
– Client Request
– Server Response

After ...
Socket.IO
Introduction to Socket.IO

JavaScript library for realtime web applications

Has two parts:
– Client-side – Runs on Brow...
Using Socket.IO

With Node HTTP Server
// app.js
// Requiring Module Dependencies
var app = require('http').createServer(...
Using Socket.IO

With Express.JS
// Requiring Module Dependencies
var app = require('express')(),
server = app.listen(300...
Firing Events

Individual Recipient - EMIT
– Current connected socket
– Specific Socket

Multiple Recipients – BROADCAST...
Listening to Events

Listening to events is easier as compared to firing events
Presenter: Vageesh Bhasin, Mindfire Solut...
DEMO
Presenter: Vageesh Bhasin, Mindfire Solutions
Question and Answer
Presenter: Vageesh Bhasin, Mindfire Solutions
www.mindfiresolutions.com
https://www.facebook.com/MindfireSolutions
http://www.linkedin.com/company/mindfire-solutions
ht...
Thank you
Upcoming SlideShare
Loading in...5
×

Real Time Communication using Node.js and Socket.io

1,884

Published on

This presentation focuses on how to create and use bidirectional communication on Node.js Server using Socket.IO (WebSockets).

Published in: Software, Technology, Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,884
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
64
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Real Time Communication using Node.js and Socket.io"

  1. 1. Real-time Communication using Node.js & Socket.IO Presenter: Vageesh Bhasin, Mindfire Solutions Date: 20 – June – 2014
  2. 2. Presenter: Vageesh Bhasin, Mindfire Solutions About Me By Profession:  Current - Quality Analyst with Mindfire – Web Application Testing  Prior - Quality Analyst with Infosys – Database Testing By Hobby:  Web App using Node/Express – Consultant/Developer Contact Me:  Facebook: Link  LinkedIn: Link  My Blog: Link  Email: vageesh_bhasin@outlook.com , vageeshb@mindfiresolutions.com
  3. 3. Agenda  WebSocket – Introduction to WebSockets – How WebSockets work  Socket.IO – Introduction to Socket.IO – Using Socket.IO – Firing events – Listening to events  Demo on creating a small app Presenter: Vageesh Bhasin, Mindfire Solutions
  4. 4. WebSockets
  5. 5. Introduction to WebSocket  Protocol providing full-duplex communication channel over single TCP connection  Web was built around the idea – 'Client requests, Server fulfills'  AJAX got people started to look for bidirectional connections  Other strategies like long-polling had the problem of carry overhead, leading to increase in latency Presenter: Vageesh Bhasin, Mindfire Solutions
  6. 6. How does WebSockets Work?  Establish connection through 'WebSocket Handshake' – Client Request – Server Response  After handshake, initial HTTP connection is replaced by WebSocket connection (uses same underlying TCP/IP)  Transfer data without incurring any overhead associated with requests Presenter: Vageesh Bhasin, Mindfire Solutions GET /chat HTTP/1.1 Host: server.example.com Upgrade: websocket Connection: Upgrade Origin: http://example.com HTTP/1.1 101 Switching Protocols Upgrade: websocket Connection: Upgrade
  7. 7. Socket.IO
  8. 8. Introduction to Socket.IO  JavaScript library for realtime web applications  Has two parts: – Client-side – Runs on Browser – Server-side – Runs on Server – Node.js  Primarily uses WebSocket, but can fallback to other methods like AJAX long polling, JSONP polling  In addition to one-to-one communication as in WebSocket, it enables broadcasting to multiple nodes Presenter: Vageesh Bhasin, Mindfire Solutions
  9. 9. Using Socket.IO  With Node HTTP Server // app.js // Requiring Module Dependencies var app = require('http').createServer(serveFile), io = require('socket.io')(app), fs = require('fs'); app.listen(3000, function () { console.log('Server up and listening to port 3000'); }); // Handler to serve static files function serveFile(req, res) { fs.readFile(__dirname + '/index.html', function(err, data) { if(err) { res.writeHead(500); return res.end('Error loading index.html'); } res.writeHead(200); return res.end(data); }); } // Socket.IO io.on('connection', function (socket) { // Event 1 socket.emit('event_1', {hello: 'world!'}); // Event 2 socket.on('event_2', function(data) { console.log(data); }); }); // index.html <html> <head> <title>Socket.io Demo</title> <script src="/socket.io/socket.io.js"></script> <script> var socket = io('http://localhost'); socket.on('event_1', function (data) { console.log(data); socket.emit('event_2', { my: 'data' }); }); </script> </head> <body> <h1>Socket.IO Demo</h1> </body> </html>
  10. 10. Using Socket.IO  With Express.JS // Requiring Module Dependencies var app = require('express')(), server = app.listen(3000, function () { console.log('Server up and listening to port 3000'); }), io = require('socket.io').listen(server); app.get('/', function(req, res) { res.sendfile(__dirname + '/index.html'); }); // Socket.IO io.on('connection', function (socket) { // Event 1 socket.emit('event_1', {hello: 'world!'}); // Event 2 socket.on('event_2', function(data) { console.log(data); }); }); // index.html <html> <head> <title>Socket.io Demo</title> <script src="/socket.io/socket.io.js"></script> <script> var socket = io('http://localhost'); socket.on('event_1', function (data) { console.log(data); socket.emit('event_2', { my: 'data' }); }); </script> </head> <body> <h1>Socket.IO Demo</h1> </body> </html>
  11. 11. Firing Events  Individual Recipient - EMIT – Current connected socket – Specific Socket  Multiple Recipients – BROADCAST – All connected nodes except the current one – All connected nodes  Specific Channel – TO/IN – To all connected nodes in a channel except current – To all connected nodes in a channel Presenter: Vageesh Bhasin, Mindfire Solutions SYNTAX: socket.emit('eventName', "Event Data"); SYNTAX: io.sockets.socket(socketId).emit('eventName', "Event Data"); SYNTAX: socket.broadcast.emit('eventName', "Event Data"); SYNTAX: io.sockets.emit('eventName', "Event Data"); SYNTAX: socket.broadcast.to(channelName).emit('eventName', "Event Data"); SYNTAX: io.sockets.in(channelName).emit('eventName', "Event Data");
  12. 12. Listening to Events  Listening to events is easier as compared to firing events Presenter: Vageesh Bhasin, Mindfire Solutions Syntax: socket.on('eventName', handler); Example: // Register a handler to listen to 'event_1' socket.on('event_1', function (data) { // Respond by sending message with time stamp to all nodes io.sockets.emit('pushMessage', { message: data.message, time: new Date() }); });
  13. 13. DEMO Presenter: Vageesh Bhasin, Mindfire Solutions
  14. 14. Question and Answer Presenter: Vageesh Bhasin, Mindfire Solutions
  15. 15. www.mindfiresolutions.com https://www.facebook.com/MindfireSolutions http://www.linkedin.com/company/mindfire-solutions http://twitter.com/mindfires
  16. 16. Thank you

×