diff --git a/backend/server.js b/backend/server.js index a00ed90a4c939c781a41963f21d7aca736f2216c..dad652acba948b0d33c7e75d27e1013e5f22f9ec 100644 --- a/backend/server.js +++ b/backend/server.js @@ -29,8 +29,9 @@ app.use(authRoutes); io.on('connection', socket =>{ console.log('user connected'); - socket.on('chat message', msg =>{ + socket.on('msg', msg =>{ console.log(msg); + io.emit('msg', msg); }) }) diff --git a/mobile/App.js b/mobile/App.js index 18e801d320d907514b4093aea789f32176b9f912..922835a8f8d8517c27ecef5dcb4fba9ef807ebc1 100644 --- a/mobile/App.js +++ b/mobile/App.js @@ -8,6 +8,10 @@ import RegistrationScreen from './Screens/registrationScreen' const Stack = createNativeStackNavigator(); class App extends React.Component { + + //In the render here we define the application Screen routes + //with navigation, then in the classes we'll use the navigate + //method to move from one page to another render() { return ( <NavigationContainer> diff --git a/mobile/Screens/homeScreen.js b/mobile/Screens/homeScreen.js index 8038a3ad34a92234fb00c7d00e3a6b89cb00ad2a..7fe59a1ec2d7cf1970030a6e3e1dd21857277268 100644 --- a/mobile/Screens/homeScreen.js +++ b/mobile/Screens/homeScreen.js @@ -4,28 +4,39 @@ import {io} from "socket.io-client"; //socket.io-client class HomeScreen extends Component { + constructor(props) { + super(props); + this.state = { + msg : "" + }; + } + componentDidMount() { - const socket = io("http://192.168.178.92:3000", { + this.socket = io("http://192.168.178.92:3000", { transports: ['websocket'] //this line is fundamental }); + this.socket.on('msg', msg =>{ + alert(msg); + }) + } + + sendMessage(){ + this.socket.emit("msg", this.state.msg); + this.setState({ msg: "" }); } render() { return ( <View style={styles.container}> - <Text>Second Page</Text> - - <Button - title="Go to Home" - onPress={() => - this.props.navigation.navigate('Login') - } - /> <TextInput - style={{width:200, height:40, borderWidth:2} } + style={styles.input} placeholder="Send a message" autoCorrect={false} - + value={this.state.msg} + onSubmitEditing={() => this.sendMessage()} + onChangeText={msg => { + this.setState({ msg }); + }} /> </View> ); @@ -40,6 +51,15 @@ const styles = StyleSheet.create({ alignItems: 'center', justifyContent: 'center', }, + input: { + position: 'absolute', + left: 0, + right: 0, + bottom: 0, + alignSelf: "stretch", + height:40, + borderWidth:1 + } }); export default HomeScreen; \ No newline at end of file diff --git a/mobile/Screens/loginScreen.js b/mobile/Screens/loginScreen.js index 7515fe161f206f318436bee1e1c4365c50e56eae..4095ae591f78940da596bb571a26c3cd253e73ca 100644 --- a/mobile/Screens/loginScreen.js +++ b/mobile/Screens/loginScreen.js @@ -11,30 +11,35 @@ class LoginScreen extends Component { } submitLogin() { - //try to post something to the server - fetch('http://192.168.178.92:3000/signin', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - username : this.state.username, - password : this.state.password - }), - }) - .then(res =>{ - if (res.status !== 200){ - alert('Invalid username or password'); - } - else{ - alert('Succesful login') - this.props.navigation.navigate('Home') - } - }) - - this.setState({ username: "" }); - this.setState({ password: "" }); + //here we're going to post the username and password inserted in the + //login page, in particulare this is a post request to the /signin route + //in the server that will response with status:200 if the credentials are in the + //database and with status:422 if not + fetch('http://192.168.178.92:3000/signin', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + username : this.state.username, + password : this.state.password + }), + }) //here we handle the status response of the server + .then(res =>{ + if (res.status !== 200){ + alert('Invalid username or password'); + } + else{ + alert('Succesful login') + this.props.navigation.navigate('Home') + } + }) + //here we set again username and password as blank + //probably in the future we'll need to send the credentials to the home page + //to create the user for the socket.io chat + this.setState({ username: "" }); + this.setState({ password: "" }); } render() { diff --git a/mobile/Screens/registrationScreen.js b/mobile/Screens/registrationScreen.js index 80fdbb4acf4ec3eb6d75486010dfec9b692f6f7a..637d4fc9661acb4f6a7f9edaab886912cddcdf4e 100644 --- a/mobile/Screens/registrationScreen.js +++ b/mobile/Screens/registrationScreen.js @@ -11,30 +11,31 @@ class RegistrationScreen extends Component { } submitRegistration() { - //try to post something to the server - - fetch('http://192.168.178.92:3000/signup', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ - username : this.state.username, - password : this.state.password - }), - }) - .then(res =>{ - if (res.status !== 200){ - alert('Invalid username'); - } - else{ - alert('User registered'); - this.props.navigation.navigate('Login'); - } - }) - this.setState({ username: "" }); - this.setState({ password: "" }); + //here we post the credentials to the signup route in the server + //and we wait for the response + fetch('http://192.168.178.92:3000/signup', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + username : this.state.username, + password : this.state.password + }), + }) + .then(res =>{ + if (res.status !== 200){ + alert('Invalid username'); + } + else{ + alert('User registered'); + this.props.navigation.navigate('Login'); + } + }) + + this.setState({ username: "" }); + this.setState({ password: "" }); } render() {