real time communication using node.js and socket.io

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

Upload: mindfire-solutions

Post on 10-May-2015

1.599 views

Category:

Software


4 download

DESCRIPTION

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

TRANSCRIPT

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