192 Lotus blogs updated hourly. Who will post next? Home | Blogs | Search | About 
 
Latest 7 Posts
How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
Thu, Feb 23rd 2017 225
NWCJS meetup – Angular 2 for beginners
Fri, Feb 10th 2017 5
What do Apple Airpods and Spongebob Squarepants have in common?
Mon, Feb 6th 2017 3
Five years of blogging and personal growth
Tue, Jan 24th 2017 6
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 10
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 7
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 7
Top 10
How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
Thu, Feb 23rd 2017 225
Adding your Let’s Encrypt SSL certificate into your Domino keyring file
Thu, Feb 18th 2016 10
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 10
PATCHing a Document using Domino Data Service
Mon, Mar 24th 2014 8
Adding custom HTTP headers to Domino R9 using IBM HTTP Server (IHS)
Sun, Apr 20th 2014 7
WebSockets comes to XPages!! Awesome – Awesome – Awesome
Tue, May 20th 2014 7
Accessing the original element when using Select2-focus
Sun, Aug 17th 2014 7
Running an XPages/Angular.js application on a Bluemix site
Wed, Sep 17th 2014 7
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 7
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 7


Creating an XPages Websockets chat client using Bluemix
Twitter Google+ Facebook LinkedIn Addthis Email Gmail Flipboard Reddit Tumblr WhatsApp StumbleUpon Yammer Evernote Delicious
MarkyRoden    

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.

Introduction

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.

With this article though, I want to start my exploration of using an external Websockets server to transmit messages to my XPages applications. One of the *nice* things about Websockets is that unlike JavaScript AJAX they are *not* restricted by CORS. This means that I can host my Websockets server anywhere. In this case it is a win win for me as I get to learn more about Bluemix, node.js, websockets and other NoSQL databases like Redis in this case.

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.

ws1

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.

w2s2

 

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

Because this is XPages and because we have dojo and I am sure I have pointed out before – we have to move the files to the HTML HEAD in such a manner as they come before Dojo within the application. Socket.io is apparently one such JavaScript library.

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"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">

	<link rel="stylesheet" href="//cdn.jsdelivr.net/normalize/3.0.1/normalize.min.css"/>
	<link rel="stylesheet" href="stylesheets/style.css"/>

	<xp:this.resources>
		<xp:headTag tagName="script">
			<xp:this.attributes>
				<xp:parameter name="type" value="text/javascript" />
				<xp:parameter name="src" value="//cdn.jsdelivr.net/jquery/2.1.1/jquery.min.js" />
			</xp:this.attributes>
		</xp:headTag>
		<xp:headTag tagName="script">
			<xp:this.attributes>
				<xp:parameter name="type" value="text/javascript" />
				<xp:parameter name="src" value="socket.io/socket.io.js" />
			</xp:this.attributes>
		</xp:headTag>
		<xp:headTag tagName="script">
			<xp:this.attributes>
				<xp:parameter name="type" value="text/javascript" />
				<xp:parameter name="src" value="javascripts/client.js" />
			</xp:this.attributes>
		</xp:headTag>
	</xp:this.resources>

	<h1>XPages Websocket Chat using Bluemix</h1>

	<input id="msg" autocomplete="off" autofocus="autofocus"/>
	<button type="submit">Send</button>

	<ul id="messages">
	</ul>

</xp:view>

 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

$(document).ready(function() {
  var socket = io(), nickname, msgList = $('#messages');
  ...

to the following

$(document).ready(function() {
  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.

ws3

You can see from the Firebug console that the copper.xomino.com application is talking to the xominosocket.bluemix.net application

Mobile Compatible

Yes you have to be connected to the website (rather than OS Push notification) but websockets works on iOS7+ and Android 4.4+

(http://caniuse.com/#feat=websockets)

Screenshot_2014-11-08-11-47-45

Conclusion

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.




---------------------
http://xomino.com/2014/11/09/creating-an-xpages-websockets-chat-client-using-bluemix/
Nov 09, 2014
7 hits



Recent Blog Posts
225
How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
Thu, Feb 23rd 2017 2:30a   Mark Roden
In this article I will demonstrate how to create a nodejs bot hosted in Azure. The bot will be created from a sample provided from Microsoft. The example bot will use Azure Functions as the trigger for it’s communication. You will need a Microsoft Azure account to be able to follow this process for yourself. This is … Continue reading How to create a sample nodejs bot which utilizes Azure Functions in 15 minutes
5
NWCJS meetup – Angular 2 for beginners
Fri, Feb 10th 2017 1:24a   Mark Roden
A
3
What do Apple Airpods and Spongebob Squarepants have in common?
Mon, Feb 6th 2017 4:30a   Mark Roden
So in an uncommonly, just for the hell of it, post I wanted to share something techie but just for the sake of amusement. When my family was looking at the new AirPods online we noticed something rather amusing……for those of you who don’t watch Spongebob Squarepants you won’t get this, but we are talking … Continue reading What do Apple Airpods and Spongebob Squarepants have in common?
6
Five years of blogging and personal growth
Tue, Jan 24th 2017 1:20p   Mark Roden
A
10
Azure Machine Learning Studio Office Add-In
Wed, Jan 18th 2017 12:45a   Mark Roden
I am currently in the process of learning more about Azure Machine Learning Studio . Within there you can create and train predictive models. As I am going through some of the examples I came across a great example of an Office Add-In. I am creating a simple weather predicting example based on data I downloaded from … Continue reading Azure Machine Learning Studio Office Add-In
7
Predictive Analysis and Machine Learning
Tue, Jan 10th 2017 1:42a   Mark Roden
A
7
19 Jan – Speaking at Northwest Chicago JavaScript meetup – Office.js
Wed, Jan 4th 2017 2:20p   Mark Roden
A
5
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
6
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
3
Using “F12” in Windows to get an Office Add-In development developer console
Mon, Nov 14th 2016 1:00a   Mark Roden
A




Created and Maintained by Yancy Lent - About - Planet Lotus Blog - Advertising - Mobile Edition