استفاده از Socket.io در React JS

توی این مقاله قراره که باهم از socket توی React استفاده کنیم و کانفیگای مورد نیازش رو انجام بدیم

مرحله اول ) ساختن پروژه React JS
برای ساختن پروژه React کافیه که توی هر دایرکتوری که دوس دارید دستور npx create-react-app web-socket رو وارد کنید تا پروژه React برای شما ساخته بشه.

مرحله دوم ) نصب پکیج socket.io-client
برای اینکه بتونیم از socket توی react استفاده کنیم باید پکیج socket.io-client رو نصب کنیم و تنها نکته ای هم که هستش اینه که توی نسخه های جدیدش یه سری مشکلات هستش که ممکنه اتصال به سرور socket برقرار نشه و نتونین به socket متصل بشین و راه حل این مشکل هم نصب نسخه 2.0.4 هستش که با نصب این نسخه شما میتوانید به راحتی به سرور socket خود متصل بشید.

پس با استفاده از ادیتورتون پوشه پروژه رو باز کنین و دستور npm i socket.io-client@2.0.4 را وارد کنید تا پکیج براتون نصب بشه.

مرحله سوم ) اتصال به socket
برای اینکه بتونیم کانفینگ های سوکت رو انجام بدیم نیازمندیم که توی پوشه src یه پوشه به اسم socket بسازیم و داخل این پوشه یه فایل به اسم index.js میسازیم.
وارد فایل index.js میشیم و یک نمونه برداری از پکیج میکنیم به شکل زیر

import * as io from &quotsocket.io-client&quot

و سپس متغیری به اسم Url میسازیم و آدرس سرور socket رو میریزیم داخلش به شکل زیر

let Url= &quothttps://virgol.io&quot

خب حالا وقت اتصال به سروره که خیلی ساده با متد های io که بالا نمونه برداری کردیم میتونیم متصل بشیم به شکل زیر

const socket = io.connect(Url)
export default socket;

خب به همین سادگی ما تونستیم به سرور socket متصل بشیم بریم ببینیم چجوری میشه باهاش دیتا ارسال کرد .
برای ارسال دیتا کافیه به شکل زیر عمل کنیم

import socket from &quot./socket/index.js&quot

socket.emit(&quotEVENT&quot , data)

به همین سادگی ما میتونیم که دیتامون رو با استفاده از socket ارسال کنیم حالا بریم ببینیم که چجوری میشه دیتا رو از socket دریافت کنیم

import socket from &quot./socket/index.js&quot

socket.on(&quotEVENT&quot , (result)=>{
console.log(result)
})

به همین سادگی ما میتونیم که دیتا رو از داخل سرور socket دریافت کنیم .

موفق باشید.

کانال ما: ری‌اکت سورس