talksik/tixto
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chat part working quite seemlessly with heroku server and database

Browse Source 
- fixed many issues with keeping connection alive, avatars, userId, etc.
This commit is contained in:
Arjun Patel
2018-07-27 23:59:11 -07:00
parent e27d1db7ec
commit d6dfcd1994
6 changed files with 115 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/screens/loading.js
+1 -1
View File
@@ -29,7 +29,7 @@ export default class Loading extends Component<Props> {
/** /**
* todo fix AsyncStorage * todo fix AsyncStorage
*/ */
this.storeValues(); //this.storeValues();
Actions.main({long: this.longitude.toString(), lat: this.latitude.toString()}); Actions.main({long: this.longitude.toString(), lat: this.latitude.toString()});
}, },
(error) => console.log(error), (error) => console.log(error),
app/screens/main.js
+33 -12
View File
@@ -25,25 +25,46 @@ import AdSpace from './main/adspace.js';
const windowWidth = Dimensions.get('window').width; const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height; 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 = {}; type Props = {};
export default class Main extends Component<Props> { export default class Main extends Component<Props> {
constructor(props) { constructor(props) {
super(props); super(props);
this.position = {
long: this.props.long, var avatarRandom = Math.floor(Math.random() * allAvatarLinks.length);
lat: this.props.lat
}; this.state = {
position: {
long: props.long,
lat: props.lat
},
avatar: avatarRandom
}
} }
closeDrawer = () => { refreshConnection = () => {
this.drawer._root.close();
}; }
openDrawer = () => {
this.drawer._root.open(); disconnect = () => {
}; Actions.home();
}
refreshAvatar = () => {
var newAvatar = (this.state.avatar + 1) % allAvatarLinks.length;
this.setState({
avatar: newAvatar
});
}
render() { render() {
console.log('in Main'); console.log('in Main');
const { position, avatar } = this.state;
const avatarLink = allAvatarLinks[avatar];
console.log(position);
return ( return (
<DrawerLayoutAndroid <DrawerLayoutAndroid
drawerWidth={300} drawerWidth={300}
@@ -51,10 +72,10 @@ export default class Main extends Component<Props> {
renderNavigationView={() => <Menu />}> renderNavigationView={() => <Menu />}>
<View style={styles.container}> <View style={styles.container}>
<View style={styles.navbar}> <View style={styles.navbar}>
<Navbar /> <Navbar avatar={avatarLink} />
</View> </View>
<View style={styles.chat}> <View style={styles.chat}>
<Chat position={this.position} /> <Chat position={position} avatar={avatarLink} />
</View> </View>
<View style={styles.adspace}> <View style={styles.adspace}>
<AdSpace /> <AdSpace />
app/screens/main/chat.js
+31 -17
View File
@@ -30,24 +30,36 @@ type Props = {};
export default class Chat extends Component<Props> { export default class Chat extends Component<Props> {
constructor(props) { constructor(props) {
super(props); super(props);
this.userId = 1;
this.state = { this.state = {
messageToSend : '', messageToSend : '',
messagesDOM: [], messagesDOM: [],
prevMessageUser: -1, prevMessageUser: null,
messages: [(<View key={0}><Text>adf</Text></View>), (<View key={1}><Text>second</Text></View>)] userId: null,
}; };
/** /**
* todo fix AsyncStorage * todo fix AsyncStorage
*/ */
this.position = this.props.position;
console.log(props);
} }
componentDidMount() { 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', () => { this.socket.on('connect', () => {
console.log('again'); this.socket.emit('initial', this.props.position);
this.socket.emit('initial', this.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) => { this.socket.on('initMessages', (allMsg) => {
@@ -66,15 +78,15 @@ export default class Chat extends Component<Props> {
console.log('New message received: '); console.log('New message received: ');
var oldDOM = this.state.messagesDOM; var oldDOM = this.state.messagesDOM;
var newMessage = this.createMessage(msg); var newMessage = this.createMessage(msg);
oldDOM.push(newMessage); if (this.state.prevMessageUser != msg.userId && this.state.prevMessageUser) {
if (this.state.prevMessageUser != msg.userId) {
var dotSeparator = ( var dotSeparator = (
<View key={-msg.id} style={styles.separatorCont}> <View key={msg.text} style={styles.separatorCont}>
<Text>. .</Text> <Text>. .</Text>
</View> </View>
); );
oldDOM.push(dotSeparator); oldDOM.push(dotSeparator);
} }
oldDOM.push(newMessage);
this.setState({ this.setState({
messagesDOM: oldDOM, messagesDOM: oldDOM,
prevMessageUser: msg.userId prevMessageUser: msg.userId
@@ -82,12 +94,14 @@ export default class Chat extends Component<Props> {
} }
sendMessage = () => { sendMessage = () => {
console.log(this.state.userId);
console.log('Message to send: ' + this.state.messageToSend); console.log('Message to send: ' + this.state.messageToSend);
this.socket.emit('newMessage', { this.socket.emit('newMessage', {
userId: this.userId, userId: this.state.userId,
text: this.state.messageToSend, text: this.state.messageToSend,
lng: this.position.long, lng: this.props.position.long,
lat: this.position.lat lat: this.props.position.lat,
avatar: this.props.avatar
}); });
this.setState({ this.setState({
messageToSend: '' messageToSend: ''
@@ -95,27 +109,27 @@ export default class Chat extends Component<Props> {
} }
createMessage = (msg) => { createMessage = (msg) => {
var isUser = msg.userId === this.userId; var isUser = msg.userId == this.state.userId;
var contStyle = isUser ? styles.userMsg : styles.otherMsg; var contStyle = isUser ? styles.userMsg : styles.otherMsg;
var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox; var txtContStyle = isUser ? styles.userMsgBox : styles.otherMsgBox;
var txtStyle = isUser ? styles.userTxt : null; var txtStyle = isUser ? styles.userTxt : null;
var avatarLink = msg.avatar;
var avatar = ( var avatar = (
<View> <View>
<Image style={styles.avatar} source={{uri: 'https://images.pexels.com/photos/430207/pexels-photo-430207.jpeg?auto=compress&cs=tinysrgb&h=350'}} /> <Image style={styles.avatar} source={{uri: avatarLink}} />
</View> </View>
); );
var avatarAlready = this.state.prevMessageUser == msg.userId; var avatarAlready = this.state.prevMessageUser == msg.userId;
var result = ( var result = (
<View key={msg.id} <View key={msg.id}
style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}> style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
{isUser || avatarAlready ? null : avatar} {!isUser && !avatarAlready ? avatar : null}
<View style={[txtContStyle, styles.msgTxtCont]}> <View style={[txtContStyle, styles.msgTxtCont]}>
<Text style={[styles.msgText, txtStyle]}>{msg.text}</Text> <Text style={[styles.msgText, txtStyle]}>{msg.text}</Text>
</View> </View>
{isUser && !avatarAlready ? avatar : null} {isUser && !avatarAlready ? avatar : null}
</View> </View>
); );
console.log(result);
return result; return result;
} }
app/screens/main/menu.js
+30 -23
View File
@@ -1,12 +1,13 @@
/* /*
* AdSpace component within Main * Menu with few options
*/ */
import React, { Component } from 'react'; import React, { Component } from 'react';
import { import {
Dimensions, Dimensions,
View, View,
Text, Text,
ImageBackground ImageBackground,
TouchableOpacity
} from 'react-native'; } from 'react-native';
import { import {
Actions Actions
@@ -27,27 +28,33 @@ export default class Menu extends Component<Props> {
<Text style={styles.hdrTxt}>Menu</Text> <Text style={styles.hdrTxt}>Menu</Text>
</ImageBackground> </ImageBackground>
<View style={styles.main}> <View style={styles.main}>
<View style={styles.option}> <TouchableOpacity>
<Text style={styles.optTxt}>Refresh Connection</Text> <View style={styles.option}>
<Icon <Text style={styles.optTxt}>Refresh Connection</Text>
name='track-changes' <Icon
style={styles.icons} name='track-changes'
/> style={styles.icons}
</View> />
<View style={styles.option}> </View>
<Text style={styles.optTxt}>Change Avatar</Text> </TouchableOpacity>
<Icon <TouchableOpacity>
name='refresh' <View style={styles.option}>
style={styles.icons} <Text style={styles.optTxt}>Change Avatar</Text>
/> <Icon
</View> name='refresh'
<View style={styles.option}> style={styles.icons}
<Text style={styles.optTxt}>Disconnect</Text> />
<Icon </View>
name='exit-to-app' </TouchableOpacity>
style={styles.icons} <TouchableOpacity>
/> <View style={styles.option}>
</View> <Text style={styles.optTxt}>Disconnect</Text>
<Icon
name='exit-to-app'
style={styles.icons}
/>
</View>
</TouchableOpacity>
</View> </View>
</View> </View>
); );
app/screens/main/navbar.js
+7 -1
View File
@@ -19,7 +19,13 @@ const windowHeight = Dimensions.get('window').height;
type Props = {}; type Props = {};
export default class Navbar extends Component<Props> { export default class Navbar extends Component<Props> {
constructor(props) {
super(props);
}
render() { render() {
const { avatar } = this.props;
return ( return (
<View style={styles.container}> <View style={styles.container}>
<View style={styles.iconCont}> <View style={styles.iconCont}>
@@ -33,7 +39,7 @@ export default class Navbar extends Component<Props> {
<Text style={styles.status}>online</Text> <Text style={styles.status}>online</Text>
</View> </View>
<View style={styles.iconCont}> <View style={styles.iconCont}>
<Image source={require('../../assets/images/patterns/1.jpg')} style={styles.avatar} /> <Image style={styles.avatar} source={{uri: avatar}} />
</View> </View>
</View> </View>
); );
server/app.js
+13 -4
View File
@@ -4,10 +4,10 @@ var io = require('socket.io')(server);
var mysql = require('mysql'); var mysql = require('mysql');
var con = mysql.createConnection({ var con = mysql.createConnection({
host: 'localhost', host: 'us-cdbr-iron-east-04.cleardb.net',
user: 'root', user: 'bc7fa7fdf1822b',
password: 'mysql', password: 'f62b55b3',
database: 'nexto' database: 'heroku_99e764eb3c2ab7e'
}); });
var port = 3000; var port = 3000;
@@ -61,4 +61,13 @@ io.on('connection', function (socket) {
socket.on('disconnect', function() { socket.on('disconnect', function() {
console.log('Client disconnected: ' + socket.id); console.log('Client disconnected: ' + socket.id);
}); });
connection.on('error', function (err) {
if (!err.fatal) {
return;
}
if (err.code !== 'PROTOCOL_CONNECTION_LOST') {
throw err;
}
});
}); });