Websockets: Pushing the web forward

download Websockets: Pushing the web forward

If you can't read please download the document

Transcript of Websockets: Pushing the web forward

Slide 1

AD117WebSockets - "Pushing" the web forwardMark RodenPSC Group LLCPrincipal Architect

About Marky Over 18 years IBM Notes Domino work Principal Architect at PSC GroupXPages Developer Project LeaderArchitect Contact Information Blog: http://www.xomino.com Email: [email protected] Twitter: @markyroden Skype: marky.roden

"Come work for us - it will be fun"

www.psclistens.com @pscgroup

WebSockets

What are WebSockets ?What does that even mean ?Why do I care ?Can I use WebSockets ?When can I use WebSocketsUse CasesWeb ServersSocket.ioDemonstrations

WebSockets

What are WebSockets?

Bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing bandwidthHTML5Rocks.com

WebSockets

What does that even mean?

WebSockets

What does that even mean?

Evolution in browser to server communication

Maximize efficiency in network

Minimize latency

WebSockets

What does that even mean?HTTP Overhead 803 Bytes

WebSockets

What does that even mean?WebSockets = no HTTP Headers 86 Bytes

WebSockets

What does that even mean?Before WebSockets - pollingHas anything changed?NoHas anything changed?Seriously dude, stop asking you are wasting bandwidthHas anything changed?Man, you people are impatientHas anything changed?NoHas anything changed?Sure, lets go with yes. Hang on while I get that for you.....

WebSockets

What does that even mean?Before WebSocketsClick button to perform server side task.....WaitingWaitingWaitingGo get a coffeeServer timed out

Repeat....

WebSockets

What does that even mean?Using WebSockets Real-Time UpdateHey Server can you do this job for me and let me know when it is done?SureOK, time to be productive

..........some time laterHey Marky here is your answer........

WebSockets

What does that even mean?

Be nice to your users

They dont *want* to call the help desk......

WebSockets

Why should I care about WebSockets ?

WebSockets

Why should I care about WebSockets ?W3C Defined JavaScript APIOriginally proposed as part of HTML5IETF-defined Protocol: RFC 6455

Cross-DomainSecure

WebSockets

Websockets vs RESThttp://blog.arungupta.me/rest-vs-websocket-comparison-benchmarks/Arun Gupta Java Champion

WebSockets

When can I use WebSockets ?

WebSockets

When can I use WebSockets ?Standard in modern browsers (Aug 2015)http://caniuse.com/#feat=websockets

Windows Internet Explorer 9 - March 14, 2011

WebSockets

WebSockets Use Cases?

WebSockets

WebSockets Use cases Instant notification of eventsWeb ChatNew items requiring actionGeneral notificationRapidly changing data

OptimizationLower bandwithLower memory usageControl of when a user receives the informationNotification regardless of where the user is (within the domain)

WebSockets

Websockets Use cases

Better user experienceChat roomsData refresh without pollingWorkflow event notificationSocial FeedsLocation based applications Sports updates

WebSockets

So why arent we all using WebSockets already?

WebSockets

So why arent we all using WebSockets ?

Internet Explorer 9

Search Engine Optimization

HTTP has many good pointsCaching, routing, multiplexing, gzipping and lot more.

Firewalls understand HTTP

WebSockets

WebSockets Servers

WebSockets

WebSockets ServersJave EE 7 servers WebSpherejBossJettyjWebSocketTomcat

WebSockets

WebSockets ServersDomino via jWebSockets OSGI pluginhttp://www.openntf.org/main.nsf/project.xsp?r=project/webshell-xpages-ext-lib

http://xomino.com/2014/05/15/websockets-comes-to-xpages-awesome-awesome-awesome/

WebSockets

WebSockets ServersNode.jshttp://Socket.io

JavaScript on the server

JavaScript on the client

WebSockets

Socket.io

http://socket.io

WebSockets

Socket.io setupServer sideInstall Node.js servernpm install --save expressnpm install --save socket.io

Client side

WebSockets

Socket.ioSend message to everyone connectedSend messages to namespaced web pagesSend group messages to users in a roomSend targeted individual messages

Users can be on any domain, but must be connected to the same WebSockets server

WebSockets

Socket.ioSend message to everyone (server side code)

// the following two will emit to all the sockets connected to `/`io.sockets.emit('hi', 'everyone');io.emit('hi', 'everyone'); // short form

WebSockets

Socket.ioDo something with the message (client side code)

$(document).ready(function() { var socket = io.connect('http://xominosocket.mybluemix.net')

// Function to add a message to the page var hiEvent= function(data) { alert('Websockets says\n\n'+data) };

// When a refresh message is received from the server, action it socket.on('hi', function(data) { hiEvent (data); });});

WebSockets

Socket.ioSend messages to namespaced pages (page routes)

var nsp = io.of('/my-namespace');nsp.on('connection', function(socket){ console.log('someone connected'):});nsp.emit('hi', 'everyone!');

WebSockets

Socket.ioSend messages to users in rooms

io.on('connection', function(socket){ socket.join('some room');});

io.to('some room').emit('some event'):

WebSockets

Socket.ioSend targeted individual messages

Unique id assigned when user connects to the WebSocket serverMessages sent to user by id

socket.to(socket_id_here).emit('new', 'hello');

WebSockets

Socket.ioServer side chat code

WebSockets

Socket.ioClient side chat code

WebSockets

Demonstration Time

WebSockets

Demonstration 1Hot Potatohttps://github.com/shauntrennery/HotPotato

WebSockets

Demonstration 1http://hp.mybluemix.net

WebSockets

Demonstration 2XPages application notification using WebSockets

Simple yet effective update of fakenames.nsf* data

*http://www.xpagescheatsheet.com

WebSockets

Demonstration 3Chat room demohttp://xominosocket.mybluemix.net/

WebSockets

Conclusions

WebSockets

Websockets

HTML5, Web standardHighly optimized, efficientPUSH to user(s)Cross-DomainModern Web Browser compatible

Very cool :)

WebSockets

Questions ?

For more information on WebSockets, XPages and Application Modernization

[email protected]: @markyrodenskype: marky.roden