One of the most exciting and potentially game-changing technologies that was introduced with HTML5 is WebSockets. WebSockets allow a browser to instantiate a bi-directional, event-driven socket connection to the back-end, allowing it to break free of the many limitations of the HTTP protocol. What it makes possible is often referred to as the ‘real-time web’: a much more dynamic and powerful way for a browser and back-end database to intercommunicate.
I’ve been working with WebSockets for quite some time, and I’ve concluded that it’s going to change the way we think about and design browser-based applications. I therefore wanted to enhance my EWD framework and ewdGateway2 module to create a real-framework that is easy and intuitive to use, and which interoperates easily but powerfully with a Mumps database.
However, I’m a strong believer that seeing is believing: it’s all very well reading about exciting new stuff, but much more interesting and thought-provoking if you can get your hands on it for yourself and see pre-written examples working before your own eyes. So with that in mind, I’ve also developed and released an EWD application that is designed to manage and monitor the Node.js-based ewdGateway2 module. This application, also named ewdGateway2, is not only very useful in its own right, but has also been designed as a showcase application, demonstrating and making extensive use of all the latest real-time web features of EWD. For example:
- the application is entirely WebSocket based, operating in real-time. Not only does the Node.js-based ewdGateway2 module update the browser-based application in real-time, but events within the Mumps database (eg EWD Session starting and stopping) are also communicated to the browser as they happen. There’s no polling from the browser-side – updated information is pushed to the browser as it happens. Similarly, the browser communicates with Node.js and the back-end Mumps database via WebSocket events.
The result is an application that effectively demonstrates how a browser can now be used as a process control and monitoring user interface.
The good news is that you can download it in source format and try it out for yourself. My next two articles will explain how to install it and get it running with Caché and GT.M respectively, the latter on a dEWDrop installation.
So let me conclude this introductory article with a few screenshots to whet your appetite, and a brief description of the main behaviour. When you log in, the main view looks like this:
The first thing to notice is that this is an ExtJS-based application, making use of EWD’s powerful and easy-to-use built-in ExtJS custom tags.
You’ll see at the top left, a panel that confirms the versions and build numbers of the modules and technologies that are running behind the scenes – this information is pushed from both the Node.js layer and the back-end database as soon as the browser signals that the UI is ready.
Also at the top is a live display of the child processes, showing the number of incoming requests that they’ve each handled. That count is updated in real-time by the Node.js-based ewdGateway2 module.
Below this in the main panel is the console display, pushed in real-time by the ewdGateway2 module to the browser. Note that the ewdGateway2 module can be configured to run silently as a service, but can nevertheless report its progress and diagnostic messages to this application’s console. The logging level and destination can also be adjusted – if preferred, the logging information can be piped instead to a text file.
Clicking the Memory Use tab brings up a chart that is updated by the ewdGateway2 module at regular intervals that you can modify. This chart allows you to check for memory leaks or unusual behaviour. You can get detailed information by running the mouse over any of the lines:
Last, but not least, is the EWD Sessions tab which brings up a grid showing the currently-running EWD Sessions. This is updated in real-time by EWD (ie from within Caché or GT.M) as soon as a new session is started by a user or a timed-out one is deleted by EWD’s session garbage-collector.
You can drill down into each session and view the current EWD Session contents, displayed as an expandable tree menu to the right of the grid.
EWD, in combination with Node.js, the ewdGateway2 module and the Mumps database technology is now all you need to create highly-responsive, leading-edge, real-time browser-based applications. The future of application development, now in your hands!