feat: render benchmark results in app (#1)

Author: dratwas

example/index.tsx

@@ -1,13 +1,123 @@
 import '@bacons/text-decoder/install'
 
-import { AppRegistry, View } from 'react-native'
+import { useCallback, useState } from 'react'
+import { AppRegistry } from 'react-native'
+import { ActivityIndicator, Button, StyleSheet, Text, View } from 'react-native'
 import { WebSocket as FastWebSocket } from 'react-native-fast-ws'
 
+type Result = {
+  outgoingTime: number
+  incomingTime: number
+  incomingFirstMessageTime: number
+}
+
 function App() {
-  return <View />
+  return (
+    <View style={styles.container}>
+      <TestCase payload="Hello World" title="Test String" />
+      <TestCase payload={new TextEncoder().encode('Hello World')} title="Test Binary" />
+    </View>
+  )
 }
 
-AppRegistry.registerComponent('NitroPlayground', () => App)
+function Results({
+  fastResults,
+  wsResults,
+}: {
+  title: string
+  fastResults: Result
+  wsResults: Result
+}) {
+  return (
+    <View>
+      <View style={styles.resultRowContainer}>
+        <Text style={styles.resultItem}> </Text>
+        <Text style={styles.resultItem}>{`FastWS`}</Text>
+        <Text style={styles.resultItem}>{`WebSocket`}</Text>
+      </View>
+      <ResultsRow
+        title="Sending (ms)"
+        fastResult={fastResults.outgoingTime}
+        wsResult={wsResults.outgoingTime}
+      />
+      <ResultsRow
+        title="Received (ms)"
+        fastResult={fastResults.incomingTime}
+        wsResult={wsResults.incomingTime}
+      />
+      <ResultsRow
+        title="TFM (ms)"
+        fastResult={fastResults.incomingFirstMessageTime}
+        wsResult={wsResults.incomingFirstMessageTime}
+      />
+    </View>
+  )
+}
+
+function ResultsRow({
+  title,
+  fastResult,
+  wsResult,
+}: {
+  title: string
+  fastResult: number
+  wsResult: number
+}) {
+  const isFastBetter = fastResult < wsResult
+  return (
+    <View style={styles.resultRowContainer}>
+      <Text style={styles.resultItem}>{title}</Text>
+      <ResultItem result={fastResult} isBetter={isFastBetter} />
+      <ResultItem result={wsResult} isBetter={!isFastBetter} />
+    </View>
+  )
+}
+
+function ResultItem({ result, isBetter }: { result: number; isBetter: boolean }) {
+  return (
+    <Text
+      style={[styles.resultItem, isBetter ? styles.betterResult : styles.worseResult]}
+    >{`${result.toFixed(2)}`}</Text>
+  )
+}
+
+function TestCase({ payload, title }: { payload: string | ArrayBuffer; title: string }) {
+  const [fastResult, setFastResult] = useState<Result | null>(null)
+  const [wsResult, setWsResult] = useState<Result | null>(null)
+  const [loading, setLoading] = useState(false)
+  const runTest = useCallback(async () => {
+    if (loading) {
+      return
+    }
+    setLoading(true)
+    const fastRes = await testWebsocketMessages({
+      // @ts-ignore
+      Ws: FastWebSocket,
+      outgoing: OUTGOING,
+      incoming: INCOMING,
+      payload,
+    })
+    setFastResult(fastRes)
+    const wsRes = await testWebsocketMessages({
+      Ws: WebSocket,
+      outgoing: OUTGOING,
+      incoming: INCOMING,
+      payload,
+    })
+    setWsResult(wsRes)
+    setLoading(false)
+  }, [loading])
+
+  return (
+    <View>
+      <Button onPress={runTest} title={title} />
+      {fastResult && wsResult && !loading && (
+        <Results fastResults={fastResult} wsResults={wsResult} title={title} />
+      )}
+      {loading && <ActivityIndicator />}
+    </View>
+  )
+}
 
 const testWebsocketMessages = async (opts: {
   Ws: new (uri: string) => WebSocket
@@ -66,79 +176,23 @@ const testWebsocketMessages = async (opts: {
 const INCOMING = 10000
 const OUTGOING = 10000
 
-setTimeout(async () => {
-  const results: [string, string, number, number, number][] = []
-
-  const resFastBinary = await testWebsocketMessages({
-    // @ts-ignore
-    Ws: FastWebSocket,
-    outgoing: OUTGOING,
-    incoming: INCOMING,
-    payload: new TextEncoder().encode('Hello World'),
-  })
-
-  results.push([
-    'FastWS',
-    'Binary',
-    resFastBinary.outgoingTime,
-    resFastBinary.incomingTime,
-    resFastBinary.incomingFirstMessageTime,
-  ])
-
-  const resWebSocketBinary = await testWebsocketMessages({
-    Ws: WebSocket,
-    outgoing: OUTGOING,
-    incoming: INCOMING,
-    payload: new TextEncoder().encode('Hello World'),
-  })
-
-  results.push([
-    'WebSocket',
-    'Binary',
-    resWebSocketBinary.outgoingTime,
-    resWebSocketBinary.incomingTime,
-    resWebSocketBinary.incomingFirstMessageTime,
-  ])
-
-  const resFastString = await testWebsocketMessages({
-    // @ts-ignore
-    Ws: FastWebSocket,
-    outgoing: OUTGOING,
-    incoming: INCOMING,
-    payload: 'Hello World',
-  })
-
-  results.push([
-    'FastWS',
-    'String',
-    resFastString.outgoingTime,
-    resFastString.incomingTime,
-    resFastString.incomingFirstMessageTime,
-  ])
-
-  const resWebSocketString = await testWebsocketMessages({
-    Ws: WebSocket,
-    outgoing: OUTGOING,
-    incoming: INCOMING,
-    payload: 'Hello World',
-  })
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 100,
+  },
+  resultRowContainer: {
+    flexDirection: 'row',
+    padding: 10,
+  },
+  resultItem: {
+    flex: 1,
+  },
+  betterResult: {
+    backgroundColor: 'green',
+  },
+  worseResult: {
+    backgroundColor: 'red',
+  },
+})
 
-  results.push([
-    'WebSocket',
-    'String',
-    resWebSocketString.outgoingTime,
-    resWebSocketString.incomingTime,
-    resWebSocketString.incomingFirstMessageTime,
-  ])
-
-  // Print the table header
-  console.log('Type       | Payload | Sending (ms) | Received (ms) | TFM (ms)')
-  console.log('-----------------------------------------------------------------')
-
-  // Print each row of results
-  results.forEach((result) => {
-    console.log(
-      `${result[0].padEnd(10)} | ${result[1].padEnd(7)} | ${result[2].toFixed(2).padEnd(12)} | ${result[3].toFixed(2).padEnd(13)} | ${result[4].toFixed(2).padEnd(8)}`
-    )
-  })
-}, 1000)
+AppRegistry.registerComponent('NitroPlayground', () => App)