Intro to Web Sockets – using Node JS & Socket.IO – What are Web Sockets?

View Github Repository Open presentation in a new window

controlz

See all presentation from controlz

Intro to Web Sockets – using Node JS & Socket.IO – What are Web Sockets?

0 0

Presentation-Socket.IO

Presentation material for a talk I gave at a Software Niagara DevTricks event titled Intro to WebSockets using Socket.IO

On Github controlz / Presentation-Socket.IO

Intro to Web Sockets

using Node JS & Socket.IO

By Michael Mottola

What are Web Sockets?

Web Sockets...

  • were developed as HTML5 initiative
  • is a full-duplex single TCP socket connection
  • provides "realtime" communication between servers and clients
  • works consistently across multiple platforms
  • supports cross domain communication
  • does not make AJAX obsolete
- HTML5 initiative—introduced the WebSocket JavaScript interface - Full duplex: communication in two directions simultaneously - telephone (because both parties can talk at once)

Use Cases

  • Multiplayer online games
  • Chat applications
  • Live sports ticker
  • Realtime updating social streams

Server Side Implementations

http://socket.io

Installing Socket.io

npm install socket.io
Server Side JavaScript
var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});
Client Side JavaScript
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io.connect('http://localhost');
  socket.on('news', function (data) {
    console.log(data);
    socket.emit('my other event', { my: 'data' });
  });
</script>

Socket.io using Express Web Framework

var app = require('express')()
  , server = require('http').createServer(app)
  , io = require('socket.io').listen(server);

server.listen(80);

app.get('/', function (req, res) {
  res.render('home');
});

io.sockets.on('connection', function (socket) {
  socket.emit('news', { hello: 'world' });
  socket.on('my other event', function (data) {
    console.log(data);
  });
});

Sending a Broadcast

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
  socket.broadcast.emit('user connected');
});

Sending Volatile Messages

var io = require('socket.io').listen(80);

io.sockets.on('connection', function (socket) {
  var tweets = setInterval(function () {
    getFancyTweet(function (tweet) {
      socket.volatile.emit('fancy tweet', tweet);
    });
  }, 100);

  socket.on('disconnect', function () {
    clearInterval(tweets);
  });
});
Broadcasting means sending a message to everyone else except for the socket that starts it. Volatile Messages: If a certain client is not ready to receive message (because of network slowness or other issues). if he doesn't receive ALL the tweets your application won't suffer.

Example App

My Test Run with Socket.io

Football Pong

Football Pong Scoreboard

https://github.com/controlz/Football-Pong-Scoreboard

Learn more about sockets

THE END

Thanks for Viewing

- Michael Mottola