Embed Size (px)
Citation preview
APEX, Node.js and HTML5: Magic!
Alan ArentsenAlex Nuijten
alanarentsen.blogspot.com
@alanarentsen
nuijten.blogspot.com
@alexnuijten
Tim Berners-Lee
1990 1995HTML 2.0
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
1997HTML 3.2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
1997HTML 4.0
1999HTML 4.0.1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN” "http://www.w3.org/TR/html4/strict.dtd">
2000XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2001XHTML 1.1
2008HTML 5
Working Draft
2009XHTML 2.0✝
2012HTML 5
Candidate Recommendation
<!DOCTYPE html>
2014HTML 5
Recommendation
28 October
2015HTML 5.1
Candidate Recommendation
Input Types Graphics
VideoAudio
Geolocation
DragDropLocal Storage
Web WorkersWeb Sockets
Web Sockets
bi-directional, full-duplex communication.
Draft status
APEX, Node.js and HTML5: Magic!
Alan ArentsenAlex Nuijten
Websockets
Poll vs. Push
Background Process
NoAre you done yet?
No
Are you done yet?
No
Are you done yet?
NoAre you done yet?No
Are you done yet?
NoAre you done yet?
Background Process
I am Done!
Physical
Data
Application
Presentation
Session
Transport
Network
HTTP
Websockets
My First Websocket
http://www.websocket.org/echo.html
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
ws_connection.send (apex.item("P1_ECHO_TEXT").getValue());
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log ('There is no websocket API available.'); } else { ws_connection = new WebSocket ('wss://echo.websocket.org'); ws_connection.onmessage = function(message){ console.log ('Echo: ' + message.data); alert (message.data); } } });
var ws_connection;
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for
data-intensive real-time applications that run across distributed devices.“ ”
Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect
for data-intensive real-time applications that run across distributed devices.
JSJavaScript on the Server
websockethttp
oraclerest
https
pythongrunt
filbert
soap-q
q-superagent
mongodb-q
underscoresocket.io
gulp
expressmocha
async
lodash
mongoose
hapi
commander
browserify
redis
jade
colorsmoment
coffee-scriptpassportconnect
nodemailer
q
bower
cheerio
chalk
sails
optimist
mysqluglify-js
jshint
nodemon
stylus
forever
mkdir
validator
debug
less
bluebird gm awesome
websockethttp
oraclerest
https
pythongrunt
filbert
soap-q
q-superagent
mongodb-q
underscoresocket.io
gulp
expressmocha
async
lodash
mongoose
hapi
commander
browserify
redis
jade
colorsmoment
coffee-scriptpassportconnect
nodemailer
q
bower
cheerio
chalk
sails
optimist
mysqluglify-js
jshint
nodemon
stylus
forever
mkdir
validator
debug
less
bluebird gm awesome
My First Node.js
"use strict";
process.title = 'Basic NodeJS Echo server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Basic NodeJS Echo server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
Check Requirements
"use strict";
process.title = 'Basic NodeJS Echo server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Basic NodeJS Echo server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
/* * Events on WebSocket server */ wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted from ' + request.origin);
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data.toLowerCase(); connection.sendUTF(msgString); }); connection.on('close', function(connection) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* * Events on WebSocket server */ wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted from ' + request.origin);
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; connection.sendUTF(msgString); }); connection.on('close', function(connection) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* * Events on WebSocket server */ wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted from ' + request.origin);
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; connection.sendUTF(msgString); }); connection.on('close', function(connection) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* * Events on WebSocket server */ wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); console.log((new Date()) + ' Connection accepted from ' + request.origin);
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; connection.sendUTF(msgString); }); connection.on('close', function(connection) { console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log('There is no websocket API available.'); } else { ws_connection = new WebSocket ('ws://apex.ordina.nl:4880', 'echo-protocol'); ws_connection.onmessage = function(message){ alert (message.data); } } });
$(function() { window.WebSocket = window.WebSocket || window.MozWebSocket; if (!window.WebSocket) { console.log('There is no websocket API available.'); } else { ws_connection = new WebSocket ('ws://apex.ordina.nl:4880', 'echo-protocol'); ws_connection.onmessage = function(message){ alert (message.data); } } });
ws_connection.send (apex.item("P1_ECHO_TEXT").getValue());
Chat Application
Hi Everybody!
"use strict";
process.title = 'Broadcast NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Broadcast NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Broadcast NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Broadcast NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'Broadcast NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); var index = clients.push(connection) - 1;
console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); var index = clients.push(connection) - 1;
console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); var index = clients.push(connection) - 1;
console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); var index = clients.push(connection) - 1;
console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; for(var i in clients){ clients[i].sendUTF(msgString); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }); connection.on('close', function(connection) { clients.splice(index, 1); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; for(var i in clients){ clients[i].sendUTF(msgString); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }); connection.on('close', function(connection) { clients.splice(index, 1); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; for(var i in clients){ clients[i].sendUTF(msgString); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }); connection.on('close', function(connection) { clients.splice(index, 1); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; for(var i in clients){ clients[i].sendUTF(msgString); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }); connection.on('close', function(connection) { clients.splice(index, 1); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = message.utf8Data; for(var i in clients){ clients[i].sendUTF(msgString); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }); connection.on('close', function(connection) { clients.splice(index, 1); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
Hi Everybody
Hi Everybody
Hi Everybody
Hi Everybody
Hi Everybody
Hi Everybody
Hello there!Hello there!
Send to
Message
Who is Connected?
Task
Payload
Chat MessageReport Connected Users
Complete MessageAll Connected Users
{task : 'the activity' ,payload : could be anything }
{task : 'chat_message' ,payload : {to_key : 'ACB123DSFJH123' ,msg : 'Hello There'} }
{task : 'connected_users' ,payload : [{'key' : 'ACB123DSFJH123' ,'username' : 'Arthur Dent'} ,{'key' : '4321CBAFGH4513' ,'username' : 'Ford Prefect'} ,{'key' : '56AFGHK90UH871' ,'username' : 'Marvin the Paranoid Android' } ] }}
key = apex.item('P4_CHATMATES').getValue(); message = apex.item('P4_TEXTMESSAGE').getValue(); jsonMsg = JSON.stringify( {task : 'chat_message' ,payload : {to_key : key ,msg : message} }); ws_connection.send (jsonMsg);
Send
key = apex.item('P4_CHATMATES').getValue(); message = apex.item('P4_TEXTMESSAGE').getValue(); jsonMsg = JSON.stringify( {task : 'chat_message' ,payload : {to_key : key ,msg : message} }); ws_connection.send (jsonMsg);
Send
key = apex.item('P4_CHATMATES').getValue(); message = apex.item('P4_TEXTMESSAGE').getValue(); jsonMsg = JSON.stringify( {task : 'chat_message' ,payload : {to_key : key ,msg : message} }); ws_connection.send (jsonMsg);
Send
key = apex.item('P4_CHATMATES').getValue(); message = apex.item('P4_TEXTMESSAGE').getValue(); jsonMsg = JSON.stringify( {task : 'chat_message' ,payload : {to_key : key ,msg : message} }); ws_connection.send (jsonMsg);
Send
key = apex.item('P4_CHATMATES').getValue(); message = apex.item('P4_TEXTMESSAGE').getValue(); jsonMsg = JSON.stringify( {task : 'chat_message' ,payload : {to_key : key ,msg : message} }); ws_connection.send (jsonMsg);
Send
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'user_broadcast') { var jsonResult = jsonMsg.payload;
$('#P4_CHATMATES').find('option').remove().end(); $.each(jsonResult, function() { $('#P4_CHATMATES').append( $("<option></option>") .text(this.username) .val(this.key) ); }); } else if (jsonMsg.task == 'chat_message') { apex.item('P4_CHATBOX').setValue(jsonMsg.payload.msg); } };
Receive
"use strict";
process.title = 'One on One NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
"use strict";
process.title = 'One on One NodeJS Chat server';
var http = require('http'); var webSocketServer = require('websocket').server;
/* * HTTP server */ var server = http.createServer(function(req, resp){}); server.listen(4880, function() { console.log((new Date()) + " HTTP server is listening on port 4880"); });
/* * WebSocket server */ var wsServer = new webSocketServer({ httpServer: server });
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); connection.key = request.key; connection.username = request.resource.substring(1);
var index = clients.push(connection) - 1; console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
userBroadcast();
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); connection.key = request.key; connection.username = request.resource.substring(1);
var index = clients.push(connection) - 1; console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
userBroadcast();
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); connection.key = request.key; connection.username = request.resource.substring(1);
var index = clients.push(connection) - 1; console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
userBroadcast();
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); connection.key = request.key; connection.username = request.resource.substring(1);
var index = clients.push(connection) - 1; console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
userBroadcast();
var clients = [ ]; wsServer.on('request', function(request) { console.log((new Date()) + ' Websocketconnection from origin ' + request.origin + '.'); var connection = request.accept('echo-protocol', request.origin); connection.key = request.key; connection.username = request.resource.substring(1);
var index = clients.push(connection) - 1; console.log((new Date()) + ' Connection accepted from ' + request.origin + '.');
userBroadcast(); More on this function
in a little bit
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
/* Events on websocket connection */ connection.on('message', function(message) { var msgString = JSON.parse(message.utf8Data); if (msgString.task == 'chat_message') { for(var i in clients){ if (clients[i].key == msgString.payload.to_key) { msgStringOut = JSON.stringify( {task :'chat_message' ,payload:{from_key:connection.key ,msg :msgString.payload.msg} });
clients[i].sendUTF(msgStringOut); console.log((new Date()) + ' message sent to: ' + connection.remoteAddress + '.'); }; }; }; });
connection.on('close', function(connection) { clients.splice(index, 1); userBroadcast(); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
connection.on('close', function(connection) { clients.splice(index, 1); userBroadcast(); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
connection.on('close', function(connection) { clients.splice(index, 1); userBroadcast(); console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.'); }); });
var userBroadcast = function() { var usernames = [] for(var i in clients){ usernames.push( {username: clients[i].username ,key : clients[i].key}); }; for(var i in clients){ clients[i].sendUTF( JSON.stringify( {task :'user_broadcast' ,payload:usernames})); }; };
Here’s the userBroadcast
function
var userBroadcast = function() { var usernames = [] for(var i in clients){ usernames.push( {username: clients[i].username ,key : clients[i].key}); }; for(var i in clients){ clients[i].sendUTF( JSON.stringify( {task :'user_broadcast' ,payload:usernames})); }; };
var userBroadcast = function() { var usernames = [] for(var i in clients){ usernames.push( {username: clients[i].username ,key : clients[i].key}); }; for(var i in clients){ clients[i].sendUTF( JSON.stringify( {task :'user_broadcast' ,payload:usernames})); }; };
Hello Alex! Hello Alex!
Hi Alan!Hi Alan!
mobile phone push alerttodo list
alerts from background processfile ready on server
database alert fileorder which needs to be approved
tasklistsappointment
Communicate with Things
“Oh my Gosh! I love this song”
move
Lego Mindstorms
Brick
Motors
Motors
Light Sensor
Touch Sensor
Task
Payload
Pick Order
Order Contents
jsonMsg = JSON.stringify( {task : 'pick_orders' ,payload : {'Red' : '1' ,'Green' : '1' } } ); ws_connection.send (jsonMsg);
Send
jsonMsg = JSON.stringify( {task : 'pick_orders' ,payload : {'Red' : '1' ,'Green' : '1' } } ); ws_connection.send (jsonMsg);
Send
jsonMsg = JSON.stringify( {task : 'pick_orders' ,payload : {'Red' : '1' ,'Green' : '1' } } ); ws_connection.send (jsonMsg);
Send
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'pick_orders_started') { console.log ('Picking Process Started'); } else if (jsonMsg.task == 'orders_picked') { console.log ('Order Completed'); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'pick_orders_started') { console.log ('Picking Process Started'); } else if (jsonMsg.task == 'orders_picked') { console.log ('Order Completed'); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'pick_orders_started') { console.log ('Picking Process Started'); } else if (jsonMsg.task == 'orders_picked') { console.log ('Order Completed'); } };
Receive
ws_connection.onmessage = function(message) { var jsonMsg = JSON.parse(message.data); if (jsonMsg.task == 'pick_orders_started') { console.log ('Picking Process Started'); } else if (jsonMsg.task == 'orders_picked') { console.log ('Order Completed'); } };
Receive
Track
Lightsensor Pushrod
Collection Box
Track
Lightsensor
Pushrod
Brick
Emergency BrakeCollection Box
Order:1 x Red 1 x Green
Questions and Answers
