![Simple websocket message format
Message in JSON format
Sender format needs to be in a canonical format: @UserName()
Recipient:
– broadcast (everybody receives it)
– to: single user (canonical user name)
– targets: [‘user1’, ‘user2’, …]
– URI based: /mwlug2016.nsf/home.xsp*
– Role based targeting
Date: omitted || Unix epoch || yyyy-MM-dd hh:mm](https://image.slidesharecdn.com/yqejlae4rhkybit2x9n2-signature-c0467bdd07a6ba7fc53462daa2b8633d4611e201a7109d79a0be996ca148a5e5-poli-160821190918/85/Websocket-technology-for-XPages-16-320.jpg)
Websocket technology for XPages
- 1. AD102 - Bring WebSocket Technology to Your Next XPage Application Csaba Kiss 08/19/2016 LA-UR-16-20047
- 2. Credentials Over 25 years experience in molecular biology Began XPage application development in 2014 JavaScript enthusiast Twitter: @csakis Blog: XpageXplorer.org
- 4. Agenda HTTP protocol drawbacks Websocket – Why does it exist? (Background) – How do you use it? (API) – How do you get it work? (Installation) – WebSocket code examples – Server side listeners using SSJS – Pros and cons DEMO DEMO DEMO
- 5. HTTP protocol The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP functions as a request-response protocol in the client-server computing model.* *: wikipedia Client Server Request Request Response Response Response
- 6. Too much overhead 871 bytes header data (without any session/cookie data) Clients Req/min* MB/min 100 600 5 500 30,000 26 1,000 60,000 52 10,000 600,000 522 *: 1 request every second
- 7. Other HTTP limitations Every request needs a new connection (latency) Half duplex connection (walkie talkie)
- 8. Work arounds Long-polling (comet) Complicated implementation, Not standardized. Client Server Request Request Response Response
- 9. The creation of WebSocket WebSocket is a protocol providing full-duplex communication channels over a single TCP connection. Both the WebSocket API itself (W3C) and the WebSocket protocol are HTML5 standards. The WebSocket protocol is supported in the latest versions of browsers Client Server Message Message Message Message Message Message
- 12. Websocket constructor Establishing a new websocket connection 1 2 3 4 1. ws is the new websocket object 2. ws:// denotes websocket protocol 3. WebSocket port 4. optional protocols
- 13. The hand shake The client sends a WebSocket handshake request: The server responds: Connection is “upgraded”
- 14. WebSocket is purely event driven 4 events
- 15. WebSocket methods 2 methods The websocket message format is important with the OpenNTF websocket plugin. Optional close codes: 1000 – CLOSE_NORMAL 1006 – CLOSE_ABNORMAL 1012 – SERVICE_RESTART …
- 16. Simple websocket message format Message in JSON format Sender format needs to be in a canonical format: @UserName() Recipient: – broadcast (everybody receives it) – to: single user (canonical user name) – targets: [‘user1’, ‘user2’, …] – URI based: /mwlug2016.nsf/home.xsp* – Role based targeting Date: omitted || Unix epoch || yyyy-MM-dd hh:mm
- 17. Complex WebSocket message Embedded data object Binary data transfer Sending other attributes – Application – Message type … WebSocket server is not application specific!!
- 18. WebSocket attributes readyState CONNECTING OPEN CLOSING CLOSED bufferedAmount returns the number of bytes that have been queued but not yet sent. Useful to prevent network saturation
- 19. WebSocket server side listener • Very convenient to communicate with the underlying Domino Db • Adds an extra WebSocket user that sits and listens on the server side • Gives you an alternative way of submitting data or querying the database • Server side listener uses Rhino JavaScript Engine – No access to scope variables or @functions – Cannot define variables with : notation • i.e. var doc:NotesDocument = currentDocument.getDocument(); • Initialization:
- 20. ServerSide tips websocket message = socketMessage sender = socketMessage.getFrom(); websocket text message = socketMessage.getText(); Getting Data attribute example: var application = socketMessage.getData().get("application");
- 21. WebSocket debugging in Chrome Use Chrome!!
- 22. New!! WebSocket debugging in Firefox 48 WebSocket monitor extension
- 23. Potential applications If you build multi-user applications in which users interact with each other and the underlying database; and data is updated regularly in the webapp, you should use WebSocket technology. Watson IoT HQ in Munich
- 24. Potential problems and pitfalls Proxies and firewalls: – Long-lived connections might not be allowed – Designed for HTTP traffic – Might filter out other traffic (use Secure connection wss://…) Scaling presents a different challenge: – Many free ports are needed on your server
- 25. OpenNTF xockets.io extension* https://www.openntf.org/main.nsf/project.xsp?r=project/xockets.io/ GitHub: https://github.com/mwambler/xockets.io Domino Implementation of Java-WebSocket server http://java-websocket.org Support Mark Ambler Tek Counsel LLC Twitter: @mwambler Blog: http://markwambler.blogspot.com Email:[email protected] *: IBM Domino server does not support WebSocket protocol
- 26. Xockets.io installation on Domino server Detailed instructions: http://xpagexplorer.org/websocket-install/ 3-part blog post series
- 27. Test Domino websocket extension Use included chat.nsf application to test if WebSocket connection can be established
- 28. DEMO
- 29. Lucky widget code example • On page load, we need to get the latest styles from the DB • On button click, we need to generate the styles and send the websocket message • Client side: On Message received: apply the style to the page element • Server Side: On Message received: update the DB with the latest style
- 30. Client side initialization XPage application.js Tip: Use the chat.nsf example database that comes with the xocket.io plugin.
- 31. luckyWidget/sending msg Xpage code Button event listener Create message header Create shape message
- 32. luckyWidget/receiving msg Client side websocket handling
- 34. luckyWidget/SSJS beforePageLoad event luckyDiv calculated style
- 35. Websocket conclusion Allows you combine http protocol with websocket data traffic. Lets developers write event-driven real-time applications. Helps you writing single page Xpage applications with no partial refreshes. User experience is more fluid and satisfying. The OpenNTF xocket.io library allows developers to write native XPage applications with seamless server side Domino database integration.
- 36. Contact Twitter: @csakis Blog: http://XpageXplorer.org Thank you for your attention!