mysql local db setup and some setup of socket flow

app/screens/main/chat.js

@@ -7,7 +7,8 @@ import {
   View,
   Text,
   TextInput,
-  Image
+  Image,
+  TouchableOpacity
 } from 'react-native';
 import {
   Actions
@@ -33,24 +34,35 @@ export default class Chat extends Component<Props> {
       prevMessageUser: -1
     };
     this.socket = io('10.0.2.2:3000', {jsonp: false});
-    this.socket.on('message', (msg) => {
+    this.socket.on('initMessages', (allMsg) => {
-      console.log('New message received: ' + msg);
+      console.log('Initial messages received: ' + allMsg);
-      var oldDOM = this.state.messagesDOM;
+      allMsg.map((msg) => {
-      var newMessage = this.createMessage(msg);
+        this.addMessage(msg);
-      this.setState({
-        messagesDOM: oldDOM.concat(newMessage),
-        prevMessageUser: msg.userId
       });
     });
+
+    this.socket.on('newMessage', (msg) => {
+      this.addMessage(msg);
+    });
   }
 
-  /*componentWillMount() {
+  addMessage = (msg) => {
+    console.log('New message received: ' + msg);
+    var oldDOM = this.state.messagesDOM;
+    var newMessage = this.createMessage(msg);
     this.setState({
-      messagesDOM: exMessages.map(
+      messagesDOM: oldDOM.concat(newMessage),
-        (msg) => this.createMessage(msg)
+      prevMessageUser: msg.userId
-        )
     });
-  }*/
+  }
+
+  sendMessage = () => {
+    console.log('Message to send: ' + this.state.messageToSend);
+    this.socket.emit('newMessage', this.state.messageToSend);
+    this.setState({
+      messageToSend: ''
+    });
+  }
 
   createMessage = (msg) => {
     console.log(msg.userId);
@@ -110,10 +122,12 @@ export default class Chat extends Component<Props> {
             />
           </View>
           <View style={styles.iconCont}>
-            <Icon
+            <TouchableOpacity onPress={this.sendMessage}>
-              name='send'
+              <Icon
-              style={styles.sendIcon}
+                name='send'
-            />
+                style={styles.sendIcon}
+              />
+            </TouchableOpacity>
           </View>
         </View>
       </View>

package-lock.json

@@ -2076,6 +2076,11 @@
       "resolved": "https://registry.npmjs.org/big-integer/-/big-integer-1.6.28.tgz",
       "integrity": "sha512-OJT3rzgtsYca/5WmmEuFJDPMwROVh5SSjoEX9wIrpfbbWJ4KqRzShs8Cj6jWHaatBYAeWngBA+kmmrcHSklT1g=="
     },
+    "bignumber.js": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/bignumber.js/-/bignumber.js-4.0.4.tgz",
+      "integrity": "sha512-LDXpJKVzEx2/OqNbG9mXBNvHuiRL4PzHCGfnANHMJ+fv68Ads3exDVJeGDJws+AoNEuca93bU3q+S0woeUaCdg=="
+    },
     "blob": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/blob/-/blob-0.0.4.tgz",
@@ -6777,6 +6782,51 @@
       "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
     },
+    "mysql": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/mysql/-/mysql-2.15.0.tgz",
+      "integrity": "sha512-C7tjzWtbN5nzkLIV+E8Crnl9bFyc7d3XJcBAvHKEVkjrYjogz3llo22q6s/hw+UcsE4/844pDob9ac+3dVjQSA==",
+      "requires": {
+        "bignumber.js": "4.0.4",
+        "readable-stream": "2.3.3",
+        "safe-buffer": "5.1.1",
+        "sqlstring": "2.3.0"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+        },
+        "readable-stream": {
+          "version": "2.3.3",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+          "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "1.0.0",
+            "process-nextick-args": "1.0.7",
+            "safe-buffer": "5.1.1",
+            "string_decoder": "1.0.3",
+            "util-deprecate": "1.0.2"
+          }
+        },
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+          "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+          "requires": {
+            "safe-buffer": "5.1.1"
+          }
+        }
+      }
+    },
     "nan": {
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
@@ -8829,6 +8879,11 @@
       "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
       "dev": true
     },
+    "sqlstring": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/sqlstring/-/sqlstring-2.3.0.tgz",
+      "integrity": "sha1-UluKT9Jtb3GqYegipsr5dtMa0qg="
+    },
     "sshpk": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.14.1.tgz",

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "express": "^4.16.3",
+    "mysql": "^2.15.0",
     "react": "16.3.1",
     "react-native": "^0.55.3",
     "react-native-router-flux": "^4.0.0-beta.28",

server/app.js

@@ -1,6 +1,14 @@
 var app = require('express')();
 var server = require('http').Server(app);
 var io = require('socket.io')(server);
+var mysql = require('mysql');
+
+var con = mysql.createConnection({
+  host: 'localhost',
+  user: 'root',
+  password: 'mysql',
+  database: 'nexto'
+});
 
 var port = 3000;
 server.listen(port, () => console.log('serving on port: ' + port));
@@ -23,11 +31,23 @@ var exMessages = [
 ];
 
 io.on('connection', function (socket) {
-  console.log(socket.id);
+  console.log('Client connected: ' + socket.id);
-  exMessages.map((msg) => {
+  console.log(socket.handshake.jsonp);
-    socket.emit('message', msg);
+  
-    console.log('sending msg by msg');
+  con.query('SELECT * FROM messages;', function (err, result, fields) {
+    if (err) throw err;
+    console.log(result);
+    socket.emit('initMessages', result);
+    console.log('sent all initial messages');
   });
 
-  io.on('test', () => console.log('worked~'));
+  //io.on('test', () => console.log('worked~')); // test with web page
+
+  socket.on('newMessage', function(msg) {
+    io.emit('newMessage', msg);
+  });
+
+  socket.on('disconnect', function() {
+    console.log('Client disconnected: ' + socket.id);
+  });
 });