{"id":14972245,"url":"https://github.com/nickjokic/mqtt-realtime-chart-client","last_synced_at":"2025-07-15T19:44:53.373Z","repository":{"id":88702279,"uuid":"126318401","full_name":"NickJokic/mqtt-realtime-chart-client","owner":"NickJokic","description":"Vue.js client application which visualizes high-frequency real-time streams into a chart","archived":false,"fork":false,"pushed_at":"2018-03-22T13:24:22.000Z","size":807,"stargazers_count":59,"open_issues_count":1,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-09-28T15:43:01.122Z","etag":null,"topics":["bootstrap3","data-visualization","real-time","rickshaw","vue-js","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NickJokic.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-03-22T10:27:23.000Z","updated_at":"2024-09-05T01:48:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"956d8d51-d292-46b1-b968-8d16af9dc4a3","html_url":"https://github.com/NickJokic/mqtt-realtime-chart-client","commit_stats":{"total_commits":6,"total_committers":3,"mean_commits":2.0,"dds":0.5,"last_synced_commit":"3cef6bd1a0f69f3671574b1c65128e38b58b384d"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickJokic%2Fmqtt-realtime-chart-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickJokic%2Fmqtt-realtime-chart-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickJokic%2Fmqtt-realtime-chart-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NickJokic%2Fmqtt-realtime-chart-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NickJokic","download_url":"https://codeload.github.com/NickJokic/mqtt-realtime-chart-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219862312,"owners_count":16555956,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap3","data-visualization","real-time","rickshaw","vue-js","webpack"],"created_at":"2024-09-24T13:46:37.278Z","updated_at":"2024-10-11T06:41:01.475Z","avatar_url":"https://github.com/NickJokic.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mqtt-realtime-chart-client\n\nThis project demonstrates the visualization of high-frequency data streams (50Hz+) with Rickshaw.js chart library! \n\n**mqtt-realtime-chart-client** is a Vue.js client application, which works in conjunction with [mqtt-realtime-chart-server](https://github.com/NickJokic/mqtt-realtime-chart-server).\n\n\n![Alt Text](https://raw.githubusercontent.com/NickJokic/mqtt-realtime-chart-client/master/static/mqtt-realtime-chart.gif)\n\n\n## Features\n### Client\n+ real-time data visualization with a multi-series line chart\n+ dynamic slider which controls the chart render frequency (renders chart after N message(s))\n\t+ this is useful for optimization purposes, especially in high-frequency real-time streams, where you \tcan\tlower the chart render calls in order to lessen the CPU load. \n\n### Server\n+ publishes and subscribes to MQTT topic (e.g. **voltage**)\n+ forwards the received messages to the client using websockets\n\n## Getting Started\n\n### Prerequisites\n\nBefore you run the client, be sure you have these downloaded/installed on your machine:\n\n+ node.js\n+ npm\n+ [mqtt-realtime-chart-server](https://github.com/NickJokic/mqtt-realtime-chart-server)\n+ [Moquette (MQTT broker)](https://github.com/andsel/moquette) (or any other MQTT broker that listens on port 1883)\n    + If using Moquette, be sure to have Java JDK installed (tested with JDK 8)   \n\n\n### Installing\n\nTo get started with this project, follow the 3-step installation, described here.\n\n## 1. Moquette \n\nThe following commands will unpack and run the Moquette broker, which listens on port 1883:\n\n```\ntar zxf distribution-0.10-bundle-tar.tar.gz\ncd bin\n./moquette.sh\t\n```\n\n*Windows specific:*\n\n```\ncd bin\n.\\moquette.bat \n```\n\n\n## 2. mqtt-realtime-chart-*server*\n\nNavigate inside the root folder and run:\n\n```\nnpm install\nnpm start\n```\nthis will install the dependencies and start the express server locally on port 3000.\n\nIf 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**.\n\n\n## 3. mqtt-realtime-chart-*client* *\\(this repo)\\*\n\n*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.*\n\nOpen a new terminal window and navigate inside the root folder of the client application, then run:\n\n```\nnpm install\nnpm start\n```\n\nAfter 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. \n\nIf everything went smoothly, you should see a real-time chart with data frequency of around 50Hz.\n\n\n## Built With\n\n### Client\n* [Vue.js](https://github.com/vuejs/vue) - JavaScript framework for building UI on the web.\n* [Rickshaw.js](https://github.com/shutterstock/rickshaw) - JavaScript toolkit for creating interactive real-time graphs\n* [Socket.io-client](https://github.com/socketio/socket.io) - real-time bidirectional event-based communication using websockets (client)\n* [Bootstrap](https://github.com/twbs/bootstrap) - HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.\n\n### Server\n* [Express.js](https://github.com/expressjs/express) - minimalist web framework for node.\n* [Socket.io](https://github.com/socketio/socket.io) - real-time bidirectional event-based communication using websockets\n* [MQTT.js](https://github.com/mqttjs/MQTT.js) - MQTT client for Node.js and the browser \n\n\n## Authors\n\n* **Nick Jokic** - [GitHub](https://github.com/NickJokic)\n\n\n## License\n\nThis project is licensed under the MIT License.\n\n## Acknowledgments\n\n* God bless the creators and contributors of [Moquette](https://github.com/andsel/moquette) for their **1 minute set up**!\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickjokic%2Fmqtt-realtime-chart-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnickjokic%2Fmqtt-realtime-chart-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnickjokic%2Fmqtt-realtime-chart-client/lists"}