diff --git a/backend/server.js b/backend/server.js
index 13792cf66518e2f03d09cf70778d62a5d7289e9e..a00ed90a4c939c781a41963f21d7aca736f2216c 100644
--- a/backend/server.js
+++ b/backend/server.js
@@ -27,9 +27,9 @@ app.use(express.json());
app.use(authRoutes);
io.on('connection', socket =>{
- console.log('socket connected');
+ console.log('user connected');
- socket.on('chatMessage', msg =>{
+ socket.on('chat message', msg =>{
console.log(msg);
})
})
diff --git a/mobile/App.js b/mobile/App.js
index 181f3cee3bafb30959cbd27842deebe42f818240..7613ddf6d6a5a3cb6955f85946e7a3afd4cfd595 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -1,21 +1,30 @@
-import { StatusBar } from 'expo-status-bar';
import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import HomeScreen from './Screens/homeScreen'
+import SecondScreen from './Screens/secondScreen'
-export default function App() {
- return (
- <View style={styles.container}>
- <Text>Open up App.js to start working on your app!</Text>
- <StatusBar style="auto" />
- </View>
- );
+const Stack = createNativeStackNavigator();
+
+class App extends React.Component {
+ render() {
+ return (
+ <NavigationContainer>
+ <Stack.Navigator>
+ <Stack.Screen
+ name="Home"
+ component={HomeScreen}
+ />
+ <Stack.Screen
+ name="Second"
+ component={SecondScreen}
+ />
+ </Stack.Navigator>
+ </NavigationContainer>
+ );
+ }
}
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center',
- },
-});
+
+
+export default App;
diff --git a/mobile/Screens/homeScreen.js b/mobile/Screens/homeScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..ad2049b35b9f0f1f430c5a2b1ad622915d337cb7
--- /dev/null
+++ b/mobile/Screens/homeScreen.js
@@ -0,0 +1,67 @@
+import React, {Component} from 'react';
+import { StyleSheet, Text, View, Button, TextInput } from 'react-native';
+import io from "socket.io-client";
+
+class HomeScreen extends Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ chatMessage: "",
+ chatMessages: []
+ };
+ }
+
+ componentDidMount() {
+ this.socket = io("http://0.0.0.0:3000", {
+ transports: ['websocket'] //this line is fundamental
+ });
+ }
+
+ submitChatMessage() {
+ this.socket.emit("chat message", this.state.chatMessage);
+ this.setState({ chatMessage: "" });
+ }
+
+ render() {
+
+ const chatMessages = this.state.chatMessages.map(chatMessage => (
+ <Text key={chatMessage}>{chatMessage}</Text>
+ ));
+
+ return (
+ <View style={styles.container}>
+ <Text>HOME</Text>
+
+ <Button
+ title="Go to Second"
+ onPress={() =>
+ this.props.navigation.navigate('Second')
+ }
+ />
+
+ <TextInput
+ style={{ height: 40, borderWidth: 2 }}
+ autoCorrect={false}
+ value={this.state.chatMessage}
+ onSubmitEditing={() => this.submitChatMessage()}
+ onChangeText={chatMessage => {
+ this.setState({ chatMessage });
+ }}
+ />
+ {chatMessages}
+ </View>
+ );
+ }
+}
+
+// ...
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ });
+
+export default HomeScreen;
\ No newline at end of file
diff --git a/mobile/Screens/secondScreen.js b/mobile/Screens/secondScreen.js
new file mode 100644
index 0000000000000000000000000000000000000000..eb19d1b51e0f31ca28386de4dec38948844c9e35
--- /dev/null
+++ b/mobile/Screens/secondScreen.js
@@ -0,0 +1,31 @@
+import React from 'react';
+import { StyleSheet, Text, View, Button } from 'react-native';
+
+class SecondScreen extends React.Component {
+ render() {
+ return (
+ <View style={styles.container}>
+ <Text>Second Page</Text>
+
+ <Button
+ title="Go to Home"
+ onPress={() =>
+ this.props.navigation.navigate('Home')
+ }
+ />
+ </View>
+ );
+ }
+}
+
+// ...
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ });
+
+export default SecondScreen;
\ No newline at end of file
diff --git a/mobile/package-lock.json b/mobile/package-lock.json
index 09d6b70b373b4d60e4bef5e1eb19ec10b5f2f4a9..2d79da0f91ea73bb64432f50a835b20d5b71e4ab 100644
--- a/mobile/package-lock.json
+++ b/mobile/package-lock.json
@@ -1724,6 +1724,69 @@
"resolved": "https://registry.npmjs.org/@react-native/polyfills/-/polyfills-1.0.0.tgz",
"integrity": "sha512-0jbp4RxjYopTsIdLl+/Fy2TiwVYHy4mgeu07DG4b/LyM0OS/+lPP5c9sbnt/AMlnF6qz2JRZpPpGw1eMNS6A4w=="
},
+ "@react-navigation/core": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-6.1.0.tgz",
+ "integrity": "sha512-LyZqD/ZCXSK9+ES8KiH+0tU+7aL84jUw1N9OxZfEuns/OcnSXKC3sOO+9NQ9XRowB1wLUfJhmqZ8G8rUlg33fQ==",
+ "requires": {
+ "@react-navigation/routers": "^6.1.0",
+ "escape-string-regexp": "^4.0.0",
+ "nanoid": "^3.1.23",
+ "query-string": "^7.0.0",
+ "react-is": "^16.13.0"
+ },
+ "dependencies": {
+ "escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+ },
+ "react-is": {
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+ "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+ }
+ }
+ },
+ "@react-navigation/elements": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.2.1.tgz",
+ "integrity": "sha512-EnmAbKMsptrliRKf95rdgS6BhMjML+mIns06+G1Vdih6BrEo7/0iytThUv3WBf99AI76dyEq/cqLUwHPiFzXWg=="
+ },
+ "@react-navigation/native": {
+ "version": "6.0.6",
+ "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.0.6.tgz",
+ "integrity": "sha512-XzL7YPsaRRQgdCQSXbA8PJWLN2I4lhUUvSFoKQPNO4DS6y8eqZI1V8COPYlJg8+tsetGV5J8jt+jVjWL7h6ZrQ==",
+ "requires": {
+ "@react-navigation/core": "^6.1.0",
+ "escape-string-regexp": "^4.0.0",
+ "nanoid": "^3.1.23"
+ },
+ "dependencies": {
+ "escape-string-regexp": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+ "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+ }
+ }
+ },
+ "@react-navigation/native-stack": {
+ "version": "6.2.5",
+ "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.2.5.tgz",
+ "integrity": "sha512-XCtwl4LEr06nzxMG4aXbYfbO/pAjyhGOR3QtBVBq/uGfVGkeK8utKUe925reqd1x099CiEfSJLpgeR2KzzYp+Q==",
+ "requires": {
+ "@react-navigation/elements": "^1.2.1",
+ "warn-once": "^0.1.0"
+ }
+ },
+ "@react-navigation/routers": {
+ "version": "6.1.0",
+ "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.0.tgz",
+ "integrity": "sha512-8xJL+djIzpFdRW/sGlKojQ06fWgFk1c5jER9501HYJ12LF5DIJFr/tqBI2TJ6bk+y+QFu0nbNyeRC80OjRlmkA==",
+ "requires": {
+ "nanoid": "^3.1.23"
+ }
+ },
"@sideway/address": {
"version": "4.1.3",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.3.tgz",
@@ -1742,6 +1805,11 @@
"resolved": "https://registry.npmjs.org/@sideway/pinpoint/-/pinpoint-2.0.0.tgz",
"integrity": "sha512-RNiOoTPkptFtSVzQevY/yWtZwf/RxyVnPy/OcA9HBM3MlGDnBEYL5B41H0MTn0Uec8Hi+2qUtTfG2WWZBmMejQ=="
},
+ "@socket.io/component-emitter": {
+ "version": "3.0.0",
+ "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.0.0.tgz",
+ "integrity": "sha512-2pTGuibAXJswAPJjaKisthqS/NOK5ypG4LYT6tEAV0S/mxW0zOIvYvGK0V8w8+SHxAm6vRMSjqSalFXeBAqs+Q=="
+ },
"@types/graceful-fs": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2121,6 +2189,11 @@
"babel-plugin-syntax-trailing-function-commas": "^7.0.0-beta.0"
}
},
+ "backo2": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
+ "integrity": "sha1-MasayLEpNjRj41s+u2n038+6eUc="
+ },
"balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2176,6 +2249,11 @@
}
}
},
+ "base64-arraybuffer": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.1.tgz",
+ "integrity": "sha512-vFIUq7FdLtjZMhATwDul5RZWv2jpXQ09Pd6jcVEOvIsqCWTRFD/ONHNfyOS8dA/Ippi5dsIgpyKWKZaAKZltbA=="
+ },
"base64-js": {
"version": "1.5.1",
"resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -2815,6 +2893,37 @@
"once": "^1.4.0"
}
},
+ "engine.io-client": {
+ "version": "6.1.1",
+ "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.1.1.tgz",
+ "integrity": "sha512-V05mmDo4gjimYW+FGujoGmmmxRaDsrVr7AXA3ZIfa04MWM1jOfZfUwou0oNqhNwy/votUDvGDt4JA4QF4e0b4g==",
+ "requires": {
+ "@socket.io/component-emitter": "~3.0.0",
+ "debug": "~4.3.1",
+ "engine.io-parser": "~5.0.0",
+ "has-cors": "1.1.0",
+ "parseqs": "0.0.6",
+ "parseuri": "0.0.6",
+ "ws": "~8.2.3",
+ "xmlhttprequest-ssl": "~2.0.0",
+ "yeast": "0.1.2"
+ },
+ "dependencies": {
+ "ws": {
+ "version": "8.2.3",
+ "resolved": "https://registry.npmjs.org/ws/-/ws-8.2.3.tgz",
+ "integrity": "sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA=="
+ }
+ }
+ },
+ "engine.io-parser": {
+ "version": "5.0.2",
+ "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.2.tgz",
+ "integrity": "sha512-wuiO7qO/OEkPJSFueuATIXtrxF7/6GTbAO9QLv7nnbjwZ5tYhLm9zxvLwxstRs0dcT0KUlWTjtIOs1T86jt12g==",
+ "requires": {
+ "base64-arraybuffer": "~1.0.1"
+ }
+ },
"envinfo": {
"version": "7.8.1",
"resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
@@ -3277,6 +3386,11 @@
"to-regex-range": "^5.0.1"
}
},
+ "filter-obj": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/filter-obj/-/filter-obj-1.1.0.tgz",
+ "integrity": "sha1-mzERErxsYSehbgFsbF1/GeCAXFs="
+ },
"finalhandler": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
@@ -3478,6 +3592,11 @@
"function-bind": "^1.1.1"
}
},
+ "has-cors": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/has-cors/-/has-cors-1.1.0.tgz",
+ "integrity": "sha1-XkdHk/fqmEPRu5nCPu9J/xJv/zk="
+ },
"has-flag": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -4875,6 +4994,11 @@
"thenify-all": "^1.0.0"
}
},
+ "nanoid": {
+ "version": "3.1.30",
+ "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
+ "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
+ },
"nanomatch": {
"version": "1.2.13",
"resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -5150,6 +5274,16 @@
"json-parse-better-errors": "^1.0.1"
}
},
+ "parseqs": {
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.6.tgz",
+ "integrity": "sha512-jeAGzMDbfSHHA091hr0r31eYfTig+29g3GKKE/PPbEQ65X0lmMwlEoqmhzu0iztID5uJpZsFlUPDP8ThPL7M8w=="
+ },
+ "parseuri": {
+ "version": "0.0.6",
+ "resolved": "https://registry.npmjs.org/parseuri/-/parseuri-0.0.6.tgz",
+ "integrity": "sha512-AUjen8sAkGgao7UyCX6Ahv0gIK2fABKmYjvP4xmy5JaKvcbTRueIqIPHLAfq30xJddqSE033IOMUSOMCcK3Sow=="
+ },
"parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -5407,6 +5541,17 @@
"once": "^1.3.1"
}
},
+ "query-string": {
+ "version": "7.0.1",
+ "resolved": "https://registry.npmjs.org/query-string/-/query-string-7.0.1.tgz",
+ "integrity": "sha512-uIw3iRvHnk9to1blJCG3BTc+Ro56CBowJXKmNNAm3RulvPBzWLRqKSiiDk+IplJhsydwtuNMHi8UGQFcCLVfkA==",
+ "requires": {
+ "decode-uri-component": "^0.2.0",
+ "filter-obj": "^1.1.0",
+ "split-on-first": "^1.0.0",
+ "strict-uri-encode": "^2.0.0"
+ }
+ },
"querystringify": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -5781,6 +5926,19 @@
"nullthrows": "^1.1.1"
}
},
+ "react-native-safe-area-context": {
+ "version": "3.3.2",
+ "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.3.2.tgz",
+ "integrity": "sha512-yOwiiPJ1rk+/nfK13eafbpW6sKW0jOnsRem2C1LPJjM3tfTof6hlvV5eWHATye3XOpu2cJ7N+HdkUvUDGwFD2Q=="
+ },
+ "react-native-screens": {
+ "version": "3.8.0",
+ "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-3.8.0.tgz",
+ "integrity": "sha512-lHrnB/elAoMJKv8O12U6BLgeup4lB6ZKJHEOVuG/D72nv/OE9wUusbou6YCB5tp3YbaSpHflPnkFmHA/vCejpw==",
+ "requires": {
+ "warn-once": "^0.1.0"
+ }
+ },
"react-native-web": {
"version": "0.17.1",
"resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.17.1.tgz",
@@ -6476,6 +6634,28 @@
}
}
},
+ "socket.io-client": {
+ "version": "4.4.0",
+ "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.4.0.tgz",
+ "integrity": "sha512-g7riSEJXi7qCFImPow98oT8X++MSsHz6MMFRXkWNJ6uEROSHOa3kxdrsYWMq85dO+09CFMkcqlpjvbVXQl4z6g==",
+ "requires": {
+ "@socket.io/component-emitter": "~3.0.0",
+ "backo2": "~1.0.2",
+ "debug": "~4.3.2",
+ "engine.io-client": "~6.1.1",
+ "parseuri": "0.0.6",
+ "socket.io-parser": "~4.1.1"
+ }
+ },
+ "socket.io-parser": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.1.1.tgz",
+ "integrity": "sha512-USQVLSkDWE5nbcY760ExdKaJxCE65kcsG/8k5FDGZVVxpD1pA7hABYXYkCUvxUuYYh/+uQw0N/fvBzfT8o07KA==",
+ "requires": {
+ "@socket.io/component-emitter": "~3.0.0",
+ "debug": "~4.3.1"
+ }
+ },
"source-map": {
"version": "0.5.7",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6514,6 +6694,11 @@
"resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
"integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
},
+ "split-on-first": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz",
+ "integrity": "sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw=="
+ },
"split-string": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
@@ -6569,6 +6754,11 @@
"resolved": "https://registry.npmjs.org/stream-buffers/-/stream-buffers-2.2.0.tgz",
"integrity": "sha1-kdX1Ew0c75bc+n9yaUUYh0HQnuQ="
},
+ "strict-uri-encode": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz",
+ "integrity": "sha1-ucczDHBChi9rFC3CdLvMWGbONUY="
+ },
"string-width": {
"version": "4.2.3",
"resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -6938,6 +7128,11 @@
"makeerror": "1.0.12"
}
},
+ "warn-once": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/warn-once/-/warn-once-0.1.0.tgz",
+ "integrity": "sha512-recZTSvuaH/On5ZU5ywq66y99lImWqzP93+AiUo9LUwG8gXHW+LJjhOd6REJHm7qb0niYqrEQJvbHSQfuJtTqA=="
+ },
"wcwidth": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/wcwidth/-/wcwidth-1.0.1.tgz",
@@ -7087,6 +7282,11 @@
"sax": "^1.2.1"
}
},
+ "xmlhttprequest-ssl": {
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
+ "integrity": "sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A=="
+ },
"xtend": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -7164,6 +7364,11 @@
"decamelize": "^1.2.0"
}
},
+ "yeast": {
+ "version": "0.1.2",
+ "resolved": "https://registry.npmjs.org/yeast/-/yeast-0.1.2.tgz",
+ "integrity": "sha1-AI4G2AlDIMNy28L47XagymyKxBk="
+ },
"yocto-queue": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/mobile/package.json b/mobile/package.json
index c1dfa92f413b5cb7269e7577480c5f4a2bfbc23c..db8ad37e252c8469b52ab5786e71df9eeb47a3e5 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -10,12 +10,17 @@
"eject": "expo eject"
},
"dependencies": {
+ "@react-navigation/native": "^6.0.6",
+ "@react-navigation/native-stack": "^6.2.5",
"expo": "~43.0.2",
"expo-status-bar": "~1.1.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
- "react-native-web": "0.17.1"
+ "react-native-safe-area-context": "3.3.2",
+ "react-native-screens": "~3.8.0",
+ "react-native-web": "0.17.1",
+ "socket.io-client": "^4.4.0"
},
"devDependencies": {
"@babel/core": "^7.12.9"