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
*/
this.storeValues();
//this.storeValues();
Actions.main({long: this.longitude.toString(), lat: this.latitude.toString()});
},
(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 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<Props> {
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 (
<DrawerLayoutAndroid
drawerWidth={300}
@@ -51,10 +72,10 @@ export default class Main extends Component<Props> {
renderNavigationView={() => <Menu />}>
<View style={styles.container}>
<View style={styles.navbar}>
<Navbar />
<Navbar avatar={avatarLink} />
</View>
<View style={styles.chat}>
<Chat position={this.position} />
<Chat position={position} avatar={avatarLink} />
</View>
<View style={styles.adspace}>
<AdSpace />
app/screens/main/chat.js
+31 -17
View File
@@ -30,24 +30,36 @@ type Props = {};
export default class Chat extends Component<Props> {
constructor(props) {
super(props);
this.userId = 1;
this.state = {
messageToSend : '',
messagesDOM: [],
prevMessageUser: -1,
messages: [(<View key={0}><Text>adf</Text></View>), (<View key={1}><Text>second</Text></View>)]
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<Props> {
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 = (
<View key={-msg.id} style={styles.separatorCont}>
<View key={msg.text} style={styles.separatorCont}>
<Text>. .</Text>
</View>
);
oldDOM.push(dotSeparator);
}
oldDOM.push(newMessage);
this.setState({
messagesDOM: oldDOM,
prevMessageUser: msg.userId
@@ -82,12 +94,14 @@ export default class Chat extends Component<Props> {
}
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<Props> {
}
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 = (
<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>
);
var avatarAlready = this.state.prevMessageUser == msg.userId;
var result = (
<View key={msg.id}
style={[contStyle, styles.msgCont, avatarAlready ? styles.avatarAlready : null]}>
{isUser || avatarAlready ? null : avatar}
{!isUser && !avatarAlready ? avatar : null}
<View style={[txtContStyle, styles.msgTxtCont]}>
<Text style={[styles.msgText, txtStyle]}>{msg.text}</Text>
</View>
{isUser && !avatarAlready ? avatar : null}
</View>
);
console.log(result);
return result;
}
app/screens/main/menu.js
+9 -2
View File
@@ -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,6 +28,7 @@ export default class Menu extends Component<Props> {
<Text style={styles.hdrTxt}>Menu</Text>
</ImageBackground>
<View style={styles.main}>
<TouchableOpacity>
<View style={styles.option}>
<Text style={styles.optTxt}>Refresh Connection</Text>
<Icon
@@ -34,6 +36,8 @@ export default class Menu extends Component<Props> {
style={styles.icons}
/>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View style={styles.option}>
<Text style={styles.optTxt}>Change Avatar</Text>
<Icon
@@ -41,6 +45,8 @@ export default class Menu extends Component<Props> {
style={styles.icons}
/>
</View>
</TouchableOpacity>
<TouchableOpacity>
<View style={styles.option}>
<Text style={styles.optTxt}>Disconnect</Text>
<Icon
@@ -48,6 +54,7 @@ export default class Menu extends Component<Props> {
style={styles.icons}
/>
</View>
</TouchableOpacity>
</View>
</View>
);
app/screens/main/navbar.js
+7 -1
View File
@@ -19,7 +19,13 @@ const windowHeight = Dimensions.get('window').height;
type Props = {};
export default class Navbar extends Component<Props> {
constructor(props) {
super(props);
}
render() {
const { avatar } = this.props;
return (
<View style={styles.container}>
<View style={styles.iconCont}>
@@ -33,7 +39,7 @@ export default class Navbar extends Component<Props> {
<Text style={styles.status}>online</Text>
</View>
<View style={styles.iconCont}>
<Image source={require('../../assets/images/patterns/1.jpg')} style={styles.avatar} />
<Image style={styles.avatar} source={{uri: avatar}} />
</View>
</View>
);
server/app.js
+13 -4
View File
@@ -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;
}
});
});