Initial commit

mgdm · Jun 1, 2015 · 4acad78 · 4acad78
commit 4acad78
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+output.js
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<!doctype html>
+<html>
+    <body>
+        <div id="sendMessageBox"></div>
+        <div id="messages"></div>
+
+        <script src="output.js"></script>
+    </body>
+</html>
diff --git a/main.js b/main.js
@@ -0,0 +1,73 @@
+var mqtt = require('mqtt');
+var React = require('react');
+var client = mqtt.connect("ws://localhost:1884");
+
+client.on('connect', function() {
+    client.subscribe("haw");
+});
+
+var Message = React.createClass({
+    render: function() {
+        return (
+            <div key={this.props.key} className="message">{this.props.message.payload}</div>
+        );
+    }
+});
+
+var MessageList = React.createClass({
+    addMessage: function(message) {
+        var updated = this.state.messages;
+        updated.unshift(message);
+        this.setState({messages: updated});
+    },
+
+    getInitialState: function() {
+        return { messages: [] };
+    },
+
+    componentDidMount: function() {
+        var self = this;
+
+        client.on('message', function(topic, payload, packet) {
+            self.addMessage({key: packet.messageId, topic: topic, payload: payload.toString()});
+        });
+    },
+
+    render: function() {
+        var messageNodes = this.state.messages.map(function(message) {
+            return (
+                <Message key={message.key} message={message} />
+            );
+        });
+
+        return (
+            <div className="messages">{messageNodes}</div>
+        );
+    }
+});
+
+var SendMessage = React.createClass({
+
+    render: function() {
+        return (
+            <form onSubmit={this.send}>
+                <input type="text" name="sendMessage" />
+            </form>
+        );
+    },
+
+    send: function(event) {
+        event && event.preventDefault();
+        var input = event.target.children[0];
+        client.publish('haw', input.value);
+        input.value = "";
+    }
+});
+
+React.render(
+    <MessageList />, document.getElementById('messages')
+);
+
+React.render(
+    <SendMessage />, document.getElementById('sendMessageBox')
+);
diff --git a/package.json b/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "mqttchat",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "build": "./node_modules/.bin/browserify -t babelify main.js -o output.js",
+    "watch": "./node_modules/.bin/watchify -d -t babelify main.js -o output.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel": "^5.4.7",
+    "babelify": "^6.1.2",
+    "browserify": "^10.2.3"
+  },
+  "dependencies": {
+    "mqtt": "^1.2.0",
+    "react": "^0.13.3",
+    "watchify": "^3.2.1"
+  }
+}