Websockets: Pushing the web forward
-
Upload
mark-roden -
Category
Software
-
view
3.650 -
download
0
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