├── .gitignore ├── README.md ├── package.json ├── public ├── favicon.ico └── index.html └── src ├── App.css ├── App.js ├── App.test.js ├── MessageContainer.js ├── MessageForm.js ├── MessageList.js ├── index.css ├── index.js ├── nearForm-icon.jpg └── nearForm-logo.svg /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # misc 13 | .DS_Store 14 | .env 15 | npm-debug.log* 16 | yarn-debug.log* 17 | yarn-error.log* 18 | 19 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | Subscribe in Terminal 3 | ``` 4 | mqtt sub -t '@near/demo' -h test.mosca.io 5 | ``` 6 | 7 | Publish in Terminal 8 | ``` 9 | mqtt pub -t '@near/demo' -h test.mosca.io -m 'from commandline' 10 | ``` 11 | 12 | ## Bootstrapped 13 | This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app). 14 | 15 | Below you will find some information on how to perform common tasks.
16 | You can find the most recent version of this guide [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md). -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "mqtt-react-demo", 3 | "version": "0.1.0", 4 | "devDependencies": { 5 | "react-scripts": "0.9.5" 6 | }, 7 | "dependencies": { 8 | "mqtt-react": "0.0.2", 9 | "react": "^15.5.4", 10 | "react-dom": "^15.5.4" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KeKs0r/mqtt-react-demo/d05b334e799e3fe569c975220a3b6f563eb5247f/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 16 | React App 17 | 18 | 19 |
20 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | /*animation: App-logo-spin infinite 20s linear;*/ 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-intro { 18 | font-size: large; 19 | } 20 | 21 | @keyframes App-logo-spin { 22 | from { transform: rotate(0deg); } 23 | to { transform: rotate(360deg); } 24 | } 25 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import logo from './nearForm-logo.svg'; 3 | import './App.css'; 4 | import { Connector } from 'mqtt-react'; 5 | 6 | import _MessageContainer from './MessageContainer.js'; 7 | import {subscribe} from 'mqtt-react'; 8 | 9 | const MessageContainer = subscribe({topic: '@near/demo'})(_MessageContainer); 10 | 11 | 12 | class App extends Component { 13 | render() { 14 | return ( 15 | 16 |
17 |
18 | logo 19 |

Welcome to our MQTT-Demo

20 |
21 | 22 |
23 | 24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | }); 9 | -------------------------------------------------------------------------------- /src/MessageContainer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import MessageList from './MessageList'; 4 | import MessageForm from './MessageForm'; 5 | 6 | 7 | export default class MessageContainer extends React.Component { 8 | 9 | addMessage(message){ 10 | const {mqtt} = this.props; 11 | mqtt.publish('@near/demo', message); 12 | } 13 | 14 | render(){ 15 | return ( 16 |
17 | 18 | 19 |
20 | ) 21 | 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/MessageForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | export default class MessageForm extends React.Component { 3 | constructor(props) { 4 | super(props); 5 | this.handleSubmit = this.handleSubmit.bind(this); 6 | } 7 | 8 | handleSubmit(event) { 9 | const value = this.input.value; 10 | this.props.onSubmit(value); 11 | event.preventDefault(); 12 | } 13 | 14 | render() { 15 | return ( 16 |
17 | 20 | this.input = input} /> 21 | 22 |
23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/MessageList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({data}) => { 4 | const dataList = data.map((d) =>
  • {d}
    • ) 5 | console.log(data); 6 | return ( 7 |
    8 |

    Messages

    9 | 12 |
    13 | ) 14 | } 15 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); 10 | -------------------------------------------------------------------------------- /src/nearForm-icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/KeKs0r/mqtt-react-demo/d05b334e799e3fe569c975220a3b6f563eb5247f/src/nearForm-icon.jpg -------------------------------------------------------------------------------- /src/nearForm-logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 10 | 11 | 12 | 14 | 19 | 20 | 22 | 25 | 27 | 28 | 29 | 30 | 32 | 36 | 41 | 43 | 44 | 48 | 50 | 54 | 55 | 56 | 57 | --------------------------------------------------------------------------------