نوشتن یک آپ چت با Socket.IO – بخش دوم

نوشتن یک آپ چت با Socket.IO – بخش دوم

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

 

خوب، برگردیم به پروژه. در این بخش برای تنوع قرار است UI آپ را با استفاده از Bootstrap محبوب ایجاد کنیم. همانطور که حدس زده اید، برای نصب Bootstrap ابتدا از طریق خط فرمان خود به ریشه پروژه خود مراجعه کنید، مثلا در پروژه من آدرس به صورت زیر می باشد:

 

 

حال از طریق دستور npm install --save bootstrap@latest قادر به نصب بسته بوت سترپ هستیم، البته که می توانید بطور دستی Bootstrap را وارد پروژه خود کنید. برای این کار به getbootstrap.com مراجعه کنید.

 

HTML

 

در بخش قبل در index.js ما res.send را برای انتقال رشته HTML به آن فراخوانی کردیم. با اینکه این متد مفید است، ولی اگر قرار باشد کل HTML آپ خود را درون آن قرار دهیم باعث گیج شد ما می شود. پس به جای این روش، یک فایل index.html ایجاد می کنیم و HTML لازم را درون آن قرار می دهیم.

 

اجازه دهید کنترل مسیر بخش قبل را به صورت زیر بهبود بخشیم:

 

 

حال HTML های ساده زیر را به فایل index.html اضافه کنید:

 

 

از آنجایی که می خواهیم از css آماده bootstrap استفاده کنیم، شاید وسوسه شویم فایل bootstrap.min.css را به صورت سنتی به فایل index.html اضافه کنیم. ولی متسفانه این روش در nodejs عملی نیست. برای این کار باید با استفاده از express دایرکتوریی که شامل css، js و یا عکس ها می باشد را به آپ معرفی کنیم. پس برنامه را به صورت زیر تغییر می دهیم:

 

 

خط ۵ باعث می شود پوشه حاوی کتابخانه ها، عکس ها و غیر را به آپ معرفی کنید.

 

اگر در حال حاضر سرور شما در حال اجرا است، برای مشاهده تغییرات بالا، Ctrl+C را بفشارید تا سرور خاموش شود و آنگاه دوباره node index را اجرا کنید و مرورگر خود را رفرش کنید، نتیجه باید به صورت زیر باشد.

 

اگر دوست ندارید با هر تغییر کوچک کد، سرور را غیر فعال و دوباره فعال کنید، این بسته پیشنهاد می شود.

 

chrome-socket

 

Socket.IO

 

Socket.IO از دو بخش تشکیل شده است:

 

  • سروری که با سرور HTTP نود.جی اس ادغام می شود: socekt.io
  • کتابخانه سمت کاربری که در سمت مرورگر بارگذاری می شود: socket.io-client

 

در طول توسعه، socket.io وظایف client را به صورت خودکار برای ما انجام می دهد، همانطور که می بینید، برای حالا تنها ما یک ماژول را نصب خواهیم کرد.

 

توجه داشته باشید، اگر دستور پایین را در پلتفرم ویندوز نصب کنید، به احتمال خیلی زیاد با مشکل روبرو می شوید. اما ااگر از لینوکس استفاده می کنید دلیلی برای نگرانی نیست.

 

 

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

 

 

اگر به هر دلیلی مشکلی رخ داد، دایرکتوری node_modules در پروژه خود را پاک کنید، و فایل package.json بخش dependencies را به صورت زیر ویرایش کنید:

 

 

و با دستور npm install بسته ها را از نو نصب کنید.

 

این باعث می شود که ماژول ها نصب شوند و به بخش dependency فایل package.json اضافه شود. حال فایل index.js را ویرایش کنید:

 

 

توجه داشته باشید که ما در بالا ابتدا یک نمونه از socket.io با ارسال شی http به آن ایجاد کرده ایم. آنگاه با گوش دادان به رویداد connection از وارد شدن کاربر با خبر می شویم و آن را در کنسول ترمینال خود نمایش می دهیم.

 

حال در فایل index.html تکه کد زیر را قبل از <body/> قرار می دهیم:

 

 

تمام کاری که در بالا انجام می شود، بارگذاری jquery و socket.io-client و اتصال است.

توجه کنید که من هیچ URL مشخصی را هنگام فراخوانی ()io مشخص نکرده ام. بطور پیشفرض همام بارگذاری صفحه به سرور متصل می شود.

حال اگر شما وب سرور و وب سایت خود را بارگذاری مجدد کنید، در کنسول عبارت a user connected را مشاهده خواهید کرد. سعی کنید چندین پنجره مرورگر را جداگانه باز کنید تا جادو رخ دهد.

با refresh کردن صفحات خود، خروجی زیر ظاهر می شود:

 

nodejs-connected

 

خسته نباشید، امیدوارم تا اینجا با مشکلی روبرو نشده باشید، در بخش بعدی مطالب جذابتری را پوشش می دهیم.