realtime socket.io

Author: jgalianoz

package.json.save

@@ -0,0 +1,33 @@
+	
+{
+  "name": "react-chatv2",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "stylus": "stylus -u nib -c -o public src/client/stylus/style.styl",
+    "build": "browserify -t babelify src/client/app.js > public/bundle.js",
+    "server": "babel-node src/server/index.js",
+    "start": "npm run stylus && npm run build && npm run server"
+  },
+  "author": "@Manuel_Galindez",
+  "license": "MIT",
+  "devDependencies": {
+    "babel-cli": "^6.16.0",
+    "babel-preset-es2015": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babelify": "^7.3.0",
+    "browserify": "^13.1.0",
+    "express": "^4.14.0",
+    "nib": "^1.1.2",
+    "react-engine": "^4.1.0",
+    "stylus": "^0.54.5"
+  },
+  "dependencies": {
+    "react": "^15.3.2",
+    "react-addons-css-transition-group": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "socket.io": "^1.5.0",
+    "socket.io-client": "^1.5.0"
+  }
+}

src/client/Components/Discussions.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import io from 'socket.io-client';
+import uid from 'uid';
 import MessageList from './MessageList';
 
 
@@ -10,32 +11,42 @@ export default class Discussions extends React.Component {
     this.state = { messages: [] };
     this._dataValue = this._dataValue.bind(this);
     this._MessageSend = this._MessageSend.bind(this);
+    this.user = uid(10);
   }
 
   componentDidMount(){
     this.socket = io('localhost:3000');
+
+    this.socket.on('message', (message) => {
+      if (message.user !== this.user) {
+        this._MessageSend(message);
+      }
+    })
   }
 
-  _dataValue(text) {
-    let textValue = text.target.value;
+  _dataValue(ev) {
+
+    ev.preventDefault();
+
+    let textValue = document.getElementById('textarea').value;
     const avatar = this.props.avatar;
     const username = this.props.username;
 
-    let message = { avatar: avatar, username: username, message: textValue };
-    this.state.messages.push( message );
+    if ( textValue !== '' ) {
+
+      let message = { avatar: avatar, username: username, message: textValue };
+      this._MessageSend(message);
+      this.socket.emit('new-message', message);
+      document.getElementById('textarea').value = '';
+    }
+
   }
 
-  _MessageSend(ev) {
-    ev.preventDefault();
-    let MessageGlobal = this.state.messages;
+  _MessageSend(message) {
 
-    for ( let cont = 0; cont <= MessageGlobal.length -1; cont++) {
-      if ( cont === MessageGlobal.length -1 ) {
-        let dataMessage = [ MessageGlobal[cont] ];
-        this.setState({ messages: dataMessage })
-      }
-    }
-    document.getElementById('textarea').value = '';
+    this.state.messages.push( message );
+    let MessageGlobal = this.state.messages;
+    this.setState({ messages: MessageGlobal });
   }
 
   render(){
@@ -56,8 +67,8 @@ export default class Discussions extends React.Component {
 
 
       <form className="Message-form" method="POST">
-        <textarea id="textarea" placeholder="Write message..." onChange={this._dataValue}></textarea>
-        <button type="submit" onClick={ this._MessageSend }>Click</button>
+        <textarea id="textarea" placeholder="Write message..."></textarea>
+        <button type="submit" onClick={ this._dataValue }>Send</button>
       </form>
 
     </div>

src/client/stylus/style.styl

@@ -86,6 +86,7 @@ figure
 
 
 .Message-form
+  display flex
   > textarea
       box-sizing border-box
       width 100%

src/server/index.js

@@ -30,10 +30,10 @@ let server = http.createServer(app).listen(port, () => console.log(`Server liste
 const io = sckengine.listen(server);
 
 io.on('connection', (socket) => {
-  console.log('New user connect');
+  console.log(`New user connect ${socket.id}`);
 
-  socket.on('new messages', (msj) => {
-  	io.emit('message', msj);
+  socket.on('new-message', (msg) => {
+    io.emit('message', msg);
   })
 
 })