From ee1da23427e73b77be86dde1af6ecfffd5da554a Mon Sep 17 00:00:00 2001 From: nyatadecocoa Date: Sun, 10 Jan 2021 08:59:56 +0000 Subject: [PATCH 01/20] add websocket --- App.tsx | 2 +- src/screens/room-list/index.tsx | 87 ++++++++++++++++++--------------- 2 files changed, 48 insertions(+), 41 deletions(-) diff --git a/App.tsx b/App.tsx index 86a21ae..43dfbb4 100644 --- a/App.tsx +++ b/App.tsx @@ -98,7 +98,7 @@ export default function App(): ReactElement { export type RootStackParamList = { Home: undefined; - Room: { id: number }; + Room: { name: string }; CreateRoom: undefined; RoomList: undefined; EditDeck: undefined; diff --git a/src/screens/room-list/index.tsx b/src/screens/room-list/index.tsx index 3b77f46..9840a94 100644 --- a/src/screens/room-list/index.tsx +++ b/src/screens/room-list/index.tsx @@ -3,28 +3,10 @@ import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native"; import { SearchBar, ListItem } from "react-native-elements"; import { StackNavigationProp } from "@react-navigation/stack"; import { RootStackParamList } from "../../../App"; -import { gql, useQuery, useMutation } from "@apollo/client"; import { FloatingAction } from "react-native-floating-action"; import { Icon } from "react-native-elements"; - -const ROOMS_QUERY = gql` - query { - rooms { - id - name - } - } -`; - -const ENTER_ROOM = gql` - mutation EnterRoom($player: String!, $roomId: Int!) { - enterRoom(player: $player, roomId: $roomId) { - id - name - players - } - } -`; +import { useIsFocused } from "@react-navigation/native"; +import AsyncStorage from "@react-native-async-storage/async-storage"; export default function RoomListScreen({ navigation, @@ -35,31 +17,58 @@ export default function RoomListScreen({ const [displayData, setDisplayData] = useState([]); const [result, setResult] = useState([]); const [text, setText] = useState(""); - const { data, loading, error } = useQuery(ROOMS_QUERY); - const [enterRoom] = useMutation(ENTER_ROOM, { - onCompleted: (data) => { - console.log(data.enterRoom.id); - navigation.navigate("Room", { id: data.enterRoom.id }); - }, - }); + const isFocused = useIsFocused(); + const [endpoint, setEndPoint] = useState("127.0.0.1"); + const [data, setData] = useState([]); + // const { data, loading, error } = useQuery(ROOMS_QUERY); + // const [enterRoom] = useMutation(ENTER_ROOM, { + // onCompleted: (data) => { + // console.log(data.enterRoom.id); + // navigation.navigate("Room", { id: data.enterRoom.id }); + // }, + // }); + + useEffect(() => { + if (isFocused) { + setLoading(true); + (async () => { + const endpointFromPreferences = await AsyncStorage.getItem("@endpoint"); + if (endpointFromPreferences != null) { + setEndPoint(endpointFromPreferences); + } + const websocket = new WebSocket(`ws://${endpoint}/ws`); + websocket.onopen = () => { + websocket.send("/list"); + }; + websocket.onmessage = (event) => { + console.log(event.data); + setData(JSON.parse(event.data).data); + }; + })(); + } + }, [isFocused]); useEffect(() => { if (typeof data != "undefined") { - setDisplayData(data.rooms); - setResult(data.rooms); - setLoading(loading); + setDisplayData(data); + setResult(data); + setLoading(false); } }, [data]); - const handlePress: (id: string) => void = (id) => { - enterRoom({ variables: { player: "", roomId: parseInt(id) } }); + const handlePress: (name: string) => void = (name) => { + const websocket = new WebSocket(`ws://${endpoint}/ws`); + websocket.onopen = () => { + websocket.send(`/join ${name}`); + navigation.navigate("Room", { name: name }); + }; }; const searchFilter = (text: string) => { setLoading(true); setText(text); - const newData = result.filter((item: { name: string; id: string }) => { - const itemData = `${item.name.toUpperCase()} ${item.id.toUpperCase()}`; + const newData = result.filter((item: { name: string }) => { + const itemData = `${item.name.toUpperCase()}`; const textData = text.toUpperCase(); @@ -70,14 +79,14 @@ export default function RoomListScreen({ setLoading(false); }; - const keyExtractor = (_item: { name: string; id: string }, index: number) => + const keyExtractor = (_item: { name: string }, index: number) => index.toString(); - const renderItem = ({ item }: { item: { name: string; id: string } }) => ( - handlePress(item.id)}> + const renderItem = ({ item }: { item: { name: string } }) => ( + handlePress(item.name)}> {item.name} - {item.id} + {/* {item.id} */} @@ -91,8 +100,6 @@ export default function RoomListScreen({ }, ]; - if (error) console.log(error.message); - return ( Date: Sun, 10 Jan 2021 10:07:40 +0000 Subject: [PATCH 02/20] change to websocket --- App.tsx | 4 +- src/screens/create-room/index.tsx | 44 ++++++++++++--------- src/screens/room-list/index.tsx | 34 ++++++++++------ src/screens/room/index.tsx | 64 +++++++++++++++++-------------- 4 files changed, 85 insertions(+), 61 deletions(-) diff --git a/App.tsx b/App.tsx index 43dfbb4..30c38b9 100644 --- a/App.tsx +++ b/App.tsx @@ -98,8 +98,8 @@ export default function App(): ReactElement { export type RootStackParamList = { Home: undefined; - Room: { name: string }; - CreateRoom: undefined; + Room: { roomname: 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 index b3c4cb9..26fb0c8 100644 --- a/src/screens/create-room/index.tsx +++ b/src/screens/create-room/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement } from "react"; +import React, { ReactElement, useEffect, useRef } from "react"; import { StyleSheet, View, @@ -8,37 +8,42 @@ import { TextInput, } from "react-native"; 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(null); + + useEffect(() => { + websocket.current = new WebSocket(`ws://${endpoint}/ws`); + 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(`/join ${values.name}`); + } }; const schema = Yup.object().shape({ @@ -93,6 +98,7 @@ export default function CreateRoomScreen({ ); } +type CreateRoomScreenRouteProp = RouteProp; type CreateRoomScreenNavigationProp = StackNavigationProp< RootStackParamList, "CreateRoom" diff --git a/src/screens/room-list/index.tsx b/src/screens/room-list/index.tsx index 9840a94..696f274 100644 --- a/src/screens/room-list/index.tsx +++ b/src/screens/room-list/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState, useEffect } from "react"; +import React, { ReactElement, useState, useEffect, useRef } from "react"; import { StyleSheet, View, FlatList, ActivityIndicator } from "react-native"; import { SearchBar, ListItem } from "react-native-elements"; import { StackNavigationProp } from "@react-navigation/stack"; @@ -20,6 +20,7 @@ export default function RoomListScreen({ const isFocused = useIsFocused(); const [endpoint, setEndPoint] = useState("127.0.0.1"); const [data, setData] = useState([]); + const websocket = useRef(null); // const { data, loading, error } = useQuery(ROOMS_QUERY); // const [enterRoom] = useMutation(ENTER_ROOM, { // onCompleted: (data) => { @@ -36,16 +37,25 @@ export default function RoomListScreen({ if (endpointFromPreferences != null) { setEndPoint(endpointFromPreferences); } - const websocket = new WebSocket(`ws://${endpoint}/ws`); - websocket.onopen = () => { - websocket.send("/list"); + websocket.current = new WebSocket(`ws://${endpoint}/ws`); + websocket.current.onopen = () => { + if (websocket.current != null) { + websocket.current.send("/list"); + } }; - websocket.onmessage = (event) => { + websocket.current.onmessage = (event) => { console.log(event.data); - setData(JSON.parse(event.data).data); + if (event.data.startsWith("{")) { + setData(JSON.parse(event.data).data); + } }; })(); } + return () => { + if (websocket.current != null) { + websocket.current.close(); + } + }; }, [isFocused]); useEffect(() => { @@ -57,11 +67,9 @@ export default function RoomListScreen({ }, [data]); const handlePress: (name: string) => void = (name) => { - const websocket = new WebSocket(`ws://${endpoint}/ws`); - websocket.onopen = () => { - websocket.send(`/join ${name}`); - navigation.navigate("Room", { name: name }); - }; + if (websocket.current != null) { + navigation.navigate("Room", { roomname: name, endpoint: endpoint }); + } }; const searchFilter = (text: string) => { @@ -122,7 +130,9 @@ export default function RoomListScreen({ overrideWithAction={true} actions={floadtingActions} color={"#03A9F4"} - onPressItem={() => navigation.navigate("CreateRoom")} + onPressItem={() => + navigation.navigate("CreateRoom", { endpoint: endpoint }) + } /> ); diff --git a/src/screens/room/index.tsx b/src/screens/room/index.tsx index 184a322..b5a4e0a 100644 --- a/src/screens/room/index.tsx +++ b/src/screens/room/index.tsx @@ -1,13 +1,17 @@ import React, { ReactElement, useRef, useEffect } from "react"; import { StyleSheet, View, Text, Animated, PanResponder } from "react-native"; // import { StackNavigationProp } from "@react-navigation/stack"; -// import { RouteProp } from "@react-navigation/native"; -// import { RootStackParamList } from "../../../App"; -import AsyncStorage from "@react-native-async-storage/async-storage"; +import { RouteProp } from "@react-navigation/native"; +import { RootStackParamList } from "../../../App"; -export default function RoomScreen(): ReactElement { +export default function RoomScreen({ + route, +}: { + route: RoomScreenRouteProp; +}): ReactElement { + const { roomname, endpoint } = route.params; const pan = useRef(new Animated.ValueXY()).current; - const socket = useRef(null); + const websocket = useRef(null); const panResponder = useRef( PanResponder.create({ onMoveShouldSetPanResponder: () => true, @@ -27,37 +31,41 @@ export default function RoomScreen(): ReactElement { }), onPanResponderRelease: () => { pan.flattenOffset(); - if (socket.current != null) { + if (websocket.current != null) { // ポジションをjsonとしてサーバに送信 - socket.current.send(JSON.stringify(pan)); + websocket.current.send(JSON.stringify(pan)); } }, }) ).current; useEffect(() => { - (async () => { - try { - const endpointFromPreferences = await AsyncStorage.getItem("@endpoint"); - if (endpointFromPreferences == null) { - socket.current = new WebSocket("ws://127.0.0.1/ws"); - } else { - socket.current = new WebSocket(`ws://${endpointFromPreferences}/ws`); + try { + websocket.current = new WebSocket(`ws://${endpoint}/ws`); + websocket.current.onopen = () => { + if (websocket.current != null) { + // ルーム入室 + websocket.current.send(`/join ${roomname}`); } - // イベント受け取り - socket.current.onmessage = (event) => { - console.log("received event:" + event.data); - if (event.data.startsWith("{")) { - // TODO サーバ側ですべてjson parsableになるよう実装 - const data = JSON.parse(event.data); - pan.setValue({ x: data.x, y: data.y }); - } - }; - } catch (error) { - // 設定読み込みエラー - console.log(error); + }; + // イベント受け取り + websocket.current.onmessage = (event) => { + console.log("received event:" + event.data); + if (event.data.startsWith("{")) { + // TODO サーバ側ですべてjson parsableになるよう実装 + const data = JSON.parse(event.data); + pan.setValue({ x: data.x, y: data.y }); + } + }; + } catch (error) { + // 設定読み込みエラー + console.log(error); + } + return () => { + if (websocket.current != null) { + websocket.current.close(); } - })(); + }; }, []); // TODO WebSocket接続エラーの対応 @@ -76,7 +84,7 @@ export default function RoomScreen(): ReactElement { ); } -// type RoomScreenRouteProp = RouteProp; +type RoomScreenRouteProp = RouteProp; // type RoomScreenNavigationProp = StackNavigationProp; const styles = StyleSheet.create({ From 375a19effd068be0c33673ee7bb2e842aa8291e4 Mon Sep 17 00:00:00 2001 From: nyatadecocoa Date: Sun, 10 Jan 2021 10:29:26 +0000 Subject: [PATCH 03/20] add navigate from createroom to room --- src/screens/create-room/index.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/screens/create-room/index.tsx b/src/screens/create-room/index.tsx index 26fb0c8..70bb05c 100644 --- a/src/screens/create-room/index.tsx +++ b/src/screens/create-room/index.tsx @@ -43,6 +43,10 @@ export default function CreateRoomScreen({ console.log(values); if (websocket.current != null) { websocket.current.send(`/join ${values.name}`); + navigation.navigate("Room", { + roomname: values.name, + endpoint: endpoint, + }); } }; From cf599778fc98198ffe3c27db0987618128defae7 Mon Sep 17 00:00:00 2001 From: nyatadecocoa Date: Sun, 10 Jan 2021 14:39:19 +0000 Subject: [PATCH 04/20] fix first unable to send websocket --- src/screens/create-room/index.tsx | 24 ++++------ src/screens/home/index.tsx | 9 ++-- src/screens/room-list/index.tsx | 76 +++++++++++++++++++------------ 3 files changed, 61 insertions(+), 48 deletions(-) diff --git a/src/screens/create-room/index.tsx b/src/screens/create-room/index.tsx index 70bb05c..a77e4f2 100644 --- a/src/screens/create-room/index.tsx +++ b/src/screens/create-room/index.tsx @@ -1,12 +1,6 @@ import React, { ReactElement, useEffect, useRef } from "react"; -import { - StyleSheet, - View, - Text, - Button, - ScrollView, - TextInput, -} from "react-native"; +import { StyleSheet, View, Text, ScrollView } 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"; @@ -82,17 +76,18 @@ export default function CreateRoomScreen({ {errors.name && touched.name ? ( {errors.name} ) : null} - +