آموزش ساخت Chat App با NodeJS
Node JS یکی از محبوبترین محیطهای اجرایی است که برای برنامه نویسی سمت سرور، همچنین کدنویسی رباتیک و ساخت بازیهای کامپیوتری از آن استفاده میشود. همچنین یکی از اصلیترین کاربردهای آن در زمینه ساخت اپلیکیشنهای Real-time یا Instant Messaging است. شاید شما بخواهید برای خودتان با استفاده از زبان JavaScript یک اپلیکیشن ساده Chat طراحی کنید. امروز در این مقاله میخواهیم به آموزش ساخت Chat App با NodeJS بپردازیم.
شبکههای اجتماعی
در دنیای مدرن به جرئت میتوان گفت کمتر کسی پیدا میشود که با تکنولوژیهای جدید از قبیل تلفنهای همراه هوشمند، هوش مصنوعی، شبکههای اجتماعی و… آشنایی نداشته باشد. شبکههای اجتماعی امروزه جای خود را به گردهماییهای جمعی انسان و همینطور معاشرتهای چهره به چهره داده است. در حالت کلی هر شبکه اجتماعی یک پلتفرم آنلاین یا مبتنی بر وب و اینترنت تلقی میشود که میتواند ارتباطهای دسته جمعی بین افراد ایجاد کند. ممکن است در بستر وب باشد یا حتی داخل تلفن همراه هوشمند شما نصب شود؛ اما در هر صورت درون یک شبکه اجتماعی تمام افرادی که به نحوی به آن دسترسی دارند میتوانند با یکدیگر ارتباط برقرار کنند. ممکن شما از طریق مرورگر خود در یک شبکه اجتماعی عکسی به اشتراک بگذارید و دوستتان آن سر دنیا با تلفن همراه عکس شما را ببیند و حتی بازخورد برای شما ارسال کند.
اپلیکیشن چت
برخی از شبکههای اجتماعی در خود یک سیستم چت (Chat) جای دادهاند تا نیاز کاربر خود را به از هر جهت تأمین کنند. به طورکلی یک اپلیکیشن چت از چندین المان برای بارگذاری مطالب مختلف از جمله عکس، فیلم، موسیقی و… و یک فیلد ورودی یا Input برای گرفتن متن از کاربر تشکیل میشود. همچنین شامل اتاق یا Roomهایی میشود که میتواند شامل Group یا PV باشد و افراد میتوانند در آنجا با یک یا چند کاربر مکالمه و گفتگو داشته باشند.
Node JS چیست؟
به طورکلی زبان جاوا اسکریپت (JavaScript) برای دستکاری DOM یا Document Object Model و HTML موجود در صفحه استفاده میشود؛ اما در سالهای اخیر توانسته راه خود را به قسمت سمت سرور و کارهای پشتصحنه سایتها نیز باز کند. Node JS در واقع محیط اجرایی جاوا اسکریپت در خارج از صفحه مرورگر است و به شما این امکان را میدهد تا این زبان را در هر پلتفرمی (که نود جی اس توانایی نصب روی آن را داشته باشد) اجرا کنید. این محیط اولینبار در سال 2009 توسط رایان دال ابداع شد.
برخی از شرکتهای بزرگی که از نود جی اس استفاده میکنند Yahoo, LinkedIn, Twitter, Netflix, Google و… هستند.
معماری Node JS
Node JS بر اساس معماری Event Driven یا مبتنی بر رخداد کار میکند. این به این معنی است که روند اجرای برنامههای نوشته شده بر اساس نود با خروجی و ورودیهای هر قسمت جلو میرود. این معماری باعث میشود ارتباط کدهای نود با یکدیگر و دیگر زبانها بهصورت Non- Blocking یا مسدود نشدنی باشد. همچنین این معماری باعث به وجود آمدن مقیاسپذیری بالا برای نود و سرعت بالا در اپلیکیشنهای بلادرنگ شود؛ بنابراین Node JS یکی از بهترین انتخابها برای ساخت اتاقهای گفتگو (Chat Room) و بازیهای تحت وب است.
Node JS و پایگاههای داده
Node JS با پایگاه دادههایی نظیر MongoDB که به صورت غیر رابطهای یا NoSQL هستند رابطه خوبی دارد و به صورت رسمی از آن پشتیبانی میکند. برخلاف Django که از پایگاه دادههای غیر رابطهای پشتیبانی نمیکند. البته راه حلهایی برای این مشکل وجود دارد. Node JS همچنین با انواع پایگاه دادههای دیگر نظیر Postgres, Redis, MySQL و… ارتباط خوبی دارد و از آنها پشتیبانی میکند.
Node JS و TypeScript
TypeScript یک زبان متن باز بر پایه JavaScript است که توسط شرکت Microsoft توسعه یافته و در دسترس عموم قرار گرفته است. این زبان در اصل همان زبان JavaScript است. اما ویژگیهای جدیدی را به آن اضافه میکند. بزرگترین ویژگی که TypeScript اضافه کرده Type Safety نام دارد. با استفاده از این ویژگی شما میتوانید در برنامه خود تعریف کنید که انتظار دارید برای مثال یک تابع چه نوع تایپ دادهای را برگرداند یا فرم دادهای که برمیگرداند چگونه باشد. این قابلیت در Node JS بسیار کارآمد است زیرا که باعث افزایش امنیت در سمت سرور و کاهش برخورد با باگ میشود.
مقایسه Node JS با برخی زبانها و Frameworkها
اکنون میخواهیم Node JS را با دیگر زبانها و فریمورکهای سمت سرور محبوب مقایسه کنیم.
مقایسه Node JS و PHP
PHP یک زبان برنامه نویسی وب است که قابلیت همه منظوره یا Multi purpose بودن را دارد.
- Node JS در سال 2009 و PHP در 1994 عرضه شد.
- Node JS توانایی ساخت اپلیکیشن در بسیاری از پلتفرمهارا دارد در صورتی که PHP تنها به اپلیکیشن وب بسنده میکند.
- PHP به صورت سنکرون و Node JS به صورت آسنکرون کار میکند.
- Node JS مقیاسپذیری و کارایی بالاتری از PHP دارد.
- کدهای PHP در یک برنامه یکسان از کدهای با Node JS کمتر است.
- PHP قابلیتهای بیشتری برای مدیریت و کار با پایگاه داده دارد.
- PHP از Multi thread استفاده میکند در حالی که Node JS به صورت Single thread Non-blocking کار میکند.
مقایسه Django و Node JS
Django یک Framework متن باز و رایگان است که در سال 2005 برای زبان Python ایجاد شد.
- Django از زبان Python و Node JS از زبان JavaScript استفاده میکند.
- Django بر مبنای سیستم MVT یا Model View Template کار میکند در حالی که Node JS بر مبنای Event driven است.
- Node JS نسبت به Django کمتر بهینه است.
- امنیت Django نسبت به Node JS بالاتر است.
- Node JS قابلیت انعطاف و تطابق بیشتری دارد.
- سرعت و کارایی Django نسبت به Node JS بالاتر است (بستگی به پروژه دارد).
ترکیب Node JS با دیگر Frameworkها
Node JS همچنین توانایی ترکیب با Frameworkهای سمت کاربر یا Front-end زبان JavaScript را دارد. برای مثال اگر بخواهیم از React برای Front و از Node JS برای Backend پروژه استفاده کنیم، یکی از راههای اتصال این دو به یکدیگر ساخت یک Rest API با Node JS و Consume یا استفاده از آن در React است. یکی از پرکاربردترین Frameworkهای Node JS، Express است. میتوان گفت تقریباً برنامهای وجود ندارد که با Node JS ساخته و از Express استفاده نکرده باشد.
Express JS
Express یک Framwork وب برای Node JS است که از هیچ کامپوننت اضافی استفاده نمیکند. همین موضع باعث میشود به سرعت نصب شود و کم دردسر و سریع باشد. این Framework با استفاده از npm که به صورت دیفالت همراه با Node JS روی سیستم عامل شما نصب میشود دانلود و از طریق const express = require(“express”) روی پروژه شما import خواهد شد. Express نقشی اساسی در برنامهها و عملکرد Node JS دارد. ویژگی آن دسترسی راحت تر به ماژولها و کدهای کوتاهتر Node JS است. اما همانند هر Framework دیگری معایبی هم دارد برای مثال ORM و Database را به کل شامل نمیشود.
Socket.io
Socket.io یک کتابخانه برای Node JS است که یک ارتباط دو طرفه بین Server و Client با تأخیر پایین و مبتنی بر رخداد را با استفاده از Web Socket برای ما به ارمغان میآورد.
برخی از ویژگیها عبارتاند از:
- اتصال مجدد: ممکن است تحت شرایط خاصی اتصال دو سمت با Web Socket قطع شود. به همین دلیل Socket.io دارای ویژگی ضربان قلب خودکار است که میتواند هر چند وقت یک بار وضعیت اتصال را چک کند و اگر دچار قطعی بود اتصال مجدد را ممکن سازد.
- ارسال خودکار Acknowledgment :Acknowledgments برای اطمینان از اینکه طرف مقابل بسته یا packet را دریافت کرده است یا نه از سمت گیرنده به سمت فرستنده ارسال میشود تا فرستنده را وضعیت بستهای که ارسال کرده است آگاه سازد.
- بافر خودکار پیامها: اگر یکی از دو سمت دچار قطعی ارتباط شود، پیامهایی که از قبل ارسال اما به دست طرف مقابل نرسیده بافر و ذخیره میشوند تا در زمانی که مجددا اتصال برقرار شد توسط آن کاربر دریافت شوند.
- تسهیم: با استفاده از Socket.io میتوان پیامها را تنها به قسمت خاصی از کاربران ارسال کرد. برای مثال با استفاده از کد زیر پیامها تنها برای ادمینها ارسال میشوند.
io.of("/admin").on("connection", (socket) => {
// admin users
});
پروژه Chatroom با استفاده از Node JS و Socket.io
اکنون قرار است که ساخت Chat App با NodeJS را باهم شروع کنیم. در این پروژه یاد میگیریم چطور از Node JS برای پیاده سازی Backend یک پروژه real time به همراه Socket.io استفاده کنیم.
1. تصاویری از پروژه
نام خود را در این قسمت وارد کرده و وارد صفحه Chat میشویم.
اکنون به عنوان کاربر دیگری نیز وارد برنامه میشویم.
همانطور که میبینید پیغامی مبنی بر وارد شدن کاربر دیگری برای ما به نمایش درآمد. حال اگر شروع به نوشتن پیام کنیم، این پیام برای ما و تمام کاربران دیگر در صفحه نمایش مییابد.
2. راه اندازی پروژه
برای ساخت این پروژه ما به چند پکیج جانبی نیاز داریم. نام این پکیجها از این قبیل است:
- Nodemon: برای اینکه مجبور نباشیم هربار بعد از هر تغییر پروژه را از اول اجرا کنیم. این پکیج بعد از هر بار Save کردن پروژه را از اول اجرا میکند.
- Socket.io: که از قبل با آن آشنا هستیم.
این پروژه از Node JS و HTML / CSS استفاده میکند. برای انجام این پروژه شما نیاز دارید تا یک دانش اولیه و کلی از Node JS, HTML و CSS داشته باشید. پیشنهاد میشود برای انجام پروژه از کد ادیتور VScode استفاده کنید.
1. ابتداییترین کار این است که شما از نصب بودن Node JS روی سیستم عامل خود اطمینان حاصل کنید. زیرا برای استفاده و اجرای آن حتماً باید Node JS runtime environment روی سیستم عامل شما نصب باشد. دقت کنید حداقل ورژن Node JS برای Socket.io ورژن 10 میباشد (پیشنهاد میشود از آخرین ورژن استفاده کنید).
2. بعد از آن به Terminal یا Command prompt سیستم عامل خود وارد شوید ، سپس به آدرسی که میخواهید پروژه را در آن جا ذخیره کنید cd کرده، اکنون دستور زیر را تایپ کنید:
mkdir {project_name}
3. به جای {project_name} نام پروژه را بنویسید. میتوانید برای مثال chat-application بنویسید.
4. بعد از این کار پوشه ساخته میشود به درون آن با دستور cd وارد شوید.
cd {project_name}
5. اکنون دستور زیر را وارد کنید.
npm init -y
6. بعد از این کار فایل package.json برای شما داخل پوشه ساخته میشود. این فایل شامل توضیحاتی درباره پروژه برای مثال نام پروژه، نام نویسنده، توضیحات و… میباشد. اگر میخواهید این موارد را دستی وارد کنید هنگام وارد کردن دستور بالا -y را حذف کنید و بعد از نوشتن هر قسمت enter بزنید تا فایل برای شما ایجاد شود.
7. اکنون با استفاده از دستور زیر پکیجهایی که در بالا گفته شد را نصب کنید (دقت کنید که هرکدام باید جداگانه نصب شوند).
npm install socket.io
npm install -D nodemon
8. هرکدام از این موارد مقداری طول میکشد تا نصب شود. بعد از نصب وارد فایل package.json شده و در قسمت scripts ، test را به Start و متن کنار آن را به nodemon server.js تغییر بدهید. این مورد برای کوتاه کردن دستور اجرای nodemon است.
9. اکنون یک فایل Server.js و script.js در پوشه پروژه خود بسازید (دقت کنید تمام فایلها باید دقیقاً در پوشه پروژه باشند).
3. پیاده سازی Backend
10. در فایل server.js که کار backend مارا انجام میدهد دستورت زیر را وارد کنید.
const socketio = require("socket.io")(3000);
const users = {};
11. خط اول پکیج socket.io را به اسم socketio وارد برنامه و آن را روی پورت 3000 اجرا میکند. سپس برای کاربرهای موجود یک Object خالی میسازیم تا زمانی که هرکاربری وارد صفحه chat شود در این جا ذخیره شود.
12. در کد زیر زمانی که پیغامی مبنی بر connection به سمت سرور ارسال شود، Arrow function اجرا میشود. در این تابع از متد on که در پکیج socket.io وجود دارد استفاده شده است. متدهای دیگری که درون این تابع نوشته میشوند تنها زمانی اجرا خواهند شد که پیغام Connection توسط Backend پروژه دریافت شود.
socketio.on("connection", (socket) => {
// متد های وارد شدن وزر جدید، فرستادن پیام و خارج شدن
})
13. حال در این متد باید 3 متد اصلی دیگر را بنویسیم.
Socket.on("new-user", (name) => {
users[socket.id] = name;
socket.broadcast.emit("user-connected", name);
});
14. متد اول وارد شدن کاربر جدید به صفحه چت را تعریف میکند. زمانی که کاربر جدیدی لینک را وارد کرده به صفحه چت میآید این متد رشته new-user را به سمت سرور ارسال و نام کاربر را در Object ذخیره میکند. سپس به تمامی کاربران حاضر در صفحه به صورت Broadcast اعلام میشود که کاربر جدیدی به صفحه chat آمده است.
socket.on("send-chat-message", (message) => {
socket.broadcast.emit("chat-message", {
message: message,
name: users[socket.id],
});
});
15.متد دوم برای ارسال پیام است. هر زمان که پیامی مبنی بر send-chat-message به سمت سرور ارسال شود، arrow function کناری اجرا و محتویات پیام را به صورت broadcast برای همه کاربرهای حاضر در صفحه ارسال میکند.
socket.on("disconnect", () => {
socket.broadcast.emit("user-disconnected", users[socket.id]);
delete users[socket.id];
});
16. متد سوم و آخر زمانی که کاربری از صفحه چت خارج شود اجرا میشود. به این صورت که هر زمان پیغام disconnect را دریافت کرد، رشته user disconnected را برای همه کاربران فرستاده و کاربری که صفحه را ترک کرده از Object حذف میکند.
17. اکنون کار ما با قسمت Backend پروژه تمام شد. در قسمت بعدی نوبت به پیاده سازی Frontend با استفاده از HTML/CSS میرسد.
4. پیاده سازی Frontend
18. برای این کار یک فایل HTML به نام index.html در پوشه پروژه بسازید.
19. سپس Template اولیه کار را که به صورت زیر است در فایل کپی کنید.
20. اکنون در قسمت body شروع به نوشتن HTML میکنیم.
21. به یک بخش برای دیدن هر پیام نیاز داریم پس یک div تعریف میکنیم.
<div id="message-container"></div>
22. یک form برای نوشتن و ارسال پیام ایجاد میکنیم.
23. درون این form یک تگ input برای نوشتن محتوای پیام ایجاد میکنیم.
24. برای submit یا تأیید کردن آن یه یک button یا دکمه نیاز داریم.
<button type="submit" id="send-button">Send</button>
25. کار ما با HTML تمام شد. اکنون با استفاده از CSS باید به آن استایل بدهیم.
26. یک فایل style.css در پوشه پروژه خود ایجاد و کدهای زیر را در آن کپی کنید.
body {
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
#message-container {
width: 80%;
max-width: 1200px;
font-size: 20px;
}
#message-container div {
background-color: #bbf5c0;
padding: 20px;
margin: 20px;
}
#message-container div:nth-child(2n) {
color: #fff;
background-color: #478b4d;
}
#send-button {
color: #fff;
font-size: 20px;
width: 100px;
padding: 20px;
background-color: rgb(5, 110, 33);
border-radius: 10px;
margin-left: 10px;
border: none;
}
#send-container {
position: fixed;
padding-bottom: 30px;
bottom: 0;
background-color: white;
max-width: 1200px;
width: 80%;
display: flex;
}
#message-input {
background-color: rgb(219, 218, 234);
font-size: 20px;
flex-grow: 1;
border-radius: 10px;
}
5. پویا کردن Front-end
27. اکنون بخش front-end ما ثابت و static است باید آن را Dynamic یا پویا کرده و با استفاده از JavaScript، Backend و Front-end را به یکدیگر متصل کنیم.
28. یک فایل script.js در پوشه پروژه خود بسازید.
29. کدهای زیر را در آن کپی کنید.
const socket = io('http://localhost:3000')
const messageContainer = document.getElementById('message-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')
30. خط اول برای راه اندازی socket.io روی لوکال هاست با پورت 3000 است. بعد از آن با استفاده از متد document.getElementById مقادیر موجود در تگهای HTML را دریافت کرده و هرکدام را درون متغیر میریزیم.
31. یک تابع به خصوص مینویسم برای زمانی که بخواهیم هر متنی را صفحه نمایش دهیم برای مثال محتوای پیام هر کاربر یا پیام وارد شدن کاربر جدید به صفحه Chat.
function appendMessage(message) {
const messageElement = document.createElement("div");
messageElement.innerText = message;
messageContainer.append(messageElement);
}
32. نام کاربر را با استفاده از کد زیر دریافت کرده و آن را با پیام new-user به قسمت backend ارسال میکنیم.
const name = prompt('What is your name?')
appendMessage('You joined')
socket.emit('new-user', name)
33. حال ورود کاربر جدید را به اطلاع دیگر کاربران میرسانیم.
socket.on("user-connected", (name) => {
appendMessage(`${name} connected`);
});
34. هرزمان که هرکاربر پیامی ارسال کرد، آن را در صفحه نمایش میدهیم.
socket.on("chat-message", (data) => {
appendMessage(`${data.name}: ${data.message}`);
});
35. و هر زمان که کاربری از صفحه خارج شد آن را به اطلاع دیگر کاربران میرسانیم.
socket.on("user-disconnected", (name) => {
appendMessage(`${name} disconnected`);
});
36. حال در زمانی که روی button کلیک شود تابع زیر اجرا و پیام را در صفحه نمایش میدهد سپس آن را از Input حذف میکند (مقدار موجود در Input را Clear میکند).
messageForm.addEventListener("submit", (e) => {
e.preventDefault();
const message = messageInput.value;
appendMessage(`You: ${message}`);
socket.emit("send-chat-message", message);
messageInput.value = "";
});
6. راه اندازی پروژه
کار ما تمام شد. برای اجرای پروژه باید در Command prompt یا terminal خود به درون پوشه پروژه cd کنید سپس دستور npm start را وارد کنید تا Backend اجرا شود.
برای اجرای Front-end میتوانید از extension Live Server در VScode کمک بگیرید. کافیست آن را نصب کرده و فایل HTML را با آن باز کنید یا میتوانید به طور دستی HTML را باز کنید. دقت کنید باید حتماً Backend و Front-end به طور همزمان اجرا و فعال باشند تا برنامه به درستی کار کند.
در نهایت فایلهای پروژه باید به شرح زیر باشند.
سخن پایانی
Node JS کاربرهای فراوانی دارد. یکی از مهمترین آنها طراحی برنامههای Real Time یا Instant messaging است. همانطور که در قسمت پروژه دیدید به راحتی و با داشتن دانش اولیه HTML/CSS و Node JS قادر بودیم تا یک برنامه Chat برای خود بسازیم. دلیل سرعت عمل بالای Node JS، داشتن قابلیت Non blocking و single thread بودن آن است. پس Node JS بهترین زبان برای طراحی برنامههای messenger به شما میرود. امیدواریم این آموزش برای شما مورد قبول بوده باشد. برای دیدن مقالات و آموزشهای بیشتر به وبلاگ پویان آی تی مراجعه کنید.
اولین دیدگاه را اضافه کنید.