From d6dfcd1994f380fd70ced82ec32d2ffcdbd9cbb5 Mon Sep 17 00:00:00 2001 From: Arjun Patel Date: Fri, 27 Jul 2018 23:59:11 -0700 Subject: [PATCH] chat part working quite seemlessly with heroku server and database - fixed many issues with keeping connection alive, avatars, userId, etc. --- app/screens/loading.js | 2 +- app/screens/main.js | 45 +++++++++++++++++++++++--------- app/screens/main/chat.js | 48 ++++++++++++++++++++++------------ app/screens/main/menu.js | 53 +++++++++++++++++++++----------------- app/screens/main/navbar.js | 8 +++++- server/app.js | 17 +++++++++--- 6 files changed, 115 insertions(+), 58 deletions(-) diff --git a/app/screens/loading.js b/app/screens/loading.js index 2ee4699..b94c98e 100644 --- a/app/screens/loading.js +++ b/app/screens/loading.js @@ -29,7 +29,7 @@ export default class Loading extends Component { /** * todo fix AsyncStorage */ - this.storeValues(); + //this.storeValues(); Actions.main({long: this.longitude.toString(), lat: this.latitude.toString()}); }, (error) => console.log(error), diff --git a/app/screens/main.js b/app/screens/main.js index 2b514b0..5fe6816 100644 --- a/app/screens/main.js +++ b/app/screens/main.js @@ -25,25 +25,46 @@ import AdSpace from './main/adspace.js'; const windowWidth = Dimensions.get('window').width; const windowHeight = Dimensions.get('window').height; +const allAvatarLinks = ['https://images.pexels.com/photos/430207/pexels-photo-430207.jpeg?auto=compress&cs=tinysrgb&h=350', 'https://www.graphicpear.com/wp-content/uploads/2017/05/aaa.jpg', 'https://i.pinimg.com/736x/1f/12/87/1f1287b54f9d0c8f5c5fe86d27c95bbb--blue-patterns-indoor-outdoor-rugs.jpg']; + type Props = {}; export default class Main extends Component { constructor(props) { super(props); - this.position = { - long: this.props.long, - lat: this.props.lat - }; + + var avatarRandom = Math.floor(Math.random() * allAvatarLinks.length); + + this.state = { + position: { + long: props.long, + lat: props.lat + }, + avatar: avatarRandom + } } - closeDrawer = () => { - this.drawer._root.close(); - }; - openDrawer = () => { - this.drawer._root.open(); - }; + refreshConnection = () => { + + } + + disconnect = () => { + Actions.home(); + } + + refreshAvatar = () => { + var newAvatar = (this.state.avatar + 1) % allAvatarLinks.length; + this.setState({ + avatar: newAvatar + }); + } render() { console.log('in Main'); + const { position, avatar } = this.state; + const avatarLink = allAvatarLinks[avatar]; + + console.log(position); + return ( { renderNavigationView={() => }> - + - + diff --git a/app/screens/main/chat.js b/app/screens/main/chat.js index 6848dbe..ec9994e 100644 --- a/app/screens/main/chat.js +++ b/app/screens/main/chat.js @@ -30,24 +30,36 @@ type Props = {}; export default class Chat extends Component { constructor(props) { super(props); - this.userId = 1; + this.state = { messageToSend : '', messagesDOM: [], - prevMessageUser: -1, - messages: [(adf), (second)] + prevMessageUser: null, + userId: null, + }; /** * todo fix AsyncStorage */ - this.position = this.props.position; + + console.log(props); } componentDidMount() { - this.socket = io('10.0.2.2:3000', {jsonp: false}); + this.socket = io('https://murmuring-sierra-86040.herokuapp.com', {jsonp: false}); this.socket.on('connect', () => { - console.log('again'); - this.socket.emit('initial', this.position); + this.socket.emit('initial', this.props.position); + + fetch('https://murmuring-sierra-86040.herokuapp.com/userid') + .then((response) => response.json()) + .then((responseJson) => { + console.log(responseJson); + this.setState({userId: responseJson.userId}); + }) + .catch((error) => { + console.log(error); + this.setState({userId: 1}); // TODO: error popup + }); }); this.socket.on('initMessages', (allMsg) => { @@ -66,15 +78,15 @@ export default class Chat extends Component { console.log('New message received: '); var oldDOM = this.state.messagesDOM; var newMessage = this.createMessage(msg); - oldDOM.push(newMessage); - if (this.state.prevMessageUser != msg.userId) { + if (this.state.prevMessageUser != msg.userId && this.state.prevMessageUser) { var dotSeparator = ( - + . . ); oldDOM.push(dotSeparator); } + oldDOM.push(newMessage); this.setState({ messagesDOM: oldDOM, prevMessageUser: msg.userId @@ -82,12 +94,14 @@ export default class Chat extends Component { } sendMessage = () => { + console.log(this.state.userId); console.log('Message to send: ' + this.state.messageToSend); this.socket.emit('newMessage', { - userId: this.userId, + userId: this.state.userId, text: this.state.messageToSend, - lng: this.position.long, - lat: this.position.lat + lng: this.props.position.long, + lat: this.props.position.lat, + avatar: this.props.avatar }); this.setState({ messageToSend: '' @@ -95,27 +109,27 @@ export default class Chat extends Component { } createMessage = (msg) => { - var isUser = msg.userId === this.userId; + var isUser = msg.userId == this.state.userId; var contStyle = isUser ? styles.userMsg : styles.otherMsg; var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox; var txtStyle = isUser ? styles.userTxt : null; + var avatarLink = msg.avatar; var avatar = ( - + ); var avatarAlready = this.state.prevMessageUser == msg.userId; var result = ( - {isUser || avatarAlready ? null : avatar} + {!isUser && !avatarAlready ? avatar : null} {msg.text} {isUser && !avatarAlready ? avatar : null} ); - console.log(result); return result; } diff --git a/app/screens/main/menu.js b/app/screens/main/menu.js index da444d9..c768246 100644 --- a/app/screens/main/menu.js +++ b/app/screens/main/menu.js @@ -1,12 +1,13 @@ /* - * AdSpace component within Main + * Menu with few options */ import React, { Component } from 'react'; import { Dimensions, View, Text, - ImageBackground + ImageBackground, + TouchableOpacity } from 'react-native'; import { Actions @@ -27,27 +28,33 @@ export default class Menu extends Component { Menu - - Refresh Connection - - - - Change Avatar - - - - Disconnect - - + + + Refresh Connection + + + + + + Change Avatar + + + + + + Disconnect + + + ); diff --git a/app/screens/main/navbar.js b/app/screens/main/navbar.js index 15c8fe5..b5a2b95 100644 --- a/app/screens/main/navbar.js +++ b/app/screens/main/navbar.js @@ -19,7 +19,13 @@ const windowHeight = Dimensions.get('window').height; type Props = {}; export default class Navbar extends Component { + constructor(props) { + super(props); + } + render() { + const { avatar } = this.props; + return ( @@ -33,7 +39,7 @@ export default class Navbar extends Component { online - + ); diff --git a/server/app.js b/server/app.js index a48a624..668010e 100644 --- a/server/app.js +++ b/server/app.js @@ -4,10 +4,10 @@ var io = require('socket.io')(server); var mysql = require('mysql'); var con = mysql.createConnection({ - host: 'localhost', - user: 'root', - password: 'mysql', - database: 'nexto' + host: 'us-cdbr-iron-east-04.cleardb.net', + user: 'bc7fa7fdf1822b', + password: 'f62b55b3', + database: 'heroku_99e764eb3c2ab7e' }); var port = 3000; @@ -61,4 +61,13 @@ io.on('connection', function (socket) { socket.on('disconnect', function() { console.log('Client disconnected: ' + socket.id); }); + + connection.on('error', function (err) { + if (!err.fatal) { + return; + } + if (err.code !== 'PROTOCOL_CONNECTION_LOST') { + throw err; + } + }); });