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

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

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

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

بزن بریم !

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

npm install express --save

1	npm install express --save

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

npm install socket.io --save

1	npm install socket.io --save

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

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

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);
    });
});

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 رو ایجاد کنید و کد زیر رو داخل این فایل اضافه کنید تا بیشتر باهم ای فایل رو مورد بررسی قرار بدیم.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Socket.io</title>

</head>

<body>

<h1>Express and socket.io</h1>

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 را با ما و سایر دوستان به اشتراک بذارین.