如何在不使用Internet的情况下通过Wifi发送和接收数据

Question

我正在开发一个关于React的游戏--本机完全脱机工作，不需要互联网连接，

这款游戏将是多人游戏1vs1，玩家将通过Wifi Hotspot (也称为wifi Direct)加入游戏，游戏还将允许用户相互聊天

所有这些都应该通过使用wifi来完成，而不需要使用互联网。

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

我想在两个连接的设备之间通过wifi热点发送和接收对象/阵列。P2P

我也读过react原生wifi-P2P库，但是它的文档显示我们需要一个本地服务器或其他什么东西，我真的不知道如何做到这一点。

Answer 1

因此，我会尽量全面地回答这个问题。我将分享一个小的反应本机应用程序，我构建，以帮助理解我们到底需要做什么。这个答案是对@l j.答案的一个工作扩展。

我们需要的库：

• 反应本机tcp
• 反应-本机-网络信息

// In App.js

import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import ClientScreen from './src/screens/ClientScreen';
import ServerScreen from './src/screens/ServerScreen';


const navigator = createStackNavigator({
  Server: ServerScreen,
  Client: ClientScreen
});



export default createAppContainer(navigator);

// In ClientScreen.js

import React, {useState, useEffect} from 'react';
import {View, Text, Button, FlatList, TextInput} from 'react-native';
import { NetworkInfo } from 'react-native-network-info';
var net = require('react-native-tcp');


const createClient = (ip, chats, setChats) => {
    const client = net.createConnection(6666,ip, () => {
        console.log('opened client on ' + JSON.stringify(client.address()));
        // client.write('Hello, server! Love, Client.');
      });
  
      client.on('data', (data) => {
        setChats([...chats, {id:chats.length+1, msg:data}]);
        // console.log('Client Received: ' + data);
  
        // client.destroy(); // kill client after server's response
        // this.server.close();
      });
  
      client.on('error', (error) => {
        console.log('client error ' + error);
      });
  
      client.on('close', () => {
        console.log('client close');
      });
      return client;
};


const ClientScreen = ({navigation}) => {

    const [client, setClient] = useState(null);
    const [chats, setChats] = useState([]);

    useEffect(async () => {
        let ip = await NetworkInfo.getIPV4Address(); //await NetworkInfo.getGatewayIPAddress();
        setClient(createClient(ip));

        return () => {};
    }, []);
    return <View>
        <Text>Client Screen</Text>
        <Button title="Stop Client" onPress={() => {
            if(client){
                client.destroy();
                setClient(null);
            }
        }}/>
        {client ? <Text>Client is on</Text>: null}
        <FlatList
            data={chats}
            renderItem={({item}) =>{
                return <Text style={{margin:10, fontSize:20}}>{item.msg}</Text>;
            }}
            keyExtractor={item => item.id}
        />
        <TextInput placeholder="Type a message" placeholderTextColor="black" style={{margin:10, borderWidth:2, color:'black'}} onSubmitEditing={({nativeEvent: {text}}) => {
            if(client){
                client.write(JSON.stringify({msg:text, id:1}));
            }
        }}/>
    </View>;
};



export default ClientScreen;

// In ServerScreen.js

import React, {useState} from 'react';
import {View, Text, Button, StyleSheet, FlatList} from 'react-native';
import { NetworkInfo } from 'react-native-network-info';
var net = require('react-native-tcp');


const createServer = (chats, setChats) => {
    const server = net.createServer((socket) => {
        console.log('server connected on ' + socket.address().address);
    
        socket.on('data', (data) => {
          let response = JSON.parse(data);
            setChats([...chats, {id:chats.length+1, msg:response.msg}]);
        //   console.log('Server Received: ' + data);
        //   socket.write('Echo server\r\n');
        });
    
        socket.on('error', (error) => {
          console.log('error ' + error);
        });
    
        socket.on('close', (error) => {
          console.log('server client closed ' + (error ? error : ''));
        });
      }).listen(6666, () => {
        console.log('opened server on ' + JSON.stringify(server.address()));
      });
    
      server.on('error', (error) => {
        console.log('error ' + error);
      });
    
      server.on('close', () => {
        console.log('server close');
      });
    
    return server;
};


const ServerScreen = ({navigation}) => {
    const [server, setServer] = useState(null);
    const [chats, setChats] = useState([]);
    const [ip, setIp] = useState('');
    
    return <View>
        {ip.length > 0? <Text>Server Screen: {ip}</Text>: <Text>Server Screen</Text>}
        <Button title="Start Server" onPress={async () => {
            if(!server)
              setServer(createServer(chats, setChats));
            try{
              let temp_ip = await NetworkInfo.getIPV4Address();
              setIp(temp_ip);
            }catch(e){
              console.log(e.message);
            }
        }}/>
        <Button title="Stop Server" onPress={() => {
            if(server){
                server.close();
                setServer(null);
            }
        }}/>
        <Button title="Go to Client Screen" onPress={() => navigation.navigate('Client')}/>
        {server ? <Text>Server is on</Text>: null}
        <FlatList
            data={chats}
            renderItem={({item}) =>{
                return <Text style={{margin:10, fontSize:20}}>{item.msg}</Text>;
            }}
            keyExtractor={item => item.id}
        />
    </View>;
};

const styles = StyleSheet.create({});

export default ServerScreen;

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

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

现在，这是一个如何通过本地网络在两个设备之间进行通信的最小示例。但是正如你可能想知道的那样，这个应用程序只允许我们在两个屏幕之间交流，对吗？

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

那么，如何为不同的设备做这件事。

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

现在，在设备A上，我们将转到ServerScreen并启动服务器。在设备B上，转到ClientScreen，您将看到"client is on“的信息出现，但是如果您在textfield中键入某种消息并提交，您将不会看到任何消息出现在设备A上，这是因为为了使其工作，我们需要对ClientScreen.js组件文件进行一点更改。

与=>的转换

useEffect(async () => {
        let ip = await NetworkInfo.getIPV4Address(); //await NetworkInfo.getGatewayIPAddress();
        setClient(createClient(ip));

        return () => {};
    }, []);

to =>

useEffect(async () => {
        let ip = await NetworkInfo.getGatewayIPAddress();
        setClient(createClient(ip));

        return () => {};
    }, []);

它所做的是，我们想要的IP，连接我们的设备B到设备A，是设备B的网关的IP (记住，我们把B连接到了A的热点)。就这样。

现在，只需重新构建并遵循前面提到的步骤。一旦您输入一条消息并在B上的ClientScreen上提交它，您将能够在A的ServerScreen上看到它。

希望这能帮助那些在设备之间建立本地套接字连接的人。请注意，您可以在ServerScreen和这个相同的代码库上使用一个服务器，对多个客户端进行一些小的行为更改。

PS。我会确保我经常检查这个答案，以便你所面临的任何问题，你可以评论，我可以尽快回复你。

编辑：如果您想从主系统(hotspot)向客户端系统发送消息，那么您可以按照这个答案https://stackoverflow.com/a/73166697/9748372。

Answer 2

是的，您可以在两个设备之间共享数据，但是您提到了

React-Native-Wifi-Hotspot 

这个库有助于在两个设备之间建立连接，但不能共享任何东西(这个库只是用来建立连接的，就是它)。

那我是怎么分享数据的？

1.您可以借助TCP和UDP共享数据。

使用TCP/UDP进行文件共享和数据通信的主要应用

现在你可以想象分享它的应用程序了

它有发送者和接收者相同的方式。

发送方是tcp/udp中的客户端。

接收者是tcp/udp中的服务器。

现在我们看到了详细的方法(服务器和客户端)。

设备一是服务器(想象一下)

eg:

ip address 192.1.1.1

port: 6666

设备二是一个客户端。

eg


ip address 192.2.2.2

port: 6666

用端口通过ip地址向服务器发送数据

注意:设备2应该知道服务器ip和端口，那就是。

现在我们将设备一配置为服务器。

npm i react-native-tcp

了解ip

npm i react-native-network-info



import { NetworkInfo } from "react-native-network-info";
 
// Get Local IP
NetworkInfo.getIPAddress().then(ipAddress => {
  console.log(ipAddress);
});
 
// Get IPv4 IP (priority: WiFi first, cellular second)
NetworkInfo.getIPV4Address().then(ipv4Address => {
  console.log(ipv4Address);
});

服务器安装仅我添加了端口(如6666)

let server = net.createServer((socket) => {
      this.updateChatter('server connected on ' + JSON.stringify(socket.address()));

      socket.on('data', (data) => {
        this.updateChatter('Server Received: ' + data);
        socket.write('Echo server\r\n');
      });

      socket.on('error', (error) => {
        this.updateChatter('error ' + error);
      });

      socket.on('close', (error) => {
        this.updateChatter('server client closed ' + (error ? error : ''));
      });
    }).listen("6666", () => {
      this.updateChatter('opened server on ' + JSON.stringify(server.address()));
    });

    server.on('error', (error) => {
      this.updateChatter('error ' + error);
    });

    server.on('close', () => {
      this.updateChatter('server close');
    });

客户端设置(我添加了手动服务器ip地址(192.1.1.1)和端口(6666) )：

 let client = net.createConnection(6666,192.1.1.1, () => {
      this.updateChatter('opened client on ' + JSON.stringify(client.address()));
      client.write('Hello, server! Love, Client.');
    });

    client.on('data', (data) => {
      this.updateChatter('Client Received: ' + data);

      this.client.destroy(); // kill client after server's response
      this.server.close();
    });

    client.on('error', (error) => {
      this.updateChatter('client error ' + error);
    });

    client.on('close', () => {
      this.updateChatter('client close');
    });

    this.server = server;
    this.client = client;
  }

  componentWillUnmount() {
    this.server = null;
    this.client = null;
  }

就这样

然后我来谈谈你的观点

React-Native-Wifi-Hotspot 

此库只有助于在设备之间共享ip地址，然后建立tcp连接，以便在设备之间通信或共享文件。

注意:文件可能与tcp、udp、ftp、websocket、对等网络共享，也可以通过http共享。

您可以选择上述任何一种协议来制作文件共享应用程序，额外的提示，您必须了解块和流。(这有助于您大文件共享)我希望它可以帮助您。

Answer 3

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

它是节点的React中的net API。

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