feat(ws): setup the WebSocket client

Author: uqmessias

App.js

@@ -16,70 +16,14 @@ import {
   StatusBar,
 } from 'react-native';
 
-import {
-  Header,
-  LearnMoreLinks,
-  Colors,
-  DebugInstructions,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import {Header, Colors} from 'react-native/Libraries/NewAppScreen';
 
-const App: () => React$Node = () => {
-  return (
-    <>
-      <StatusBar barStyle="dark-content" />
-      <SafeAreaView>
-        <ScrollView
-          contentInsetAdjustmentBehavior="automatic"
-          style={styles.scrollView}>
-          <Header />
-          {global.HermesInternal == null ? null : (
-            <View style={styles.engine}>
-              <Text style={styles.footer}>Engine: Hermes</Text>
-            </View>
-          )}
-          <View style={styles.body}>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Step One</Text>
-              <Text style={styles.sectionDescription}>
-                Edit <Text style={styles.highlight}>App.js</Text> to change this
-                screen and then come back to see your edits.
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>See Your Changes</Text>
-              <Text style={styles.sectionDescription}>
-                <ReloadInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Debug</Text>
-              <Text style={styles.sectionDescription}>
-                <DebugInstructions />
-              </Text>
-            </View>
-            <View style={styles.sectionContainer}>
-              <Text style={styles.sectionTitle}>Learn More</Text>
-              <Text style={styles.sectionDescription}>
-                Read the docs to discover what to do next:
-              </Text>
-            </View>
-            <LearnMoreLinks />
-          </View>
-        </ScrollView>
-      </SafeAreaView>
-    </>
-  );
-};
+import {format} from 'date-fns';
 
 const styles = StyleSheet.create({
   scrollView: {
     backgroundColor: Colors.lighter,
   },
-  engine: {
-    position: 'absolute',
-    right: 0,
-  },
   body: {
     backgroundColor: Colors.white,
   },
@@ -98,17 +42,56 @@ const styles = StyleSheet.create({
     fontWeight: '400',
     color: Colors.dark,
   },
-  highlight: {
-    fontWeight: '700',
-  },
-  footer: {
-    color: Colors.dark,
-    fontSize: 12,
-    fontWeight: '600',
-    padding: 4,
-    paddingRight: 12,
-    textAlign: 'right',
-  },
 });
 
+const App: () => React$Node = () => {
+  const [time, setTime] = React.useState(undefined);
+  const handleMessage = React.useCallback(({data}) => {
+    try {
+      const date = new Date(data);
+      setTime(date);
+    } catch (err) {
+      console.warn('error data', {data});
+    }
+  }, []);
+
+  React.useEffect(() => {
+    const ws = new WebSocket('ws://localhost:8080');
+    ws.onopen = async () => {
+      console.warn('open');
+    };
+    ws.onmessage = handleMessage;
+    ws.onerror = err => {
+      console.warn('onerror', {err});
+    };
+    ws.onclose = () => {
+      console.warn('closed');
+    };
+
+    return ws.close.bind(ws);
+  }, [handleMessage]);
+  return (
+    <>
+      <StatusBar barStyle="dark-content" />
+      <SafeAreaView>
+        <ScrollView
+          contentInsetAdjustmentBehavior="automatic"
+          style={styles.scrollView}>
+          <Header />
+          <View style={styles.body}>
+            {!!time && (
+              <View style={styles.sectionContainer}>
+                <Text style={styles.sectionTitle}>Timer</Text>
+                <Text style={styles.sectionDescription}>
+                  {format(time, 'yyyy/MM/dd H:mm:ss.SSS') + ' '}
+                </Text>
+              </View>
+            )}
+          </View>
+        </ScrollView>
+      </SafeAreaView>
+    </>
+  );
+};
+
 export default App;

README.md

@@ -13,3 +13,30 @@ After you have installed it, you need to start the `WebSocket` and you can do th
 # it means the server is running on "ws://localhost:8080"
 deno --allow-net ./web-socket-server/index.ts
 ```
+
+## Running WebSocket client with [React Native](https://facebook.github.io/react-native/)
+
+### Prerequirements
+
+In order to run this, you must have the React Native installed and configured and `yarn` (or `npm` installed).
+
+### Installing
+
+Before installing the app, you need to have a device or emulator connected to your machine and run:
+
+```bash
+# To install all the dependencies
+yarn # Or "npm install"
+# To install the app on the device or emulator
+yarn android # or "npm run android" or even "yarn ios" ("npm ios") for iOS
+# Now wee need to redirect all calls from device "localhost:8080" to our machine "localhost:8080"
+adb reverse tcp:8080 tcp:8080
+```
+
+If the `WebSocket` client didn't connect, try to reload your app by shaking your phone and pressing "Reload" or:
+
+```bash
+# Only valid for Android devices/emulators
+adb shell input text "RR"
+```
+