Merge pull request #21 from 2d-rpg/feature/change_to_websocket

ルーム一覧の取得とルーム作成およびルーム入室をgraphQLからwebsocketでできるように変更
2d-rpg · Jan 24, 2021 · eceee41 · eceee41
2 parents 98026cd + c9b20ab
commit eceee41
Show file tree

Hide file tree

Showing 5 changed files with 235 additions and 160 deletions.
diff --git a/App.tsx b/App.tsx
@@ -98,8 +98,8 @@ export default function App(): ReactElement {
 
 export type RootStackParamList = {
   Home: undefined;
-  Room: { id: number };
-  CreateRoom: undefined;
+  Room: { roomid: string; endpoint: string };
+  CreateRoom: { endpoint: string };
   RoomList: undefined;
   EditDeck: undefined;
   Preferences: undefined;

diff --git a/src/screens/create-room/index.tsx b/src/screens/create-room/index.tsx
@@ -1,44 +1,54 @@
-import React, { ReactElement } from "react";
-import {
-  StyleSheet,
-  View,
-  Text,
-  Button,
-  ScrollView,
-  TextInput,
-} from "react-native";
+import React, { ReactElement, useEffect, useRef } from "react";
+import { StyleSheet, View, Text } from "react-native";
+import { Button, Input } from "react-native-elements";
 import { StackNavigationProp } from "@react-navigation/stack";
+import { RouteProp } from "@react-navigation/native";
 import { RootStackParamList } from "../../../App";
-import { gql, useMutation } from "@apollo/client";
 import { Formik } from "formik";
 import * as Yup from "yup";
 
-const CREATE_ROOM = gql`
-  mutation CreateRoom($name: String!, $player: String!) {
-    createRoom(name: $name, player: $player) {
-      id
-      name
-      players
-    }
-  }
-`;
-
 export default function CreateRoomScreen({
+  route,
   navigation,
 }: {
+  route: CreateRoomScreenRouteProp;
   navigation: CreateRoomScreenNavigationProp;
 }): ReactElement {
-  const [createRoom] = useMutation(CREATE_ROOM, {
-    onCompleted: (data) => {
-      console.log(data.createRoom.id);
-      navigation.navigate("Room", { id: data.createRoom.id });
-    },
-  });
+  // const [createRoom] = useMutation(CREATE_ROOM, {
+  //   onCompleted: (data) => {
+  //     console.log(data.createRoom.id);
+  //     navigation.navigate("Room", { id: data.createRoom.id });
+  //   },
+  // });
+  const { endpoint } = route.params;
+  const websocket = useRef<WebSocket | null>(null);
+
+  useEffect(() => {
+    websocket.current = new WebSocket(`ws://${endpoint}/ws`);
+    websocket.current.onmessage = (event) => {
+      if (event.data.startsWith("{")) {
+        const json = JSON.parse(event.data);
+        if (json.status === "ok") {
+          navigation.navigate("Room", {
+            roomid: json.data.id,
+            endpoint: endpoint,
+          });
+        }
+      }
+    };
+    return () => {
+      if (websocket.current != null) {
+        websocket.current.close();
+      }
+    };
+  }, []);
 
   const onSubmit = async (values: { name: string }) => {
     // データ送信
     console.log(values);
-    createRoom({ variables: { name: values.name, player: "piypiyo" } });
+    if (websocket.current != null) {
+      websocket.current.send(`/create ${values.name}`);
+    }
   };
 
   const schema = Yup.object().shape({
@@ -48,51 +58,50 @@ export default function CreateRoomScreen({
       .required("ルーム名を入力してください"),
   });
   return (
-    <ScrollView contentContainerStyle={styles.container}>
-      <View>
-        <Formik
-          initialValues={{
-            name: "",
-          }}
-          validateOnMount
-          validationSchema={schema}
-          onSubmit={(values) => onSubmit(values)}
-        >
-          {({
-            handleSubmit,
-            handleChange,
-            handleBlur,
-            isValid,
-            isSubmitting,
-            values,
-            errors,
-            touched,
-          }) => (
-            <>
-              <View>
-                {errors.name && touched.name ? (
-                  <Text>{errors.name}</Text>
-                ) : null}
-                <TextInput
-                  value={values.name}
-                  onChangeText={handleChange("name")}
-                  onBlur={handleBlur("name")}
-                  placeholder="ルーム名を入力してください"
-                />
-              </View>
-              <Button
-                title="Submit"
-                onPress={() => handleSubmit()}
-                disabled={!isValid || isSubmitting}
-              />
-            </>
-          )}
-        </Formik>
-      </View>
-    </ScrollView>
+    <View style={styles.container}>
+      <Formik
+        initialValues={{
+          name: "",
+        }}
+        validateOnMount
+        validationSchema={schema}
+        onSubmit={(values) => onSubmit(values)}
+      >
+        {({
+          handleSubmit,
+          handleChange,
+          handleBlur,
+          isValid,
+          isSubmitting,
+          values,
+          errors,
+          touched,
+        }) => (
+          <>
+            <View>
+              {errors.name && touched.name ? <Text>{errors.name}</Text> : null}
+            </View>
+            <Input
+              label="新規ルーム名"
+              value={values.name}
+              onChangeText={handleChange("name")}
+              onBlur={handleBlur("name")}
+              placeholder="ルーム名を入力してください"
+            />
+            <Button
+              title="Submit"
+              onPress={() => handleSubmit()}
+              disabled={!isValid || isSubmitting}
+              style={styles.button}
+            />
+          </>
+        )}
+      </Formik>
+    </View>
   );
 }
 
+type CreateRoomScreenRouteProp = RouteProp<RootStackParamList, "CreateRoom">;
 type CreateRoomScreenNavigationProp = StackNavigationProp<
   RootStackParamList,
   "CreateRoom"
@@ -105,4 +114,5 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
   },
+  button: { margin: 10 },
 });
diff --git a/src/screens/home/index.tsx b/src/screens/home/index.tsx
@@ -1,10 +1,10 @@
 import { StatusBar } from "expo-status-bar";
 import React, { ReactElement, useState, useEffect } from "react";
-import { StyleSheet, View, TextInput } from "react-native";
+import { StyleSheet, View } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { Text } from "react-native-elements";
+import { Input } from "react-native-elements";
 
-const DEFAULT_ENDPOINT = "127.0.0.1";
+export const DEFAULT_ENDPOINT = "127.0.0.1";
 export default function HomeScreen(): ReactElement {
   const [endpoint, setEndpoint] = useState(DEFAULT_ENDPOINT);
   useEffect(() => {
@@ -34,8 +34,8 @@ export default function HomeScreen(): ReactElement {
   // TODO ユーザーに関する情報（ユーザーアイコン，ユーザーネーム）の実装
   return (
     <View style={styles.container}>
-      <Text>サーバーアドレス</Text>
-      <TextInput
+      <Input
+        label="サーバーアドレス"
         style={styles.input}
         onChangeText={(input) => setEndpoint(input)}
         value={endpoint}
@@ -52,7 +52,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
   },
   input: {
-    width: "50%",
     borderWidth: 1,
     borderColor: "#ccc",
   },