جستجو برای:
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
  • درباره ما
  • تماس با ما
آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
0

ورود و ثبت نام

وبلاگ

آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها > بلاگ > NodeJS > استفاده از Socket.IO در NodeJS

استفاده از Socket.IO در NodeJS

sokcet.io

Sockets (سوکت ها) یک حالت انتزاعی و کوچک تر از یک شبکه هستند که کار کردن و مدیریت آن ها راحت تر ست. Socket.IO امکان ایجاد یک ارتباط کاملا دوطرفه real-time و البته رویداد محور را فرآهم می کند. بر روی هر پلتفرم و مرورگری می تواند مورد استفاده قرار گیرد البته همراه با سرعت و قابلیت اطمینان بالا.

Sokect.IO میتوان گقت یکی از گزینه هایی است که نقش بسیار مهمی در مدیریت سردرگمی های شما برای انتخاب گزینه های فنی متعددی (Web Socket, ajax, long polling, flash , etc) که برای ایجاد یک ارتباط دو طرفه مورد استفده قرر می گیرد ایفا می کند.

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

بزن بریم !

اول از همه باید Nodejs و NPM رو سیستم شما نصب باشه و احتمالا اکر در گذشته با این پلتفرم کار کردین چالشی ندارید و میریم برای نصب Epress که (حتما میدونید!) با دستور زیر به صورت Local به دایرکتوری پروژه اضافه میشه.

1
npm install express --save

 

به همین ترتیب با استفاده از دستور زیر Socke.IO را نصب می کنیم.

1
npm install socket.io --save

 

حالا با توجه به مواردی که در بالا انجام دادیم باید ببینیم به چه شکلی میتونیم از Socket.IO برای پیاده سازی موارد مد نظرمون استفاده کنیم.

ایتدا یک فایل با عنوان Server.js را ایجاد کنید و کد زیر را داخل آن قرار دهید.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
var http = require('http');
var express = require('express');
var app = express();
 
var server = http.createServer(app);
// Pass a http.Server instance to the listen method
var io = require('socket.io').listen(server);
 
// The server should start listening
server.listen(80);
 
// Register the index route of your app that returns the HTML file
app.get('/', function (req, res) {
    console.log("Homepage");
    res.sendFile(__dirname + '/index.html');
});
 
// Expose the node_modules folder as static resources (to access socket.io.js in the browser)
app.use('/static', express.static('node_modules'));
 
// Handle connection
io.on('connection', function (socket) {
    console.log("Connected succesfully to the socket ...");
 
    var news = [
        { title: 'The cure of the Sadness is to play Videogames',date:'04.10.2016'},
        { title: 'Batman saves Racoon City, the Joker is infected once again',date:'05.10.2016'},
        { title: "Deadpool doesn't want to do a third part of the franchise",date:'05.10.2016'},
        { title: 'Quicksilver demand Warner Bros. due to plagiarism with Speedy Gonzales',date:'04.10.2016'},
    ];
 
    // Send news on the socket
    socket.emit('news', news);
 
    socket.on('my other event', function (data) {
        console.log(data);
    });
});

 

علاوه بر Express و Socket.IO بری ایجاد سرور مدنظرمون به ماژول HTTP نیاز داریم. متغییر server یک object از متود createServer که متغییر app را به عنوان parameter دریافت کرده است return می کند و همچنین متغییر server به عنوان پارامتر  در متود listen ماژول socket.io مورد استفاده قرار می گیرد.

توجه کنید که برای اجرای سرور باید از متغییر server استفاده نمایید نه متغییر app و این کد به عنوان اولین قدم باید به درستی کار کند.

همان طور که در console سرور مشاهده می کنید عبارت “Connected succesfully to the socket” لاگ گرفته شده است. اکنون باید امکان ارسال اطلاعات برای socket فعال بر روی browser را فراهم کنیم.

توجه کنید دلیل استفاده از app.use(‘/static’) دسترسی به فولدر node_modules و فایل socket.io.js در فایل index.html هی باشد هرچند که شما می توانید این فایل را در یک دایرکتوری مشخص قرار دهید و به صورت مستقیم در فایل index.html مورد استفاده قرار دهید و دیکر نیازی به قرار دادن این خط کد در برنامه نیست.

یک route در مسیر (/) ایجاد می کنیم که محتوای فایل index.html را return می کند.

شاید برای شما این سوال به وجود آمده باشد که فایل index.html چیه و چه کاربردی تو این mini project داره. باید بگم اول از همه فایل index.htnl رو ایجاد کنید و کد زیر رو داخل این فایل اضافه کنید تا بیشتر باهم ای فایل رو مورد بررسی قرار بدیم.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Socket.io</title>
    </head>
    <body>
        <h1>Express and socket.io</h1>
        <div id="news-list"></div>
        <script src="static/socket.io/node_modules/socket.io-client/socket.io.js"></script>
        <script>
            var socket = io('http://localhost:80');
 
            socket.on('news', function (data) {
                var div = document.getElementById("news-list");
                console.log("Rendering news : ",data);
 
                for(var i = 0;i < data.length;i++){
                    var newsItem = data[i];
                    div.innerHTML += "<h3>" + newsItem.title + ' <small>'+ newsItem.date + "</small></h3><br>";
                }
 
                socket.emit('my other event', { my: 'data' });
            });
        </script>
    </body>
</html>

 

همان طور که در این قطعه کد مشاهده می کنید با ایجاد دسترسی به فایل های node_modules در این داریم از socket.io.js استفاده می کنید که قبل تر هم توضیحاتی داده شد.

با این روش می تونیم یک ارتباط دوطرفه میان مرورگر و سرور داشته باشیم و اگر دستور node Server.js رو در command اجرا کنید می بینید که به صورت همزمان و با اجرای سرور اطلاعات در قالب فایل index.html با دسترسی به socket.io نمایش داده می شود.

امیدوارم این مقاله درک بهتری از socket.io و نحوه استفاده از آن در پروژه های مختلف به شما داده باشد. لطفا نظرات و تجربیات خودتون از کار با socket.io را با ما و سایر دوستان به اشتراک بذارین.همچنین اگر قصد یادگیری node js (نود جی اس) به صورت تخصصی و حرفه ای را دارید،پیشنهاد می کنم آموزش جامع و پروژه محور node js را مشاهده کنید.

اشتراک گذاری:
برچسب ها: expressjssocket.ioآموزش socket.ioسوکت

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

تخفیف عید نوروز

تخفیف ویژه نوروز 1400 به همراه هدیه ویژه

بهترین فریمورک های frontend 2021

فریمورک های Frontend که باید در سال 2021 یاد بگیرید

حفظ ارتباط موثر به عنوان یک برنامه نویس

چگونه می توان به عنوان یک توسعه دهنده مهارت کسب کرد ؟

برترین زبان های برنامه نویسی 2021

4 زبان برنامه نویسی که باید در سال 2021 یاد بگیرید

آموزش برنامه نویسی

6 زبان برنامه نویسی برای یادگیری در سال 2021

black friday

طرح تخفیف ویژه Black Friday

قدیمی تر درک کامل CSS shapes
جدیدتر user onboarding چیست؟ همراه با بررسی نکات کاربردی آن

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

جستجو
جستجو برای:
دسته‌ها
  • Material UI
  • NodeJS
  • React
  • React Native
  • Vue Js
  • آموزش متنی
  • استارت آپ و آموزش
  • برنامه نویسی
  • جاوااسکریپت
  • گپ و گفت
ارتباط با ما
  • 09150274110
  • contact@reactapp.ir
دسترسی سریع
  • بلاگ
  • تله فیلم آموزشی
  • آموزش متنی
  • قوانین

تیم reactapp تمام تلاش خودش رو انجام میده تا محتوایی با کیفیت و به روز رو در اختیار علاقه مندان به حوزه جاوااسکریپت قرار بده. چیدمان تمامی آموزش های ویدئویی و مقالات به نحوی هست که شمارو به سمت بازار کار سوق بده تا هر چه سریع تر به عنوان یک نیرو فنی در بازار کار مشغول به فعالیت شده و به درآمد زایی برسید.

کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت