برنامه نویسی RealTime در React و Nodejs توسط Socket.io

برنامه نویسی RealTime در React و Nodejs توسط Socket.io

برنامه نویسی RealTime در React و Nodejs توسط Socket.io

Real Time Programming in react and nodejs with socketio

توسط : admin
برنامه نویسی RealTime یکی از مواردی هست که در بسیار از پروژه ها به اون نیاز داریم . قسمتهایی مثل چت آنلاین ، داشبوردهای مدیریتی ، نمایش لحظه ای اطلاعات سخت افزار ، نمایش لحظه ای قیمت ، مسابقات زنده و ... . در این آموزش قصد داریم با یک مثال بسیار ساده نحوه استفاده از Socket.io از کتابخانه های اصلی جاوااسکریپت رو با هم آموزش ببینیم .

سلام به دوستان عزیزم .

امروز با یک آموزش بسیار مهم در عین حال زیبا و پرکاربرد و صد البته اسان در خدمتتون هستم . حتما تا بحال در بسیاری از اپلیکیشین ها و سایت ها بخشهایی مثل چت آنلاین ، پشتیبانی آنلاین و یا داشبوردهای مدیریتی که اطلاعاتی رو به صورت زنده نمایش میدن . به این جور بخش ها اصطلاحا Real Time programming  گفته میشه . در فریمورک ها و زبانهای مختلف معمولا کتابخونه هایی وجود داره که وظیفه  پیاده سازی این نوع عملیات رو به عهده دارن مثلا در فریمورک Entity Framework در زبان های C# یا Vb از SignalR استفاده میشه . جاوا اسکریپت هم به نوبه خودش کتابخانه فوق العاده قدرتمندی داره به اسم Socket.io  که دقیقا همینکار رو برای ما انجام میده . در این آموزش که قصدم اینه که شما رو با یک مثال بسیار ساده با این کتابخونه آشنا کنم . البته این مثال گرچه ساده هست ولی کاملا کاربردی و قابل استفاده در پروژ های شماست . در این مثال قصد داریم اطلاعات سخت افزاری سرور رو بگیریم و در لحظه به کاربر نمایش بدیم  و همینطور یک پیام ساده از کاربر دریافت میکنیم و سرور همون پیام رو بعد از دریافت دوباره به کاربر نشون میده . پس با هم شروع میکنیم . قول میدم زیاد وقتتون گرفته نشه .

Socket.io : بزن بریم برای برنامه نویسی RealTime 

Socket.io یکی از با ارزش ترین کتابخانه ها برای کسانی هست که با Node.js کار میکنن . چرا؟ از اونجا که به شما امکان میده ارتباطات هماهنگ صرفاً در برنامه شما انجام بشه و این به معنای ارتباط در زمان واقعی هست ! مثال ساده تر بزنم ؟ بگذارید این را به روش دیگری بگم : socket.io به شما امکان می دهد مثلاً سرویس چت را در وب سایت خود پیاده کنید! امکاناتی که socket.io ارائه می دهد بسیار زیاد است و بسیار فراتر از بحث این آموزش و برای همه چیزهایی که نیاز به ارتباط فوری بین بازدید کنندگان وب سایت شما دارند کاربرد دارد .به عنوان مثال نمایش اطلاعات یک بازی آنلاین در صفحه بدون صفحه رفرش بشه. این وسوسه انگیز است ، اینطور نیست! اگر بگی اینطور نیست کلاهمون میره تو همدیگه ها ! 

 

socket.io چه کاری انجام می دهد؟

قبل از شروع کد ، می خواهم به سرعت ایده socket.io را توضیح بدم . این یک کتابخانه به ما اجازه میده که خیلی از عملیات ها رو بسیار ساده پیاده سازی کنیم . با این حال ، socket.io خودش مبتنی بر تعدادی از تکنیک های مختلف است که امکان برقراری ارتباط در زمان واقعی را فراهم می کنه  (و بعضی از این تکنیک ها سالهاست که وجوددارن ). مشهورترین و جدیدترین  تکنیک که درمورد  اون صحبت میکنیم WebSocket است.

WebSocket؟ آیا این یکی از اون  نوآوری های HTML5 نیست؟

 

نه ! این یکی از پیشرفت  های تکنولوژی جدید هست که تقریباً همزمان با HTML5 ظاهر شده ، اما HTML نیست: یک API جاوا اسکریپت است.

WebSocket یکی از امکاناتی هست که توسط همه مرورگرهای موجود پشتیبانی شده و امکان  تبادل دو جانبه همزمان بین کلاینت و سرور فراهم می کنه . منظورت از تبادل دو جانبه چیه ؟! بیایید دوباره به اصول اولیه برگردیم. ارتباطات در وب معمولاً هماهنگ نیستند. اینترنت همیشه به این صورت بوده است: کلاینت درخواست می کنه و سرور پاسخ می ده (شکل بعدی را ببینید).

ارتباط بین سرور و کلاینت در اینترنت

 

خوب وقتی وب شروع شد  ما به ارتباطات واکنشی و فوری بیشتری نیاز داشتیم . به عنوان مثال ، در این تصویر ، سرور نمی تونه تصمیم بگیره که چیزی برای مشتری ارسال بکنه یا نه (برای مثال برای گفتن: "یک پیام جدید وجود دارد!"). اول  کلاینت باید که صفحه را بارگیری مجدد بکنه یا برای تماس با سرور اقدامی انجام بده و سرور این حق را نداره که به تنهایی با کلانت صحبت کنه یا اطلاعات بفرسته .

WebSocket نوآوری است که به نوعی "ارتباط" لوله ای شکل بین کلاینت و سرور باز میکنه . مرورگر و سرور به یکدیگر متصل می شوند و می توانند از طریق این لوله پیام ها را از یک جهت و جهت دیگر مبادله کنند. بنابراین از این پس سرور می تواند به تنهایی تصمیم بگیرد که مانند یک فرد بزرگتر پیامی را به کلاینت ارسال کند (شکل بعدی را ببینید)!

ارسال مستقیم اطلاعات از سرور به سمت کلاینت بدون نیاز به درخواستی از طرف کلاینت

 

صبر کنیدددددددددد!!!!!!

WebSocket را با AJAX اشتباه نگیرید یک وقت !

AJAX در واقع به کلاینت و سرور اجازه می دهد تا بدون بارگذاری مجدد صفحه اطلاعات را تبادل کنند. با این حال ، در AJAX ، همیشه مشتری درخواست کننده و سرور پاسخگو هست و سرور نمی تواند خودش تصمیم بگیرد که اطلاعات را به مشتری ارسال کند. ولی این امر با WebSocket  امکان پذیر شده است!

 

برگردیم به Socket.io

Socket.io  امکان استفاده از WebSockets را بسیار آسان  کرده است  و از آنجا که همه مرورگرها WebSockets رو پشتیبانی نمی کنند ،  Socket.io با مدیریت مرورگر ، می تونه از سایر روشهای ارتباطی هماهنگ استفاده کنه . بهتر هست نیم نگاهی به بخش پشتیبانی مرورگر وب سایت socket.io نگاهی بندازید . می تونیم ببینیم که socket.io تعیین می کند که کدام روش ارتباطی در زمان واقعی برای هر کلاینت مناسب است:

WebSocket

Adobe Flash Socket

AJAX long polling

AJAX multipart streaming

Forever Iframe

JSONP Polling

به عنوان مثال ، اگر مرورگر از WebSocket پشتیبانی نکنه اما Flash نصب شده باشه ، socket.io برای انجام ارتباط در زمان واقعی از طریق Flash اقدام می کنه . اگر فلش هم نصب نشده باشه  ، می تونه از تکنیک های دیگری مانند AJAX Long Polling استفاده کنه (کلاینت بطور مداوم از سرور می پرسه  آیا برای  موضوع مشخص شده به روزرسانی جدیدی وجود داره یا نه ،این روش ساده ترین یا کارآمدترین روش نیست ولی کار می کنه ) یا "Forever Iframe" که مبتنی بر iframe نامرئی هست که اطلاعات به تدریج بارگیری می شوند.

نگران نباشید ! خبر خوب اینه که شما نیازی به دانستن جزئیات نحوه کار این تکنیک ها ندارید. با این حال ، من فکر می کنم خوبه که حداقل نام آنها و وجود آنها را بدونید .

با تشکر از همه این تکنیک های مختلف ،  بهتره بدونیم socket.io تعداد زیادی از مرورگرها ، حتی قدیمی ها  را هم پشتیبانی می کند که اسم و نسخه مرورگر رو براتون در زیر آوردم :

Internet Explorer 5.5+ (yes, you read that correctly!).

Safari 3+

Google Chrome 4+

Firefox 3+

Opera 10.61+

Safari for iPhone and iPad

The Android browser

 

حالا که ما اطلاعات بیشتر ی در مورد چگونگی عملکرد socket.io می دونیم ، آیا می تونیم شروع به استفاده از آن بکنیم ؟

فرض من بر این هست که شما دو پروژه یکی برای نود جی اس و یکی هم برای ری اکت ایجاد کردید . و آماده هستین تا با بروز رسانی و ایجاد فایلها  و کدهای مورد  نیاز آزمایش زمان واقعی رو انجام بدید .

در پروژه نود جی اس این ماژول ها و نصب کنید :

socket.io

express

os-utils

حالا محتویات زیر رو در فایل app.js یا server.js یا هر فایلی رو که خودتون برای اجرای پروژه در نظر گرفتید کپی کنید .

const express = require("express");
const http = require("http");
const socketIo = require("socket.io");
const os = require("os-utils");

 
const app = express();
app.use(express.json());

 

 
const server = http.createServer(app);
const io = socketIo(server); // < Interesting!

 
const getApiAndEmit = async socket => {
  try {
    os.cpuUsage(() => {
      const model = {
        totalMem: os.totalmem(),
        freeMem: os.freemem(),
        upTime: os.processUptime()
      };

 
      socket.emit("SystemApi", model); // Emitting a new message. It will be consumed by the client
    });
  } catch (error) {
    console.error(`Error: ${error}`);
  }
};

 
let interval;
io.on("connection", socket => {
  console.log("New client connected");

 
  if (interval) {
    clearInterval(interval);
  }
  interval = setInterval(() => getApiAndEmit(socket), 1000);
  socket.on("disconnect", () => {
    console.log("Client disconnected Online Users");
  });

 
  socket.on("reply", data => {
    socket.emit("message", data);
  });
});

 
server.listen(4000, () => console.log(`Listening on port ${4000}`));

 

 

توضیح کدها :

بعد از ایجاد کد های مربوط به ساختن سرور ، ثابتی از نوع socket.Io با نام io ساختیم  و سرور جاری رو به عنوان پارامتر بهش معرفی کردیم تا بتونیم به متدهای ماژول سوکت دسترسی پیدا کنیم . 

سوکت  ، بدنه پیچیده ای نداره . یک نام برای رویداد و یک تابع جهت اجرا نیاز داره .  رویداد connection و disconnect در زمان اتصال یا قطع اتصال کلاینت به سرور فراخوانی میشوند .

ببینید دو تا از متدها بسیار پر کاربرد و مهم هستند :

  1. socket.on : 
    این متد جهت کنترل رویداد ها هستن . رویدادی مثل connection و disconnent از پیش تعریف شده هستن. ولی شما میتونید هر اسمی دوست داشتید در این متد معرفی کنید تا بتونید در سمت کلاینت با فرخوانی این رویداد بهش دسترسی داشته باشید .
  2. socket.emit :
    این متد برای ارسال مقدار به یک رویداد هست .

 

خوب حالا چه اتفاقی می افته ؟ طبق مثال ما  (reply) ، متد socket.on  منتظر دریافت دستور در سمت سرور برای این نام هست و هر مقداری که توسط emit از سمت کلاینت برای reply ارسال بشه رو دریافت میکنه و میتونید با این مقدار ارسال شده عمل مورد نظرتون رو انجام بدید . مثلا ممکنه یک پیغام باشه یا یک آبجکت باشه یا آرایه باشه یا ... .

پس به اینصورت شد emit مقدار ارسال میکنه و on دریافت میکنه . حالا چه از سرور به کلاینت و چه برعکس . در این مثال ما توسط فلگ SystemApi داریم مقداری رو که یک ابجکت از اطلاعات سخت افزاری سرور هست رو به سمت کلاینت ارسال میکنیم و در اونجا با متد on به انتظار نشستیم تا اون مقدار رو دریافت کرده و در صفحه نمایش بدیم . 

حالا در سمت کلاینت به این صورت مقادیر ارسال شده رو دریافت میکنیم :

اول ماژول سمت کلاینت یعنی socket.io-client رو نصب میکنیم و سپس یک کامپوننت ایجاد کرده و اون  رو در App.js فراخوانی میکنیم .

import React, { Component } from "react";
import socketIOClient from "socket.io-client";
const socket = socketIOClient("http://localhost:4000");

 
class MainPage extends Component {
  state = {
    totalMem: 0,
    freeMem: 0,
    upTime: "",
    broadCast: ""
  };

 
  componentDidMount() {
    socket.on("SystemApi", data =>
      this.setState({
        totalMem: data.totalMem,
        freeMem: data.freeMem,
        upTime: data.upTime
      })
    );

 
    socket.on("message", data =>
      this.setState({
        broadCast: data
      })
    );
  }

 
  componentWillUnmount() {
    socket.off("SystemApi", () => console.log("socket is off"));
  }
  render() {
    return (
      <div style={{ padding: "10px" }}>
        <div>{`total Memory Is : ${parseInt(this.state.totalMem)} MB`}</div>
        <div>{`free Memory Is : ${parseInt(this.state.freeMem)} MB`}</div>
        <div>{`upTime server Is : ${parseInt(this.state.upTime)} seconds`}</div>
        <input
          placeholder="متن پیام ... "
          value={this.state.message}
          onChange={e => {
            this.setState({
              message: e.target.value
            });
          }}
        />
        <div>
          <button
            onClick={() => {
              socket.emit("reply", this.state.message);
            }}
          >
            ارسال پیام به سرور
          </button>
        </div>
        <div>{`پیام ارسال شده به سرور : ${this.state.broadCast}`}</div>
      </div>
    );
  }
}

 
export default MainPage;

 

 

خوب آدرس سرور به ماژول سوکت کلاینت میدیم و همونطور که گفتیم با دستور on منتظر دریافت مقدار از SystemApi هستیم و هر مقداری رو که ارسال شد در state ثبت شده و همونطور که میدونید با تغییر state کامپوننت بروز رسانی و مقادیر نمایش داده میشن .

یک کار کوچیک د یگه هم مونده در اینجاتوسط message مقداری رو emit میکنیم سمت سرور و در سمت سرور با دستور on منتظر گرفتن این داده میمونیم . کاری که در اینجا انجام دادیم این هست که در سرور بعد از گرفتن مقدار از message دوباره اون مقدار رو برگردوندیم به کلاینت پس در سمت کلاینت مجددا با دستور on منتظر دریافت مقدار از message هم هستیم و این مقدار رو نیز با بروز کردن state به نمایش میگذاریم . همونطور که در بالا اشاره کردم socket مثل لوله عمل میکنه یعنی میتونید همزمان برای یک رویداد هم داده ارسال کنید و همزمان داده رو دریافت کنید .یادتون نره اگر دیگه به دریافت اطلاعات نیازی ندارید ومیخواید که لوله بسته بشه حتما در componentwillunmount که قبل از ، از بین رفته کامپوونت فراخوانی میشه حتما دستور off  رو اجرا کنیدو همینطور بعد از اجرای پروژ ها چه در سمت سرور و چه کلاینت دستور npm i فراموش نشه .

خوب آموزش ما تمام شد . دیدید که خیلی ساده بود . البته socket قابلیت های فوق العاده زیادی داره که اگر نیاز شد در آینده آموزش های بیشتری رو از این کتابخونه پر قدرت در سایت قرار میدیم . در اینجا تنها بخشی از قابلیت های اون رو به شما آموزش دادیم که قطعا کمک میکنه بتونید کارهای مهمی رو انجام بدید . امیدوارم موفق باشید .

 

ضمنا فایل فشرده پروزه رو میتونید از اینجا دانلود کنید . رمز فایل nilootech.com هست .

نظرات :

در عرض چند دقیقه برای ایجاد حساب

کاربری خود اقدام کنید


اکنون حساب کاربری خود را ایجاد کنید!


ایجاد حساب کاربری

با ثبت نام در نیلوتک از آخرین بروز رسانی های آموزش ها و مقالات سایت مطلع شوید