Real-time communication from server to client

2
Hello, I have to implement POC sending data from server so the client would refresh upon receiving it in real-time. Basically I must force refresh of displayed object in client page when this object is changed by other client. I tried to do this by implementing simple WebSockets in javascript on the page that would check connection to WebSocketServer in coded Java as Java action that creates Socket when executed, yet I'm unable to make connection between javascript and Java. I found few posts about the topic but no examples, instructions or valid informations about working solutions.
asked
2 answers
12

EDIT 2: Official Pusher widget is in the App Store! Very similar implementation to my version below.

EDIT: I've got a working demo for you.

Widget + Java code in test app here

Demo here

  • Open 2 browsers and go to the app
  • In one of them, click "increment date" on an order
  • See the date increment in the other app
  • Or, navigate to some order details, and on the other browser, click "increment date"
  • See the date increment in the Order Details view

 

I just recently did a POC with WebSockets using Pusher. This service offers an inexpensive pub/sub API to easily communicate via WebSockets. With a few lines of JavaScript, Pusher does all of the client connection management for you. They also offer a REST API and a Java library to send messages from your server to clients, and there's even a Mendix widget on GitHub. For the POC I was involved in, we modified that code a bit (and I've published it above).

In the POC, were able to send a message from the Mendix server to our client's browser, triggering a microflow. That microflow fetched new data from the server and updated the UI. This model could be used for simple notifications or managing events, or even for a chat UI.

Here's a technical breakdown of how this works:

  • Add the Pusher widget on a page
  • Upon creation, the widget opens a connection to Pusher and starts listening for messages on a specific channel
  • Using a simple Java action called from a microflow, we send a message from our Mendix server to Pusher
  • That message is received immediately by the client, and causes the Pusher widget to trigger a microflow
  • The microflow retrieves new/changed data from the server and displays it on the page

 

In terms of data flow, we used Pusher as a notification service to the client (i.e., the message basically told the client "hey there's something new for you on the server"). We did not include any real data in that message. In this way, all sensitive data still flows through the regular Mendix channels, and you can still use microflows to manage everything. Security is much  simpler to manage this way than if sensitive application data were being sent in the Pusher message.

 

Side note: Managing a WebSocket connection from your Mendix server is probably possible for a Mendix deployment not in the Mendix cloud. I've seen one forum post where someone claimed to have a POC working. You'd need publish a WebSockets server in your JVM that listens on a different port than the rest of your app, and then write all of the server-side Java code and widget JS code yourself. This would a large effort, and again it wouldn't work in the Mendix cloud. Managing a WebSockets connection also goes against the principle of a Mendix 7 runtime being stateless, so I suspect you'd have a tough time horizontally scaling with this solution. For all of these reasons, I think it's best if your WebSocket connections are made via a non-Mendix server (whether that's a service like Pusher or a server you host using something like Socket.io)

 

answered
1

Hi Kamil,

I'm not sure if this is the only way, but the only way I know of doing this is to use the microflow timer widget to trigger a microflow every X amount of seconds to refresh the objcect.

 

This widget will run a microflow that takes an object as a parameter and uses the change activity with the refresh in client setting.

https://appstore.home.mendix.com/link/app/27/Mendix/Microflow-Timer

 

Hope this helps!

answered