Skip to content

Vue.js client application which visualizes high-frequency real-time streams into a chart

License

Notifications You must be signed in to change notification settings

NickJokic/mqtt-realtime-chart-client

Repository files navigation

mqtt-realtime-chart-client

This project demonstrates the visualization of high-frequency data streams (50Hz+) with Rickshaw.js chart library!

mqtt-realtime-chart-client is a Vue.js client application, which works in conjunction with mqtt-realtime-chart-server.

Alt Text

Features

Client

  • real-time data visualization with a multi-series line chart
  • dynamic slider which controls the chart render frequency (renders chart after N message(s))
    • this is useful for optimization purposes, especially in high-frequency real-time streams, where you can lower the chart render calls in order to lessen the CPU load.

Server

  • publishes and subscribes to MQTT topic (e.g. voltage)
  • forwards the received messages to the client using websockets

Getting Started

Prerequisites

Before you run the client, be sure you have these downloaded/installed on your machine:

Installing

To get started with this project, follow the 3-step installation, described here.

1. Moquette

The following commands will unpack and run the Moquette broker, which listens on port 1883:

tar zxf distribution-0.10-bundle-tar.tar.gz
cd bin
./moquette.sh	

Windows specific:

cd bin
.\moquette.bat 

2. mqtt-realtime-chart-server

Navigate inside the root folder and run:

npm install
npm start

this will install the dependencies and start the express server locally on port 3000.

If the server-app and Moquette are already running in separate terminals, you can see the data stream inside the terminal. You can also check out the stream with a 3rd party MQTT client (e.g. MQTTfx) by connecting to 0.0.0.0:1883 and subscribing to topic voltage.

3. mqtt-realtime-chart-client *(this repo)*

Before running the client, be sure you have already completed steps 1 and 2, and have both Moquette and mqtt-realtime-chart-server running in separate terminal windows.

Open a new terminal window and navigate inside the root folder of the client application, then run:

npm install
npm start

After compilation, you will see the link in the terminal (e.g. http://localhost:8081) where the application is currently running. Use your browser to navigate to that link.

If everything went smoothly, you should see a real-time chart with data frequency of around 50Hz.

Built With

Client

  • Vue.js - JavaScript framework for building UI on the web.
  • Rickshaw.js - JavaScript toolkit for creating interactive real-time graphs
  • Socket.io-client - real-time bidirectional event-based communication using websockets (client)
  • Bootstrap - HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Server

  • Express.js - minimalist web framework for node.
  • Socket.io - real-time bidirectional event-based communication using websockets
  • MQTT.js - MQTT client for Node.js and the browser

Authors

License

This project is licensed under the MIT License.

Acknowledgments

  • God bless the creators and contributors of Moquette for their 1 minute set up!

About

Vue.js client application which visualizes high-frequency real-time streams into a chart

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published