Socket.io یکی از کتابخانه های زبان برنامه نویسی جاوا اسکریپت (Java script) برای استفاده در برنامه های تحت وب است که به شما اجازه می دهد تا ارتباط لحظه ای بین کلاینت ها و سرورها برقرار کنید. این کتابخانه از دو بخش تشکیل شده است: یک کتابخانه سمت کلاینت که در مرورگر اجرا می شود و یک کتابخانه سمت سرور برای node.js.. هر دو بخش دارای یک API تقریباً یکسان هستند. این کتابخانه هم مانند node.js. رویداد محور است. برنامه های چت یا فیدهای شبکه های اجتماعی که در آن صفحه کاربر (کلاینت) پیام ها یا پست هایی را از سایر کاربران دریافت می‌کنند، متداول ترین موارد استفاده برای Websockets و socket.io هستند.
Socket.IO در درجه اول از پروتکل websocket با ویژگی داده خواهی در قالب یک سیستم پشتیبان استفاده می کند، در حالی که همان رابط کاربری را ارائه می دهد. اگر چه می توان از آن به عنوان یک پوشش دهنده (wrapper) برای وب سوکت استفاده کرد، اما ویژگی های دیگری مانند پخش همگانی به چندین سوکت، ذخیره داده های مرتبط با هر کلاینت و I/O نامتقارن و غیر همزمان را نیز ارائه می کند.
توی این پک فوق العاده، جاوا اسکریپت رو جوری یاد میگیری که تو هیچ کلاس آموزشی یا پک دیگه ای نه دیدی نه شنیدی! بدون هیچ کلاسی، با جاوا اسکریپت اپلیکیشن بزن، پروژه محور یاد بگیر و حسابی پول در بیار!
در این مقاله، ما یک برنامه چت اولیه ایجاد خواهیم کرد که به کاربران این امکان را می دهد تا هم زمان با یکدیگر صحبت کنند.
مزایای Socket.IO
- فشار داده به مشتریان که به عنوان شمارنده در زمان واقعی، نمودار و یا الگو های مربوط نمایش داده می شود.
- جریان باینری و ارسال تصویر، صدا و ویدئو
- پیام فوری و چت در برنامه Hello World این کتابخانه وجود دارد.
- این کتابخانه اجازه می دهد تا چندین Namespace را ایجاد کنید که به عنوان کانال های ارتباطی جداگانه عمل می کنند، اما همان اتصال پایه را به اشتراک می گذارند.
وظایف سرور در یک برنامه چت
برنامه ما از دو بخش مجزا تشکیل شده است، یک سرور و یک کلاینت که هر کدام دارای وظایف متفاوتی هستند:
- پشتیبانی از زبان های برنامه نویسی HTML، CSS و کلاینت جاوااسکریپت
- راه اندازی اتصال Socket.io
- گرفتن رویدادها از کلاینت ها (مانند یک پیام چت جدید) و انتشار آنها برای سایر کلاینت ها
وظایف کلاینت در یک برنامه چت
- بارگیری کتابخانه کلاینت socket.io
- برقراری ارتباط با Socket.io در حال اجرا در سرور ما
- ارسال و دریافت رویدادها به / از Socket.io در حال اجرا در سرور ما
- افزودن پیام های خود به چت از طریق جاوا اسکریپت
خب حالا که می دانیم چه چیزی باید بسازیم، بیایید با هم شروع کنیم!
نصب NodeJs را بررسی کنید
برای اینکه بدانید که آیا nodejs روی رایانه شما نصب شده است یا خیر، با پیدا کردن نسخه آن در قالب دستور زیر در Command Prompt عمل می کنیم:
1. > node -v
v14.16.0
اگر هیچ نسخه ای را در ترمینال خط فرمان مشاهده نکردید، به این معنی است که NodeJs روی رایانه شما نصب نیست. می توانید آن را از وب سایت NodeJS دانلود کنید.
ایجاد یک پوشه در برنامه چت
حالا بیایید یک پوشه جدید برای پروژه مان ایجاد کنیم:
mkdir chat-app
cd chat-app
mkdir یک دایرکتوری جدید ایجاد می کند.
cd دایرکتوری فعال کنونی را تغییر می دهد.
حالا ما در دایرکتوری مناسب هستیم. در اینجا می توانیم با مقدار دهی اولیه npm شروع کنیم تا راه اندازی پروژه جدید خود را دریافت کنیم.
نحوه مقدار دهی اولیه npm
پس از اینکه وارد پوشه صحیح شدید، می توانید مقدار دهی اولیه npm را در آن پوشه انجام دهید:
npm init -y
با Node، از نظر فنی، می‌توانیم سرور وب اصلی خود را از ابتدا کدنویسی کنیم. با این حال، در واقعیت از این روش استفاده نمی شود. معمولاً این کار از طریق یک بسته فوق العاده معروف به نام express انجام می شود. Express یک استاندارد صنعتی برای ایجاد سرور در node است.
نصب Express
npm i express@4.16.4
دستور بالا به این معنی است که نسخه مشخص شده express را نصب کنید.
در پوشه برنامه چت یک فایل جدید به نام index.js. ایجاد کنید.
پیکر بندی سرور
داخل index.js کد زیر را اضافه کنید:
1. const express=require(‘express’);
2. const app=express();
3. app.get(‘/’,(req,res)=>{
res.send(‘Express is up and running!’);
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
توضیح کد بالا:
خط 1: تابع require برای وارد کردن کتابخانه express که در متغیری به نام express ذخیره می شود، استفاده می شود. کتابخانه express فقط یک تابع را نشان می دهد. بنابراین، Express در واقع یک تابع در مقابل چیزی شبیه یک شی است. ما آن را برای ایجاد یک برنامه express جدید فراخوانی می کنیم.
خط 2: برای پیکربندی سرور از روش های مختلف ارائه شده در خود برنامه استفاده می شود.
خط 4: پورتی است که می خواهید برنامه به آن گوش دهد. (از آن فرمان بگیرد.)
خط 5: برای راه اندازی سرور استفاده می شود و باعث می شود سرور از یک پورت خاص فرمان بگیرد.
می توانید سرور را با فراخوانی Node با اسکریپت در ترمینال خط فرمان خود راه اندازی کنید:
node index.js
Server is listening on port 3000
در پوشه برنامه چت، یک زیر شاخه به نام public ایجاد کنید.
در پوشه public، یک فایل جدید به نام index.html ایجاد کنید.
کد زیر را داخل index.html اضافه کنید:
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
</head>
<body>
<h1>Socket.io Chat App</h1>
</body>
</html>
داخل index.js جایگزین کنید
1. const express=require(‘express’);
2. const app=express();
3. app.get(‘/’,(req,res)=>{
res.send(‘Express is up and running!’);
})
4. const port=process.env.PORT || 3000;
5. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
با اینها:
1. const path=require(‘path’);
2. const express=require(‘express’);
3. const app=express();
4. const port=process.env.PORT || 3000;
5. const publicDirectoryPath=path.join(__dirname,’/public’);
6. app.use(express.static(publicDirectoryPath));
7. app.listen(port,()=>{
console.log(`Server is listening on port ${port}`);
});
بعد از اعمال این تغییرات، می توانیم سرور را با فراخوانی Node از طریق کدنویسی در خط فرمان راه اندازی کنیم:
node index.js
Server is listening on port 3000
شروع کار با Socket.io
1- socket.io را نصب کنید
Socket.io یک بسته مخصوص Node نیست، بنابراین باید آن را خودتان نصب کنید.
برای اینکه مطمئن شوید این بسته در ماژول های node شما گنجانده شده است، باید آن را به صورت محلی نصب و سپس آن را در سرور خود فراخوانی کنید.
حالا با اجرای دستور npm install socket.io@2.2.0 در خط فرمان، socket.io را در فهرست برنامه چت نصب کنید:
npm install socket.io@2.2.0
بخش وابستگی (dependency) های package.json اکنون در انتهای فایل package.json ظاهر می شود که شامل socket.io نیز شده است.
{
“name”: “chat-app”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“dependencies”: {
“express”: “^4.16.4”,
“socket.io”: “^2.2.0”
}
}
راه اندازی اولیه با Express:
برنامه Express را می توان از طریق ارسال به سرور http، به socket.io متصل کرد. حالا بیایید index.js را ویرایش کنیم تا بتوانیم مواردی را به آن اضافه کنیم:
const path=require(“path”);
const http=require(“http”);
const express=require(‘express’);
const socketio=require(‘socket.io’);
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,”/public”);
app.use(express.static(publicDirectoryPath));
io.on(“connection”,(client)=>{
console.log(‘New websocket connection’);
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
توجه داشته باشید که من یک نمونه جدید از socket.io را از طریق ارسال به سرور هدف (سرورHTTP ) مقدار دهی اولیه می کنم. سپس از رویداد اتصال به سوکت های ورودی فرمان می دهم و آن را وارد کنسول می کنم.
حالا در index.html کد زیر را قبل از </body> (انتهای تگ بدنه) اضافه کنید:
<script src=”/socket.io/socket.io.js”></script>
<script>
var socket = io();
</script>
در واقع این تمام چیزی است که برای بارگیری socket.io-client لازم است که در آن یک io global ارائه و سپس وصل می شود.
دوباره node index.js، را اجرا کنید، اگر از قبل در حال اجرا است، پروسه را با فشار دادن control + c مجددا راه اندازی کرده و دوباره node index.js را اجرا کنید. حالا از طریق مرورگر خود وارد http //localhost 3000 شوید. با این روش می توانید ببینید که در کنسول عبارتی با عنوان «اتصال وب سوکت جدید» چاپ شده است یا نه.
هر سوکت همچنین یک رویداد قطع اتصال ویژه را راه اندازی می کند:
io.on(‘connection’, (client) => {
console.log(‘New websocket connection’);
client.on(‘disconnect’, () => {
console.log(”New websocket disconnected’);
});
});
پرکاربردترین توابع هنگام کار با سوکت io (Socket.io) عبارتند از: (داده، نام رویداد) socket.emit و (داده، نام رویداد) socket.on برای ارسال و دریافت رویدادها در سرور و کلاینت ها که ()socket.emit برای ارسال داده و ()socket.on برای دریافت داده استفاده می شود. به عنوان یک قاعده کلی، به یاد داشته باشید که برای هر رویدادی که با () socket.emit ارسال می کنید، باید یک تابع ()socket.on داشته باشید.
توجه داشته باشید که نام رویداد می تواند هر نام دلخواهی باشد که می خواهید به آن نام صدا بزنید.
مثال: مبانی برنامه چت (Basic Chat App)
در index.js فایل را ویرایش کنید:
const path=require(“path”);
const http=require(“http”);
const express=require(‘express’);
const socketio=require(‘socket.io’);
const app=express();
const server=http.createServer(app);
const io=socketio(server);
const port=process.env.PORT || 3000;
const publicDirectoryPath=path.join(__dirname,”/public”);
app.use(express.static(publicDirectoryPath));
io.on(“connection”,(client)=>{
console.log(‘New websocket connection’);
client.on(‘messageFromClient’, msg => {
io.emit(‘messageFromServer’, msg);
});
client.on(‘disconnect’, () => {
console.log(‘New websocket disconnected’);
});
})
server.listen(port,()=>{
console.log(`Server is up on port ${port}!`);
})
داخل index.html فایل را ویرایش کنید:
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO chat</title>
<style>
body { margin: 0; padding-bottom: 3rem; font-family: Helvetica, Arial, sans-serif; }
#form { background: rgba(0, 0, 0, 0.15); padding: 0.25rem; position: fixed; bottom: 0; left: 0; right: 0; display: flex; height: 3rem; box-sizing: border-box; backdrop-filter: blur(10px); }
#input { border: none; padding: 0 1rem; flex-grow: 1; border-radius: 2rem; margin: 0.25rem; }
#input:focus { outline: none; }
#form > button { background: #333; border: none; padding: 0 1rem; margin: 0.25rem; border-radius: 3px; outline: none; color: #fff; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages > li { padding: 0.5rem 1rem; }
#messages > li:nth-child(odd) { background: #efefef; }
</style>
</head>
<body>
<ul id=”messages”></ul>
<form id=”form” action=””>
<input id=”input” placeholder=”Say Something…” autocomplete=”off” /><button>Send</button>
</form>
<script src=”/socket.io/socket.io.js”></script>
<script>
var socket = io();
var messages = document.getElementById(‘messages’);
var form = document.getElementById(‘form’);
var input = document.getElementById(‘input’);
form.addEventListener(‘submit’, function(e) {
e.preventDefault();
if (input.value != “”) {
socket.emit(‘messageFromClient’, input.value);
input.value = ”;
}
});
socket.on(‘messageFromServer’, function(msg) {
var item = document.createElement(‘li’);
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
</body>
</html>
در کد بالا دو اتفاق افتاده است.
//server (emit) -> client (receive) -messageFromServer
//client (emit) -> server(receive) -messageFromClient
دانلود آموزش socket.io
حتما در کنار این مطلب دانلود کنید: آموزش صفر تا صد جاوا اسکریپت
از اینکه تا اینجا با ما همراه بودید، از شما بسیار سپاسگزاریم. امیدوارم این آموزش برای شما مفید بوده باشد. موفق باشید.
2 دیدگاه. ارسال دیدگاه جدید
از پنج خط ، خط سوم توضیحات اولیه یادتون رفت.
عالی تشکر