Websocket Example

Here is a very simple example of how we can use websockets in a client browser to interact with the JNIOR. This example will demonstrate how to register a few event callbacks, connect, and display the messages that are received from the JNIOR. To force a monitor message to get sent we added an inversion checkbox for Digital Input 1. When the Inversion state changes the input acts as though an electrical signal has forced the state change.

The WebSocket connection now behaves like any other bi-directional TCP Socket. All of the functionality of the JNIOR protocol has been implemented in the WebSocket protocol. The binary implementation has been replaced by JSON. This not only makes it easier to code and debug but it is more extensible.

Below we have a zip file containing a demo page. The page shows the incoming JSON messages in the lower part of the page. The upper part of the page contains a button that will invert input 1 in software thus simulating the input receiving an electrical state change.

Here is our demo listed below:

To run the demo simply place the downloaded .zip file in the flash/www folder on your JNIOR. Then open your browser and navigate to http://[IP_ADDRESS]/wsdemo.

After the connection is open, any change to I/O will send a new Monitor Packet. Clicking the “Invert Input 1” checkbox will cause a change to the I/O and send the Monitor Packet.

Using the zip file is taking advantage of another great feature of the JNIORs web server. A whole web application can be served out of a single zip file. This makes distribution and file management a lot easier.