16
Real-time Communication using Node.js & Socket.IO Presenter: Vageesh Bhasin, Mindfire Solutions Date: 20 – June – 2014

Real Time Communication using Node.js and Socket.io

Embed Size (px)

DESCRIPTION

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

Citation preview

Page 1: Real Time Communication using Node.js and Socket.io

Real-time Communication using Node.js & Socket.IO

Presenter: Vageesh Bhasin, Mindfire SolutionsDate: 20 – June – 2014

Page 2: Real Time Communication using Node.js and Socket.io

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: [email protected] ,

[email protected]

Page 3: Real Time Communication using Node.js and Socket.io

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

Page 4: Real Time Communication using Node.js and Socket.io

WebSockets

Page 5: Real Time Communication using Node.js and Socket.io

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

Page 6: Real Time Communication using Node.js and Socket.io

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.1Host: server.example.comUpgrade: websocketConnection: UpgradeOrigin: http://example.com

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: Upgrade

Page 7: Real Time Communication using Node.js and Socket.io

Socket.IO

Page 8: Real Time Communication using Node.js and Socket.io

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

Page 9: Real Time Communication using Node.js and Socket.io

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 filesfunction 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.IOio.on('connection', function (socket) {

// Event 1socket.emit('event_1', {hello: 'world!'});// Event 2socket.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>

Page 10: Real Time Communication using Node.js and Socket.io

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.IOio.on('connection', function (socket) {

// Event 1socket.emit('event_1', {hello: 'world!'});// Event 2socket.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>

Page 11: Real Time Communication using Node.js and Socket.io

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");

Page 12: Real Time Communication using Node.js and Socket.io

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 nodesio.sockets.emit('pushMessage', {

message: data.message, time: new Date()

});});

Page 13: Real Time Communication using Node.js and Socket.io

DEMO

Presenter: Vageesh Bhasin, Mindfire Solutions

Page 14: Real Time Communication using Node.js and Socket.io

Question and Answer

Presenter: Vageesh Bhasin, Mindfire Solutions

Page 15: Real Time Communication using Node.js and Socket.io

www.mindfiresolutions.com

https://www.facebook.com/MindfireSolutions

http://www.linkedin.com/company/mindfire-solutions

http://twitter.com/mindfires

Page 16: Real Time Communication using Node.js and Socket.io

Thank you