308364 - WebSocket using Socket.IO

ICT@PSU 308-364 Advanced Web Programming 1 of 17

Web Socket using Socket.IO308-364 Advanced Web Programming

1/2558

Simplicity is the ultimate sophistication

Leonardo da Vinci


Objectives

• Concepts of the real time communication on Website

• Understand how WebSocket works

• Implement a real time chat using Socket.IO• NodeJS

• Express• Jade


http://venturebeat.com/2012/08/13/webrtc-is-almost-here-and-it-will-change-the-web/

Real time communication on Website

HTTP (Pre AJAX)

Original Web, one page request returnsOne page (e.g. Geocities).

AJAX (2004)

Page can update without refreshing(e.g. Gmail).

Web Sockets (2008)

Page can establish bi-directionalcommunication (e.g. Trello).

WebRTC (2012)Page to page communications


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


How does WebSocket work?

• Establish connection through 'WebSocket Handshake‘

• After handshake, initial HTTP connection is replaced by WebSocketconnection (uses same underlying TCP/IP)

Transfer data without incurring any overhead associated with requests

GET /chat HTTP/1.1

Host: server.example.com

Upgrade: websocket

Connection: Upgrade

Origin: http://example.com

Client Request

HTTP/1.1 101 Switching Protocols

Upgrade: websocket

Connection: Upgrade

Server Resonse


What is Socket.IO• A persistent connection between

server & client• Real time and Cross browsers• Socket.IO is composed of two parts:• A server that integrates with (or

mounts on) the Node.JS HTTP Server: socket.io

• A client library that loads on the browser side: socket.io-client

• In addition to one-to-one communication as in WebSocket, it enables broadcasting to multiple nodes

Node Server

socket.io

Browser

socket.io

Browser

socket.io

Browser

socket.io


Push for changes

Browser Server Notification Server

Load page

connect(WebSocket, Flash Socket, …)

Data changed

Changed data

Update UI


Installation and Configuration

npm install socket.io

var http = require('http');

var fs = require('fs');

fs.readFile('./index.html', function(err, html) {

var s = http.createServer(function(q, r){

r.writeHead(200, {'Content-Type' : 'text/html'});

r.write(html);

r.end('Hello World');

});

s.listen(80);

});

app.js

Create a web server, and load index.html


Full example

var http = require('http');

var fs = require('fs');

fs.readFile('./index.html', function(err, html) {

var s = http.createServer(function(request, response) {

response.writeHead(200, {"Content-Type":"text/html"});

response.write(html);

response.end('Hello World!');

});

s.listen(80);

var io = require('socket.io')(s);

io.sockets.on('connection', function (socket) {

socket.on('EventName', function (data) {

socket.emit(data);

console.log(data);

});

socket.on('disconnect', function (){

console.log('client disconnected');

});

});

});

app.js index.html<script src=‘https://cdn.socket.io/socket.io-1.3.3.js’></script>

<script>

var socket = io.connect(http://localhost);

socket.on(‘connect’, function () {

socket.emit(‘EventName’, ‘Hello my socket!’);

});

</script>


Fire: 1) Individual Recipient

• Using “Emit” to communicate with individual connection

• Current socket

• Specific socket

socket.emit('eventName', "Event Data");

io.sockets.socket(socketId).emit('eventName', "Event Data");


Fire: 2) Multiple Recipients

• Using “Boardcast” to communicate with multiple connections

• All connected nodes except the current one

• All connected nodes

socket.boardcast.emit('eventName', "Event Data");

io.sockets.emit('eventName', "Event Data");


Fire: 3) Specific Channel

• Using “To/In” to communicate with specific channel

• To all connected nodes in a channel except current

• To all connected nodes in a channel

socket.boardcast.to(channelName).emit('eventName', "Event Data");

io.sockets.in(channelName).emit('eventName', "Event Data");


Lab (10%)

• You will follow the guideline in this website to create a chat application.• http://socket.io/get-started/chat/

• http://www.siamhtml.com/real-time-chat-with-node-js-and-socket-io

• You can decorate your own application with your desired framework.

http://www.siamhtml.com/real-time-chat-with-node-js-and-socket-io/

http://www.siamhtml.com/real-time-chat-with-node-js-and-socket-io/


Install Dependencies

• npm install express --save-dev

• npm install --save socket.io

• npm install jade

• Jade is Optional• If you want to try, you can use jade to create HTML and

JavaScript, but this task is optional.

• https://www.youtube.com/watch?v=pNKNYLv2BpQ

https://www.youtube.com/watch?v=pNKNYLv2BpQ


Express and Jade

• http://expressjs.com/• Fast, un-opinionated, minimalist web framework for Node.js• Express is a minimal and flexible Node.js web application

framework that provides a robust set of features for web and mobile applications.

• Learn Express : http://www.siamhtml.com/how-to-build-website-with-expressjs/

• http://jade-lang.com/• A clean, whitespace-sensitive template language for writing

HTML• Learn Jade : http://www.siamhtml.com/how-to-use-jade-template-

engine-with-express/

http://www.siamhtml.com/how-to-build-website-with-expressjs/

http://www.siamhtml.com/how-to-use-jade-template-engine-with-express/


If you don’t want to use Jade

doctype html

html

head

title Realtime Chat using Node.js and Socket.IO

meta(name='viewport', content="initial-scale=1")

link(rel='stylesheet', href='css/main.css')

body

div.box.box--container

div.box.box--chat

ul#chat-history

form#chat-form(action="")

input.box(type="text", id="chat-message", autocomplete="off", placeholder="Enter message here...")

<!DOCTYPE html>

<html>

<head>

<title>Realtime Chat using Node.js and Socket.IO</title>

<meta name="viewport" content="initial-scale=1"><link rel="stylesheet" href="css/main.css">

</head>

<body>

<div class="box box--container">

<div class="box box--chat">

<ul id="chat-history"></ul>

<form id="chat-form" action="">

<input type="text" id="chat-message"

autocomplete="off" placeholder="Enter message here..." class="box">

</form>

</div>

</div>

</body>

</html>

Just convert Jade (in the tutorial) to HTML => http://jade-lang.com/demo/

http://jade-lang.com/demo/

308364 - WebSocket using Socket.IO

Technology

Transcript of 308364 - WebSocket using Socket.IO