|Creating an XPages Websockets chat client using Bluemix
In this article I will demonstrate how I was able to take an example Bluemix, node.js based, websocket chat program and re-purpose it to be used in XPages.
Earlier this year I was very excited to find the Websockets in XPages project on OpenNTF published by Mark Ambler. The concept behind that project is to be able to create a notes document in a queue which is processed and then send out to all users. As much as I promised to help out and use the project, life and a business need to learn and use Angular.js got in the way. My abject apologies to Mark for not following through on my promise to help move the project along.
Creating a Websockets chat example in Bluemix
I found this article on Create an HTML5 chat app on Bluemix with Node.js, Redis, and Socket.io and following it through I was able to get my own chat program up and running within an hour or so.
It is not an especially difficult example to follow but I did find that it helped to understand a little about Bluemix and how a node.js application is put together. You should be able to figure it out though just following through the example.
The code for the original example can be found here https://hub.jazz.net/project/joelennon/bluemixchat/overview?welcome= if you want to take a look at it.
Porting the “client” to an XPage
Within the original example, the interface makes a connection to a Redis database to store the last 99 entries of the chat. Within the XPages example I could do that but I am not going to at this time. So the XPages interface will lose chat history when you refresh the page. I am not really concerned about that in the big picture.
Because I had all the files locally I was able to create a new IBM Domino database and drag the files into the WebContent directory. Within node.js the “Public” directory is assigned to the root of the server, but in this case I removed the public folder as it is unnecessary.
The original example uses the jade templating engine to create the web page. But in this case I felt lazy and just viewed the source of the example once it was working and then extracted all the HTML I needed.
Moving socket.io to the HEAD
The HTML of the XPage is relatively simple. As you can see below we a using the xp:resources tag to insert the same HTML references to the local files as they were in the original example.
<?xml version="1.0" encoding="UTF-8"?>
<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.1/normalize.min.css"/>
<link rel="stylesheet" href="stylesheets/style.css"/>
<xp:parameter name="src" value="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js" />
<xp:parameter name="src" value="socket.io/socket.io.js" />
<h1>XPages Websocket Chat using Bluemix</h1>
<input id="msg" autocomplete="off" autofocus="autofocus"/>
The critical difference – the server connection
Within the original example the socket code was on the same server as the client creating the messages. In this case they are not as my XPages server is wholly independent of Bluemix.
So I had to change the initial connection to the websocket server. Within the client.js file I changed the first line from
var socket = io(), nickname, msgList = $('#messages');
to the following
var socket = io.connect('http://xominosocket.mybluemix.net') //connect to the Bluemix server
var nickname, msgList = $('#messages');
With these changes and a couple of stupid spelling mistake corrections I was able to bring my application up within my xSocket XPage.
You can see from the Firebug console that the copper.xomino.com application is talking to the xominosocket.bluemix.net application
Yes you have to be connected to the website (rather than OS Push notification) but websockets works on iOS7+ and Android 4.4+
There is a lot more detail which we can go into as to how this example works but in the mean time if you want to play with it.
Here is an XPage: http://demo.xomino.com/xomino/WSinX.nsf/xSocket.xsp
Here is the Bluemix Page: http://xominosocket.mybluemix.net/
You can find my Bluemix code on Jazz Hub – https://hub.jazz.net/project/mdroden/xominosocket/overview.
Nov 09, 2014
| Recent Blog Posts
Predictive Analysis and Machine Learning|
Tue, Jan 10th 2017 1:42a Mark Roden
Wed, Jan 4th 2017 2:20p Mark Roden
Building Office Add-ins using Office.js – the book, the website|
Thu, Dec 15th 2016 2:30a Mark Roden
I wanted to show some love for the new website and book by Michael Zlatkovsky. Michael is a Software Developer and Program Manager in the Microsoft Office Extensibility team. I met Michael at the MS MVP Summit back in October and we had a great conversation or two about Office Addins and their future development. So Michael’s … Continue reading Building Office Add-ins using Office.js – the book, the website
Sharing data between Office Add-Ins using localStorage|
Mon, Nov 21st 2016 2:42a Mark Roden
In this article I will show how the underlying dependence on the browser (in this case IE11 in Windows) allows us to pass data between Office Add-Ins through the use of HTML5 localStorage. At this point this is a theoretical post as I haven’t thought of a good use case yet, I am sure I … Continue reading Sharing data between Office Add-Ins using localStorage
Using “F12” in Windows to get an Office Add-In development developer console|
Mon, Nov 14th 2016 1:00a Mark Roden
Thank you – Microsoft MVP Summit !!!|
Thu, Nov 10th 2016 6:55a Mark Roden
SharePoint now accessible via the Microsoft Graph beta|
Mon, Oct 3rd 2016 8:00p Mark Roden
Microsoft MVP for Office Development|
Mon, Oct 3rd 2016 8:34a Mark Roden
This weekend I was thrilled to receive an email from Microsoft announcing that I had been recognized as a Microsoft Most Valuable Professional (MVP) in the Office Development technical community. This is a very natural evolution of my journey over the last two years since I branded out from nearly 20 years in IBM Domino. As I … Continue reading Microsoft MVP for Office Development
Speaking at Dreamforce next week :)|
Wed, Sep 28th 2016 8:16a Mark Roden
Thanks Notes in 9 blooper|
Sun, Sep 25th 2016 9:34p Mark Roden
Selfishly for my own amusement, entirely at Dave’s expense #thanksnotesin9