{"id":18246953,"url":"https://github.com/davidwalter0/protocol-watch","last_synced_at":"2026-04-11T08:03:44.707Z","repository":{"id":85193845,"uuid":"83687506","full_name":"davidwalter0/protocol-watch","owner":"davidwalter0","description":"example ui protocol buffer mqtt","archived":false,"fork":false,"pushed_at":"2017-03-21T02:30:08.000Z","size":244,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-23T06:43:25.682Z","etag":null,"topics":["angular","mqtt","protobuf"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davidwalter0.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":"2017-03-02T14:34:37.000Z","updated_at":"2017-03-02T17:12:12.000Z","dependencies_parsed_at":"2023-05-02T14:16:27.743Z","dependency_job_id":null,"html_url":"https://github.com/davidwalter0/protocol-watch","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalter0%2Fprotocol-watch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalter0%2Fprotocol-watch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalter0%2Fprotocol-watch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davidwalter0%2Fprotocol-watch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davidwalter0","download_url":"https://codeload.github.com/davidwalter0/protocol-watch/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247912939,"owners_count":21017066,"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":["angular","mqtt","protobuf"],"created_at":"2024-11-05T09:28:11.080Z","updated_at":"2026-04-11T08:03:44.649Z","avatar_url":"https://github.com/davidwalter0.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Originally forked from\n[mqtt angular2 example](https://github.com/sclausen/angular2-protobuf-mqtt-example)\n\nModified with multiple observers for de-coupling components for\nseparation of privileges and monitoring of topic, displaying the\nlatest queue message.\n\nCommunication uses websocket and protobuf.\n\nOriginal project info:\n\n---\n## Screen captures of example \n\n#### angular2 / mqtt / protocol buffer monitor application\n\n![UI|Material Card](images/material-design-lite-screenshot.png \"branch: material-design-lite\")\n\n![UI|Bootstrap Cards](images/screenshot.png \"branch: cards-with-services\" )\n\n![UI|Bootstrap 3 Panel](images/panel-screenshot.png \"branch: bootstrap-panels\" )\n\nSome functionality added for configuring and testing / monitoring\nadded.\n\n- mqtt host/port input\n- topic input\n- value submission\n- monitors for the current topic\n  - metadata \n  - message \n\n---\n## Branches per UI test \n\nDifferent branches have different package.json requirements, for the UI frameworks.\n\nbootstrap \n\n    \"bootstrap\": \"^3.3.7\",\n\nbootstrap-4-alpha-cards\n\n    \"bootstrap\": \"^4.0.0-alpha.6\",\n\nmaterial-design-lite branch:\n\n    \"@angular-mdl/core\": \"^3.0.0-beta.1\",\n    \"material-design-lite\": \"^1.3.0\",\n    \"angular2-mdl\": \"^2.13.2\",\n    \"material-design-lite\": \"^1.3.0\",\n\nmdl-bootstrap-cards\n\n    \"mdbootstrap\": \"^4.3.0\",\n\n---\n\n# Using protobuf with mqtt in angular2\nThis project is a demonstration of using protobuf with angular2 and mqtt.\n\nThe article for this example is located [here](http://blog.sebastian-clausen.de/2017-02-20-reduce-message-payload-in-an-iot-setup/)\n\n## Prequisites\nYou need a running mqtt server with websocket support under port 9001.\nI can recommend [mosquitto](https://mosquitto.org/).\nMy mosquitto.conf with websockets enabled looks as follows\n```\npid_file /var/run/mosquitto.pid\n\npersistence true\npersistence_location /var/lib/mosquitto/\n\nlog_dest file /var/log/mosquitto/mosquitto.log\n\nlistener 1883\n\nlistener 9001 127.0.0.1\nprotocol websockets\n\ninclude_dir /etc/mosquitto/conf.d\n```\nYou also need angular-cli.\n```\nnpm install -g @angular/cli\n```\n## Install dependencies\n``` sh\nnpm install\n./node_modules/protobufjs/bin/pbjs -t static-module -w commonjs -o ./src/protobuf/value.protobuf.js ./value.proto\n./node_modules/protobufjs/bin/pbts -o ./src/protobuf/value.protobuf.d.ts ./src/protobuf/value.protobuf.js\n```\n\n## Run the app\nRun `ng serve` for a server then navigate to `http://localhost:4200/` to see the example in action.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwalter0%2Fprotocol-watch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavidwalter0%2Fprotocol-watch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavidwalter0%2Fprotocol-watch/lists"}