ارتباط React Native با سرور از طریق Socket

سلام دوستان. در این آموزش متنی قصد داریم یاد بگیریم چجوری React Native رو به سرور با استفاده از Socket متصل کنیم.من همیشه سعی میکنم تا مطالب جدیدی در زمینه React Native یاد بگیریم و در این مقاله قصد دارم این دانش رو با شما به اشتراک بزارم.

به طور خلاصه برای ارتباط React Native با سرور از طریق Socket موارد زیر را انجام میدهیم:

در ابتدا ما نیاز داریم دو تا کتابخونه زیر رو نصب کنیم:
- socket.io :برای ایجاد سرور
- socket.io-client: برای ایجاد کلاینت
سپس ما سرور رو با استفاده از socket.io و کلاینت رو با کتابخانه socket.io-client ایجاد میکنیم.
سپس فایل کلاینت رو در react native app ایمپورت میکنیم و سرور رو بر روی سیستم استارت میکنیم.
سپس با کلیک بر روی button سوکت رو باز میکنیم،به سرور وصل میشیم و پیام رو ازسرور با استفاده از client ID در اپلیکیشن میگیریم.

نکته: توجه کنید که سیستمی که سرور بر روی اون در حال اجرا است و emulator یا دیوایس واقعی باید در یک شبکه باشند .

1.در محیط CMD به دایرکتوری پروژه برید و با استفاده از command زیر کتایخانه socket.io رو نصب میکنیم.

npm i --save socket.io

1	npm i --save socket.io

اگر کتابخانه با موفقیت نصب بشه خروجی زیر رو داریم:

2.نصب کتابخانه socket.io-client از طریق command زیر:

npm i --save socket.io-client

1	npm i --save socket.io-client

اگر کتابخانه با موفقیت نصب بشه خروجی زیر رو داریم:

3.ایجاد دو تا پوشه به نام های server, client در root اصلی پروژه مشابه اسکرین شات زیر:

4.ایجاد یک فایل به نام server_file.js در پوشه server و قرار دادن کدهای زیر در این فایل

var io = require('socket.io')();
 
const port = 3000;
 
io.listen(port);
 
io.on('connection', (client) =>
{
    client.on('createConnection', () =>
    {
        client.emit('connectionResponse', 'New Client with ID: ' + client.id);
    });
})

var io = require('socket.io')();

const port = 3000;

io.listen(port);

io.on('connection', (client) =>

{

client.on('createConnection', () =>

{

client.emit('connectionResponse', 'New Client with ID: ' + client.id);

});

})

این فایل باید از طریق Node اجرا بشه.
const port = 3000; شماره پورتی که سرور و کلاینت با هم ارتباط برقرار میکنند را مشخص میکند.
دستور io.listen(port); به سرور اجازه میدهد که به کلاینت از طریق پورت 3000 گوش بدهد.
on اجازه شروع listening و emit اجازه شروع speaking به server / client را میدهد.
رویداد connection وقتی که یک کلاینت جدید به سرور متصل می شود اجرا میشود.در این مورد وقتی که یک کلاینت جدید به سرور متصل میشود هر کلاینت از طریق رویداد createConnection شروع به listening میکنند.رویداد createConnection زمانی که از client side اجازه داده بشه،فراخوانی میشه.

5.ایجاد یک فایل به نام client_file.js در پوشه client folder و قرار دادن کدهای زیر

var openSocket = require('socket.io-client');
 
const socket = null;
 
export default function getConnected( callback )
{
    socket = openSocket('http://<your-ip_address>:3000');
    
    socket.on('connectionResponse', ( response ) =>
    {
 callback( response );
 
        socket.disconnect(); // Disconnect the Socket
    });
 
    socket.emit('createConnection');
}

var openSocket = require('socket.io-client');

const socket = null;

export default function getConnected( callback )

{

socket = openSocket('http://<your-ip_address>:3000');

socket.on('connectionResponse', ( response ) =>

{

callback( response );

socket.disconnect(); // Disconnect the Socket

});

socket.emit('createConnection');

}

openSocket(‘http://<your-ip_address>:3000’); شما باید IP address خودتون رو قرار بدید.بنا به دلایل امنیتی من IP address خودم رو پاک کردم.
تابع getConnected زمانی که بر روی button اپلیکیشن کلیک بشه،فراخوانی میشه.این تایع کلاینت رو با سرور از طریق پورت 3000 مرتبط میکنه.در ابتدا ما رویداد connectionResponse رو ثبت میکنیم و رویداد createConnection بر روی سرور رو فراخوانی میکنیم و سرور رویداد connectionResponse رو با یک client ID منحصر به فرد و جدید برای مشتری ایجاد میکنه.
همونطور که میبینید من از یک پارامتر به نام callback در تابع getConnected استفاده میکنم.در واقع این تابع مسئول بروزرسانی state ها در کامپوننت Text اپلیکیشن react native ما است.
با استفاده از تابع disconnect من socket رو میبندم .زیرا هر دفعه که بر روی button کلیک میشه یک اتصال socket جدید باز میشه و باید قبل از ایجاد یک اتصال جدید،اتصال قبلی بسته بشه.

6.ایمپورت کردن کامپوننت های View, Text, TouchableOpacity, Platform و StyleSheet در پروژه.و ایمپورت فایل client_file.js

import { View, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';

import client from './client/client_file.js';

import { View, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';

import client from './client/client_file.js';

آموزش جامع و پروژه محور react native

7.ایجاد سازنده

constructor()
{
  super();
 
  this.state = { connectedState: '' }
}

constructor()

{

super();

this.state = { connectedState: '' }

}

8.ایجاد تابع connect .این تابع متد getConnected رو در فایل client_file.js اجرا میکنه و satate رو با یک client ID جدید بروزرسانی میکنه.

connect = () =>
{
  client(( response ) =>
  {
    this.setState({ connectedState: response });
  });
}

connect = () =>

{

client(( response ) =>

{

this.setState({ connectedState: response });

});

}

9. ایجاد render method

render()
{
  return(
    <View style = { styles.container }>
      <Text style = { styles.text }>{ this.state.connectedState }</Text>
      <TouchableOpacity onPress = { this.connect } style = { styles.btn }>
        <Text style = { styles.btnText }>Connect with Server</Text>
      </TouchableOpacity>
    </View>
  );
}

render()

{

return(

<Text style = { styles.text }>{ this.state.connectedState }</Text>

<Text style = { styles.btnText }>Connect with Server</Text>

</TouchableOpacity>

</View>

);

}

10.ایجاد استایل سفارشی

const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
    paddingHorizontal: 25
  },
 
  text:
  {
    color: 'black',
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center'
  },
 
  btn:
  {
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 20
  },
 
  btnText:
  {
    color: 'white',
    fontSize: 20,
    textAlign: 'center'
  }
});

const styles = StyleSheet.create(

{

container:

{

flex: 1,

justifyContent: 'center',

paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,

paddingHorizontal: 25

text:

{

color: 'black',

fontSize: 20,

marginBottom: 20,

textAlign: 'center'

btn:

{

padding: 10,

backgroundColor: 'rgba(0,0,0,0.5)',

marginTop: 20

btnText:

{

color: 'white',

fontSize: 20,

textAlign: 'center'

}

});

نمایش گرافیکی

11.کد کامل برنامه در فایل App.js

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';
 
import client from './client/client_file.js';
 
export default class App extends Component<{}>
{
  constructor()
  {
    super();
 
    this.state = { connectedState: '' }
  }
 
  connect = () =>
  {
    client(( response ) =>
    {
      this.setState({ connectedState: response });
    });
  }
 
  render()
  {
    return(
      <View style = { styles.container }>
        <Text style = { styles.text }>{ this.state.connectedState }</Text>
        <TouchableOpacity onPress = { this.connect } style = { styles.btn }>
          <Text style = { styles.btnText }>Connect with Server</Text>
        </TouchableOpacity>
      </View>
    );
  }
}
 
const styles = StyleSheet.create(
{
  container:
  {
    flex: 1,
    justifyContent: 'center',
    paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,
    paddingHorizontal: 25
  },
 
  text:
  {
    color: 'black',
    fontSize: 20,
    marginBottom: 20,
    textAlign: 'center'
  },
 
  btn:
  {
    padding: 10,
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginTop: 20
  },
 
  btnText:
  {
    color: 'white',
    fontSize: 20,
    textAlign: 'center'
  }
});

import React, { Component } from 'react';

import { View, Text, TouchableOpacity, Platform, StyleSheet } from 'react-native';

import client from './client/client_file.js';

export default class App extends Component<{}>

{

constructor()

{

super();

this.state = { connectedState: '' }

}

connect = () =>

{

client(( response ) =>

{

this.setState({ connectedState: response });

});

}

render()

{

return(

<Text style = { styles.text }>{ this.state.connectedState }</Text>

<Text style = { styles.btnText }>Connect with Server</Text>

</TouchableOpacity>

</View>

);

}

const styles = StyleSheet.create(

{

container:

{

flex: 1,

justifyContent: 'center',

paddingTop: ( Platform.OS === 'ios' ) ? 20 : 0,

paddingHorizontal: 25

text:

{

color: 'black',

fontSize: 20,

marginBottom: 20,

textAlign: 'center'

btn:

{

padding: 10,

backgroundColor: 'rgba(0,0,0,0.5)',

marginTop: 20

btnText:

{

color: 'white',

fontSize: 20,

textAlign: 'center'

}

});

12.اجرا کردن دستور react–native run–ios برای اجرا بر روی دیوایس های iOS و یا react–native run–android برای اجرا بر روی دیوایس های Android

اسکرین شات در IOS

اسکرین شات در Android

مطالب زیر را حتما مطالعه کنید

7 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

ابوالفضل گفت:

آوریل 21, 2019 در 8:04 ب.ظ

سلام و تشکر از سایت خوبتون
من دستور node server_file.js رو میزنم تو دایرکتوری پوشه سرور ولی اتفاقی نمیوفته و نه چیزی اجرا میشه نه اخطاری نه هیچی!
چیکار کنم؟

پاسخ
- مهدی گفت:
  
  آوریل 22, 2019 در 7:44 ق.ظ
  
  سلام ابوالفضل عزیز.لطف داری
  ip ورژن 4 رو قرار دادی ؟؟
  
  پاسخ
  - ابوالفضل گفت:
    
    آوریل 23, 2019 در 12:19 ق.ظ
    
    نه مشکل رو فهمیدم کجاست درست کار میکرده ولی لاگ نزاشتم اصن حواسم نبود
    یه مشکل دیگه چرا رو باتن پرس میکنم اخطار میده میگه :
    “socket” is read-only
    
    و یه سوال دیگه اینکه باید آیپی اون گوشی رو وارد کنم درسته؟
  - مهدی گفت:
    
    آوریل 23, 2019 در 7:50 ق.ظ
    
    ip v4 سیستم
  - ابوالفضل گفت:
    
    آوریل 23, 2019 در 9:36 ب.ظ
    
    مرسی ممنون و نمیدونین اون ارور چیه؟
    برای این نیست که متغیرش const هستش؟؟
مهدی گفت:

سپتامبر 15, 2018 در 11:10 ق.ظ

برای ارتباط با سرور باید سرور on باشه که برای اینکار باید این فایل در حال اجرا باشه
برای اجرا باید دستور node server_file.js رو در دایرکتوری فایل اجرا کنید

پاسخ
UKbed990 گفت:

سپتامبر 15, 2018 در 10:22 ق.ظ

عذر میخوام از اونجایی که من مبتدی هستم، معنی این قسمت رو متوجه نمیشم:
“این فایل باید از طریق Node اجرا بشه”
میشه توضیح بدین؟
ممنون

پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

7 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ