Presentation given at MWLUG 2015

1. AD117
WebSockets - "Pushing" the web forward
Mark Roden
PSC Group LLC
Principal Architect

2. About Marky
Over 18 years IBM Notes Domino® work
Principal Architect at PSC Group
• XPages Developer
• Project Leader
• Architect
Contact Information
– Blog: http://www.xomino.com
– Email: marky@xomino.com
– Twitter: @markyroden
– Skype: marky.roden
– "Come work for us - it will be fun"
www.psclistens.com @pscgroup

4. WebSockets
• What are WebSockets ?
• What does that even mean ?
• Why do I care ?
• Can I use WebSockets ?
• When can I use WebSockets
– Use Cases
– Web Servers
• Socket.io
• Demonstrations

5. 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 bandwidth
– HTML5Rocks.com

6. WebSockets
What does that even mean?

7. WebSockets
• What does that even mean?
– Evolution in browser to server communication
– Maximize efficiency in network
– Minimize latency

8. WebSockets
• What does that even mean?
– HTTP Overhead – 803 Bytes

9. WebSockets
• What does that even mean?
– WebSockets = no HTTP Headers – 86 Bytes

10. WebSockets
• What does that even mean?
– Before WebSockets - polling
• Has anything changed?
– No
• Has anything changed?
– Seriously dude, stop asking you are wasting bandwidth
• Has anything changed?
– Man, you people are impatient
• Has anything changed?
– No
• Has anything changed?
– Sure, let’s go with yes. Hang on while I get that for you.....

11. WebSockets
• What does that even mean?
– Before WebSockets
• Click button to perform server side task.....
– Waiting
– Waiting
– Waiting
– Go get a coffee
– Server timed out
– Repeat....

12. WebSockets
• What does that even mean?
– Using WebSockets – Real-Time Update
• Hey Server can you do this job for me and let me know when it is
done?
– Sure
• OK, time to be productive
• ..........some time later
– Hey Marky here is your answer........

13. WebSockets
• What does that even mean?
– Be nice to your users
– They don’t *want* to call the help desk......

14. WebSockets
Why should I care about WebSockets ?

15. WebSockets
• Why should I care about WebSockets ?
– W3C Defined JavaScript API
– Originally proposed as part of HTML5
– IETF-defined Protocol: RFC 6455
– Cross-Domain
– Secure

16. WebSockets
• Websockets vs REST
– http://blog.arungupta.me/rest-vs-websocket-comparison-
benchmarks/
• Arun Gupta – Java Champion

17. WebSockets
When can I use WebSockets ?

18. WebSockets
• When can I use WebSockets ?
– Standard in modern browsers (Aug 2015)
• http://caniuse.com/#feat=websockets
Windows Internet Explorer 9 - March 14, 2011

19. WebSockets
WebSockets Use Cases?

20. WebSockets
• WebSockets Use cases
– Instant notification of events
• Web Chat
• New items requiring action
• General notification
• Rapidly changing data
– Optimization
• Lower bandwith
• Lower memory usage
• Control of when a user receives the information
• Notification regardless of where the user is (within the domain)

21. WebSockets
• Websockets Use cases
– Better user experience
– Chat rooms
– Data refresh without polling
– Workflow event notification
– Social Feeds
– Location based applications
– Sports updates

22. WebSockets
So why aren’t we all using WebSockets already?

23. WebSockets
• So why aren’t we all using WebSockets ?
– Internet Explorer 9
– Search Engine Optimization
– HTTP has many good points
• Caching, routing, multiplexing, gzipping and lot more.
– Firewalls understand HTTP

24. WebSockets
WebSockets Servers

25. WebSockets
• WebSockets Servers
– Jave EE 7 servers
• WebSphere
• jBoss
• Jetty
• jWebSocket
– Tomcat

26. WebSockets
• WebSockets Servers
– Domino – via jWebSockets OSGI plugin
• http://www.openntf.org/main.nsf/project.xsp?r=project/w
ebshell-xpages-ext-lib
• http://xomino.com/2014/05/15/websockets-comes-to-
xpages-awesome-awesome-awesome/

27. WebSockets
• WebSockets Servers
– Node.js
• http://Socket.io
• JavaScript on the server
• JavaScript on the client

28. WebSockets
Socket.io
http://socket.io

29. WebSockets
• Socket.io setup
– Server side
• Install Node.js server
• npm install --save express
• npm install --save socket.io
– Client side
• <script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>

30. WebSockets
• Socket.io
– Send message to everyone connected
– Send messages to namespaced web pages
– Send group messages to users in a “room”
– Send targeted individual messages
– Users can be on any domain, but must be connected to the same
WebSockets server

31. WebSockets
• Socket.io
– Send 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

32. WebSockets
• Socket.io
– Do 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 saysnn'+data)
};
// When a refresh message is received from the server, action it
socket.on('hi', function(data) {
hiEvent (data);
});
});

33. WebSockets
• Socket.io
– Send 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!');

34. WebSockets
• Socket.io
– Send messages to users in rooms
io.on('connection', function(socket){
socket.join('some room');
});
io.to('some room').emit('some event'):

35. WebSockets
• Socket.io
– Send targeted individual messages
• Unique id assigned when user connects to the WebSocket server
• Messages sent to user by id
socket.to(socket_id_here).emit('new', 'hello');

36. WebSockets
• Socket.io
– Server side chat code

37. WebSockets
• Socket.io
– Client side chat code

38. WebSockets
Demonstration Time

39. WebSockets
• Demonstration 1
– Hot Potato
– https://github.com/shauntrennery/HotPotato

40. WebSockets
• Demonstration 1
– http://hp.mybluemix.net

41. WebSockets
• Demonstration 2
– XPages application notification using WebSockets
– Simple yet effective update of fakenames.nsf* data
– *http://www.xpagescheatsheet.com

42. WebSockets
• Demonstration 3
– Chat room demo
– http://xominosocket.mybluemix.net/

43. WebSockets
Conclusions

44. WebSockets
• Websockets
– HTML5, Web standard
– Highly optimized, efficient
– PUSH to user(s)
– Cross-Domain
– Modern Web Browser compatible
– Very cool :)

45. WebSockets
Questions ?
For more information on WebSockets, XPages and
Application Modernization
mroden@psclistens.com
twitter: @markyroden
skype: marky.roden