WebSocket & JavaScript

by Nacho Galieri

BeerJs Bogotá

by Nacho Galieri

BeerJs Bogotá

 What is WebSocket?

Technology

Bidirectional

Full Duplex

Only TCP channel

by Nacho Galieri

BeerJs Bogotá

 WebSocket in JS - Server Side

Socket.io

WebSocket Node

by Nacho Galieri

BeerJs Bogotá

 WebSocket in JS - Server Side

#!/usr/bin/env node
var WebSocketServer = require('websocket').server;
var http = require('http');
 
var server = http.createServer(function(request, response) {
    console.log((new Date()) + ' Received request for ' + request.url);
    response.writeHead(404);
    response.end();
});
server.listen(8080, function() {
    console.log((new Date()) + ' Server is listening on port 8080');
});
 
wsServer = new WebSocketServer({
    autoAcceptConnections: false
});
 
wsServer.on('request', function(request) {
    var connection = request.accept('echo-protocol', request.origin);
    console.log((new Date()) + ' Connection accepted.');
    connection.on('message', function(message) {
        if (message.type === 'utf8') {
            console.log('Received Message: ' + message.utf8Data);
            connection.sendUTF(message.utf8Data);
        }
        else if (message.type === 'binary') {
            console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
            connection.sendBytes(message.binaryData);
        }
    });
    connection.on('close', function(reasonCode, description) {
        console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
    });
});

WebSocket Node

by Nacho Galieri

BeerJs Bogotá

 WebSocket in JS - Server Side

var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);

server.listen(80);

app.get('/', function (req, res) {
  res.sendfile(__dirname + '/index.html');
});

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

Socket.io

by Nacho Galieri

BeerJs Bogotá

 WebSocket in JS - Client Side

// Create a socket instance
var socket = new WebSocket('ws://localhost:8080');

// Open the socket
socket.onopen = function(event) {
	
    // Send an initial message
    socket.send('I am the client and I\'m listening!');
	
    // Listen for messages
    socket.onmessage = function(event) {
	console.log('Client received a message',event);
    };
	
    // Listen for socket closes
    socket.onclose = function(event) {
        console.log('Client notified socket has closed',event);
    };
	
    // To close the socket....
    socket.close()
	
};

WebSocket

by Nacho Galieri

BeerJs Bogotá

 WebSocket in JS - Client Side

<script src="/socket.io/socket.io.js"></script>

Socket.io

// Create SocketIO instance, connect
var socket = new io.Socket('localhost',{
	port: 8080
});
socket.connect(); 

// Add a connect listener
socket.on('connect',function() {
	console.log('Client has connected to the server!');
});
// Add a connect listener
socket.on('message',function(data) {
	console.log('Received a message from the server!',data);
});
// Add a disconnect listener
socket.on('disconnect',function() {
	console.log('The client has disconnected!');
});

// Sends a message to the server via sockets
function sendMessageToServer(message) {
	socket.send(message);
}