برنامه نویسی سوکت در React Native - ری اکت نیتیو - استودیو طراحی و برنامه نویسی پلاتین

پلاگین سوکت نیتیو جاوا (java socket native) برای react native اندروید.

در این جا یک پیاده سازی پایه از سوکت های جاوا در اندروید را ارائه میدهیم که امکان اجرای یک سوکت نیتیو (socket native) مشتری و سرور را داراست.

برای این کار به RN 0.47 یا بالاتر نیاز دارید.

ویژگی ها

۱)محدودیتی در طول پیام ارسالی بین مشتری و سرور وجود ندارد.

۲)در نبود سروز مشتری میتواند به طور خودکار متصل (connect) شود.

ست آپ (set up)

قدم اول – نصب NPM

npm install --save react-native-sockets

۱	npm install --save react-native-sockets

قدم دوم – آپدیت کردن تنظیمات Gradle

// file: android/settings.gradle
...
 
include ':react-native-sockets'
project(':react-native-sockets').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sockets/android')

// file: android/settings.gradle

...

include ':react-native-sockets'

project(':react-native-sockets').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sockets/android')

قدم سوم – آپدیت کردن ساختار Gradle اپلیکیشن

// file: android/app/build.gradle
...
 
dependencies {
    ...
    compile project(':react-native-sockets')
}

// file: android/app/build.gradle

...

dependencies {

...

compile project(':react-native-sockets')

}

قدم چهارم – MainApplication.java

...
import com.stonem.sockets.SocketsPackage;
 
...
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ...
          new SocketsPackage()
          ...

۱۰

...

import com.stonem.sockets.SocketsPackage;

...

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

...

new SocketsPackage()

...

استفاده از پلاگین

سرور

import Sockets from 'react-native-sockets';
...

۱ ۲	import Sockets from 'react-native-sockets'; ...

ایجاد یک سرور سوکت (socket server)

    let port = 8080;
    Sockets.startServer(port);

۱ ۲	let port = ۸۰۸۰; Sockets.startServer(port);

ارسال پیام به مشتری

    Sockets.emit("message to client", clientAddr);

۱	Sockets.emit("message to client", clientAddr);

بستن سرور

   Sockets.close();

۱	Sockets.close();

پیغام گیرنده ها

    import { DeviceEventEmitter } from 'react-native';
 
    //on started
     DeviceEventEmitter.addListener('socketServer_connected', () => {
      console.log('socketServer_connected');
    });
    //on error
    DeviceEventEmitter.addListener('socketServer_error', (data) => {
      console.log('socketServer_error',data.error);
    });
    //on client connected
    DeviceEventEmitter.addListener('socketServer_clientConnected', (client) => {
      console.log('socketServer_clientConnected', client.id);
    });
    //on new message
    DeviceEventEmitter.addListener('socketServer_data', (payload) => {
      console.log('socketServer_data message:', payload.data);
      console.log('socketServer_data client id:', payload.client);
    });
    //on server closed
    DeviceEventEmitter.addListener('socketServer_closed', (data) => {
      console.log('socketServer_closed',data.error);
    });
    //on client disconnected
    DeviceEventEmitter.addListener('socketServer_clientDisconnected', (data) => {
      console.log('socketServer_clientDisconnected client id:', data.client);
    });

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

۲۴

۲۵

۲۶

۲۷

import { DeviceEventEmitter } from 'react-native';

//on started

DeviceEventEmitter.addListener('socketServer_connected', () => {

console.log('socketServer_connected');

});

//on error

DeviceEventEmitter.addListener('socketServer_error', (data) => {

console.log('socketServer_error',data.error);

});

//on client connected

DeviceEventEmitter.addListener('socketServer_clientConnected', (client) => {

console.log('socketServer_clientConnected', client.id);

});

//on new message

DeviceEventEmitter.addListener('socketServer_data', (payload) => {

console.log('socketServer_data message:', payload.data);

console.log('socketServer_data client id:', payload.client);

});

//on server closed

DeviceEventEmitter.addListener('socketServer_closed', (data) => {

console.log('socketServer_closed',data.error);

});

//on client disconnected

DeviceEventEmitter.addListener('socketServer_clientDisconnected', (data) => {

console.log('socketServer_clientDisconnected client id:', data.client);

});

مشتری

import Sockets from 'react-native-sockets';
...

۱ ۲	import Sockets from 'react-native-sockets'; ...

اتصال به سوکت سرور (socket server)

    config={
        address: "192.168.1.1", //ip address of server
        port: 8080, //port of socket server
        timeout: 5000, // OPTIONAL (default 60000ms): timeout for response
        reconnect:true, //OPTIONAL (default false): auto-reconnect on lost server
        reconnectDelay:500, //OPTIONAL (default 500ms): how often to try to auto-reconnect
        maxReconnectAttempts:10, //OPTIONAL (default infinity): how many time to attemp to auto-reconnect
 
    }
     Sockets.startClient(config);

۱۰

config={

address: "۱۹۲.۱۶۸.۱.۱", //ip address of server

port: ۸۰۸۰, //port of socket server

timeout: ۵۰۰۰, // OPTIONAL (default 60000ms): timeout for response

reconnect:true, //OPTIONAL (default false): auto-reconnect on lost server

reconnectDelay:۵۰۰, //OPTIONAL (default 500ms): how often to try to auto-reconnect

maxReconnectAttempts:۱۰, //OPTIONAL (default infinity): how many time to attemp to auto-reconnect

}

Sockets.startClient(config);

ارسال پیام به سرور

    Sockets.write("message to server");

۱	Sockets.write("message to server");

قطع اتصال مشری

   Sockets.disconnect();

۱	Sockets.disconnect();

پیغام گیرنده ها

    import { DeviceEventEmitter } from 'react-native';
 
    //on connected
     DeviceEventEmitter.addListener('socketClient_connected', () => {
      console.log('socketClient_connected');
    });
    //on timeout
    DeviceEventEmitter.addListener('socketClient_timeout', (data) => {
      console.log('socketClient_timeout',data.error);
    });
    //on error
    DeviceEventEmitter.addListener('socketClient_error', (data) => {
      console.log('socketClient_error',data.error);
    });
    //on new message
    DeviceEventEmitter.addListener('socketClient_data', (payload) => {
      console.log('socketClient_data message:', payload.data);
    });
    //on client closed
    DeviceEventEmitter.addListener('socketClient_closed', (data) => {
      console.log('socketClient_closed',data.error);
    });

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

import { DeviceEventEmitter } from 'react-native';

//on connected

DeviceEventEmitter.addListener('socketClient_connected', () => {

console.log('socketClient_connected');

});

//on timeout

DeviceEventEmitter.addListener('socketClient_timeout', (data) => {

console.log('socketClient_timeout',data.error);

});

//on error

DeviceEventEmitter.addListener('socketClient_error', (data) => {

console.log('socketClient_error',data.error);

});

//on new message

DeviceEventEmitter.addListener('socketClient_data', (payload) => {

console.log('socketClient_data message:', payload.data);

});

//on client closed

DeviceEventEmitter.addListener('socketClient_closed', (data) => {

console.log('socketClient_closed',data.error);

});

Misc Functions

import Sockets from 'react-native-sockets';
...

۱ ۲	import Sockets from 'react-native-sockets'; ...

گرفتن آدرس IP دستگاه

آرایه ای از آدرس IP را برای دستگاه برمیگرداند.

    Sockets.getIpAddress(ipList => {
      console.log('Ip address list', ipList);  
    }, err => {
      console.log('getIpAddress_error', err);
    })

Sockets.getIpAddress(ipList => {

console.log('Ip address list', ipList);

}, err => {

console.log('getIpAddress_error', err);

})

چک کردن سرویس در دسترس

چک میکند که آبا یک سرور سوکت (socket server) برای اتصال به شبکه در دسترس است یا خیر.

    ipAddress="192.168.1.1";
    port=8080;
    timeout=1000; //milliseconds
    Sockets.isServerAvailable(ipAddress,port,timeout,success => {
        Alert.alert("Socket server is available");
    }, err => {
        Alert.alert("Socket server is not available");
    })

ipAddress="۱۹۲.۱۶۸.۱.۱";

port=۸۰۸۰;

timeout=۱۰۰۰; //milliseconds

Sockets.isServerAvailable(ipAddress,port,timeout,success => {

Alert.alert("Socket server is available");

}, err => {

Alert.alert("Socket server is not available");

})

برنامه نویسی سوکت در React Native – ری اکت نیتیو