如何在 React-Native 中没有互联网的情况下通过 Wifi 发送和接收数据

Question

我正在 React-Native 上开发一款游戏，可以完全离线运行，无需互联网连接，

该游戏将是多人 1vs1 游戏，玩家将通过 Wifi 热点（也称为 wifi Direct）加入该游戏还允许用户互相聊天

而这一切都应该在没有互联网的情况下通过使用 wifi 来完成。

我尝试过“React-Native-Wifi-Hotspot”，但没有关于如何发送和接收数据的文档

我想通过 2 个连接的设备之间的 WiFi 热点发送和接收对象/数组。对等

我还阅读了有关react-native-wifi-p2p库的内容，但它的文档说我们需要本地服务器或我真的不确定如何做到这一点的东西。

Answer 1

因此，我会尽可能全面地保留这个答案。我将分享我构建的一个小型反应本机应用程序，以帮助理解我们到底需要做什么。\n这个答案是对@\xc3\x9f\xc3\xa3l\xc3\xa3j\xc3\xae 的工作扩展 \ 答案的工作扩展。

\n

我们需要的库：

\n

\n
• 反应本机 TCP
\n
• 反应本机网络信息
\n

\n

// In App.js\n\nimport {createAppContainer} from \'react-navigation\';\nimport {createStackNavigator} from \'react-navigation-stack\';\nimport ClientScreen from \'./src/screens/ClientScreen\';\nimport ServerScreen from \'./src/screens/ServerScreen\';\n\n\nconst navigator = createStackNavigator({\n  Server: ServerScreen,\n  Client: ClientScreen\n});\n\n\n\nexport default createAppContainer(navigator);\n\n

\n

// In ClientScreen.js\n\nimport React, {useState, useEffect} from \'react\';\nimport {View, Text, Button, FlatList, TextInput} from \'react-native\';\nimport { NetworkInfo } from \'react-native-network-info\';\nvar net = require(\'react-native-tcp\');\n\n\nconst createClient = (ip, chats, setChats) => {\n    const client = net.createConnection(6666,ip, () => {\n        console.log(\'opened client on \' + JSON.stringify(client.address()));\n        // client.write(\'Hello, server! Love, Client.\');\n      });\n  \n      client.on(\'data\', (data) => {\n        setChats([...chats, {id:chats.length+1, msg:data}]);\n        // console.log(\'Client Received: \' + data);\n  \n        // client.destroy(); // kill client after server\'s response\n        // this.server.close();\n      });\n  \n      client.on(\'error\', (error) => {\n        console.log(\'client error \' + error);\n      });\n  \n      client.on(\'close\', () => {\n        console.log(\'client close\');\n      });\n      return client;\n};\n\n\nconst ClientScreen = ({navigation}) => {\n\n    const [client, setClient] = useState(null);\n    const [chats, setChats] = useState([]);\n\n    useEffect(async () => {\n        let ip = await NetworkInfo.getIPV4Address(); //await NetworkInfo.getGatewayIPAddress();\n        setClient(createClient(ip));\n\n        return () => {};\n    }, []);\n    return <View>\n        <Text>Client Screen</Text>\n        <Button title="Stop Client" onPress={() => {\n            if(client){\n                client.destroy();\n                setClient(null);\n            }\n        }}/>\n        {client ? <Text>Client is on</Text>: null}\n        <FlatList\n            data={chats}\n            renderItem={({item}) =>{\n                return <Text style={{margin:10, fontSize:20}}>{item.msg}</Text>;\n            }}\n            keyExtractor={item => item.id}\n        />\n        <TextInput placeholder="Type a message" placeholderTextColor="black" style={{margin:10, borderWidth:2, color:\'black\'}} onSubmitEditing={({nativeEvent: {text}}) => {\n            if(client){\n                client.write(JSON.stringify({msg:text, id:1}));\n            }\n        }}/>\n    </View>;\n};\n\n\n\nexport default ClientScreen;\n

\n

// In ServerScreen.js\n\nimport React, {useState} from \'react\';\nimport {View, Text, Button, StyleSheet, FlatList} from \'react-native\';\nimport { NetworkInfo } from \'react-native-network-info\';\nvar net = require(\'react-native-tcp\');\n\n\nconst createServer = (chats, setChats) => {\n    const server = net.createServer((socket) => {\n        console.log(\'server connected on \' + socket.address().address);\n    \n        socket.on(\'data\', (data) => {\n          let response = JSON.parse(data);\n            setChats([...chats, {id:chats.length+1, msg:response.msg}]);\n        //   console.log(\'Server Received: \' + data);\n        //   socket.write(\'Echo server\\r\\n\');\n        });\n    \n        socket.on(\'error\', (error) => {\n          console.log(\'error \' + error);\n        });\n    \n        socket.on(\'close\', (error) => {\n          console.log(\'server client closed \' + (error ? error : \'\'));\n        });\n      }).listen(6666, () => {\n        console.log(\'opened server on \' + JSON.stringify(server.address()));\n      });\n    \n      server.on(\'error\', (error) => {\n        console.log(\'error \' + error);\n      });\n    \n      server.on(\'close\', () => {\n        console.log(\'server close\');\n      });\n    \n    return server;\n};\n\n\nconst ServerScreen = ({navigation}) => {\n    const [server, setServer] = useState(null);\n    const [chats, setChats] = useState([]);\n    const [ip, setIp] = useState(\'\');\n    \n    return <View>\n        {ip.length > 0? <Text>Server Screen: {ip}</Text>: <Text>Server Screen</Text>}\n        <Button title="Start Server" onPress={async () => {\n            if(!server)\n              setServer(createServer(chats, setChats));\n            try{\n              let temp_ip = await NetworkInfo.getIPV4Address();\n              setIp(temp_ip);\n            }catch(e){\n              console.log(e.message);\n            }\n        }}/>\n        <Button title="Stop Server" onPress={() => {\n            if(server){\n                server.close();\n                setServer(null);\n            }\n        }}/>\n        <Button title="Go to Client Screen" onPress={() => navigation.navigate(\'Client\')}/>\n        {server ? <Text>Server is on</Text>: null}\n        <FlatList\n            data={chats}\n            renderItem={({item}) =>{\n                return <Text style={{margin:10, fontSize:20}}>{item.msg}</Text>;\n            }}\n            keyExtractor={item => item.id}\n        />\n    </View>;\n};\n\nconst styles = StyleSheet.create({});\n\nexport default ServerScreen;\n

\n

首先，如何运行这个应用程序。

\n

\n
• 构建并将其安装到物理设备或模拟器中。
\n
• 首先，转到 ServerScreen。
\n
• 在服务器屏幕中按Start Server按钮。您将能够在屏幕中看到 IP 地址弹出。
\n
• 现在导航到 ClientScreen。一旦您导航到此屏幕，客户端套接字就会自动调用。在这里您可以看到一个按钮和一个文本输入字段。在字段中输入一些消息并从键盘提交。按Stop Client按钮以避免任何错误。
\n
• 返回到 ServerScreen，您将能够看到您在 ClientScreen 中键入的消息。
\n

\n

现在，这是如何通过本地网络在两个设备之间进行通信的最小示例。但您可能想知道，这个应用程序只能让我们在 2 个屏幕之间进行通信，对吗？

\n

老实说，确实如此，到目前为止，我们只能使用此应用程序在 2 个屏幕之间进行通信，但是，我们用于使其工作的底层机制与我们在 2 个设备之间进行通信时所做的完全相同。

\n

那么，如何针对不同的设备进行操作呢？

\n

假设我们有 2 个设备，即 A 和 B。我们想要在这两个设备之间建立连接。首先，我们打开A的wifi热点，并将B连接到该wifi。

\n

现在，在设备 A 上，我们将转到 ServerScreen 并启动服务器。在设备 B 上，转到 ClientScreen，您将看到出现“客户端已打开”信息，但是如果您在文本字段中输入一些消息并提交，您将不会在设备 A 上看到任何消息，这是因为要使其正常工作，我们需要对组件文件进行一些更改ClientScreen.js。

\n

更改自 =>

\n

useEffect(async () => {\n        let ip = await NetworkInfo.getIPV4Address(); //await NetworkInfo.getGatewayIPAddress();\n        setClient(createClient(ip));\n\n        return () => {};\n    }, []);\n

\n

到 =>

\n

useEffect(async () => {\n        let ip = await NetworkInfo.getGatewayIPAddress();\n        setClient(createClient(ip));\n\n        return () => {};\n    }, []);\n

\n

它的作用是，我们想要将设备 B 连接到设备 A 的 IP 是设备 B 的网关的 IP（记住，我们将 B 连接到 A 的热点）。\n就是这样。

\n

现在只需再次构建并按照前面提到的步骤操作即可。一旦您输入消息并通过 B 上的 ClientScreen 提交，您将能够在 A 的 ServerScreen 上看到它。

\n

希望这对那些在设备之间建立本地套接字连接有困难的人有所帮助。\n请注意，您肯定可以在一台服务器上拥有多个客户端，并在 ServerScreen 和相同的代码库上进行一些小的行为更改。

\n

附言。我将确保经常检查此答案，以便您遇到的任何问题都可以发表评论，我可以尽快回复您。

\n

编辑：如果您想从主系统（热点）向客户端系统发送消息，那么您可以按照这个答案/sf/answers/5121668821/。

\n

Answer 2

您可以使用这个名为React Native TCP 的库，它能够通过 wifi 发送和接收数据。

它是React Native 中节点的网络API。

它与节点的 net API 几乎相同，您可以使用 net 的文档。关于如何做到这一点的建议是，您可以设置一个由两个按钮一致的连接页面。然后为一个定义热点创建功能，为另一个定义热点连接功能。