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

آموزش ساخت اتاق گفتگو با استفاده از وب سوکت

سلام دوستان امیدوارم حالتان خوب باشد . محمد حسینی راد هستم و با یک آموزش جذاب ! دیگر در خدمت شما هستم . در این آموزش ما با ساخت وب سوکت در nodeJS آشتا می شویم و یک اتاق گفتگو میسازیم .

نصب وب سوکت در NodeJS

برای این کار ما از npm که \کیج منیجر nodejs  هست استفاده میکنیم . دستور زیر را در ترمینال وارد کنید :

خوب حالا ما websocket را داریم و میتوانیم از آن در کد هایمان استفاده کنیم .

شروع کار ساخت سوکت سرور

در حالت کلی برای ساخت سوکت سرور نیاز داریم ابتدا یک بستر در http بسازیم و سوکت سرور را به آن پیوند دهیم .

یک فایل به نام node.js بسازید و شروع کنید به کد نویسی در آن .

ابتدا باید http  را اینکلود کنیم .

حالا به سوکت نیاز داریم . ( هم زمان سرور وب سوکت را انتخاب میکنیم )

حالا باید http خود را آماده کنیم .

۱۳۳۷ یک پورت انتخابی میباشد.

متغیر websocketConnection  ما یک کلاس هست و باید سرور خود را طبق  آن بسازیم . ورودی هم به httpServer آن متغیر server میدهیم .

هر کاربری که به وب سوکت ما وصل می شود  ( مانند سوکت )‌ یک سوکت به ما میدهد و ما آن را در یک آرایه ذخیره میکنیم تا بعدا مثلا برای ارسال پیام‌ ٫ از آن سوکت استفاده کنیم .

پس بنده آرایه ـsockets برای این کار تعریف میکنم .

خوب حالا باید ایونت هایمان را تعریف کنیم .

وب سوکت ما به یک ایونت یعنی ایونت اتصال نیاز دارد . پس آن را میسازیم .

request در خواست ما هست و نیاز است سوکت را از آن استخراج کنیم . برای این کار از کد زیر استفاده میکنیم .

در اصل ما درخواست را می پزیریم و سوکت را دریافت میکنیم .

خوب حالا باید سوکت در لیست ما ذخیره شود .

ما ابتدا سوکت را ذخیره کردیم و همان طور که میدانید array.prototype.push به ما  اندازه ( تعداد اعضا ) ی ارایه را میدهد و چون ایندکس ها از ۰ آعاز میشود ما یکی از آن ها کم میکنیم .

همین مقدار را به سوکت میدهیم تا دسترسی به آن راحت تر باشد .

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

خوب حالا باید ایونت های سوکت را تعریف کنیم. سوکت ها ۳ ایوینت اصلی دارند . open , close , message .

ایونت open برای زمانی هست که کاربر متصل میشود .

ایونت close برای وقتی هست که ارتباط کاربر قطع می شود ( مثلا رفرش میکند یا مرورگر را می بندد‌)‌ ( ورودی کانکشن می باشد )

ایونت message برای زمانی هست که کاربر پیامی را ارسال میکند . ( ورودی شی پیام هست )

تا اینجا حالت پایه کد ما باید به شکل زیر باشد .

خوب حالا باید پیام ارسالی هر کاربر را به تمام کاربران ارسال کنیم .

برای این کار یک تابع میسازیم .

برای ارسال پیام به یک سوکت از تابع sendUTF ارسال میکنیم .

همان طور که می بینید ما از tIndex که بالاتر تعریف کردیم نیز استفاده کردیم .

خوب حالا باید این کد ار در ایونت message تعریف کنیم :

ورودی ایونت message ما یک آبجکت با ۲ مقدار است . مقدار اول type است که انکودینگ را چک میکند (‌ما معمولا متن utf8 می فرستیم پس فرض میکنیم utf8 است )

دومین مقدار utf8Data است که رشته ی پیام ارسالی میباشد .

خوب الان تحت سرور ما آماده میباشد . ( نمونه کد )

حالا باید سمت کاربر را تعریف کنیم .

اتصال به وب سوکت با استفاده از HTML5

یکی از مهم ترین امکانات HTML5 وب سوکت می باشد .

ابتدا یک فایل به نام index.html بسازید و کد زیر را در آن قرار دهید .

فایل jquery.js فایل جی کوئری هست که باید دانلود کنید .

ابتدا باید سوکت را تعریف کنیم .

ws:// بستر اتصال ٫ ۱۲۷٫۰٫۰٫۱ آدرس وب سوکت و ۱۳۳۷ پورت آن میباشد .

حالا باید ایونت های وب سوکت که شامل اتصال ٫‌ قطع ارتباط و دریافت پیام هست را تعریف کنیم .

توجه کنید که ایونت های دیگری نیز هستند که ما در این آموزش به آن ها احتیاج نداریم .

حالا باید پیام دریافتی را مدیریت کنیم ( رشته ی دریافتی در message.data قرار دارد )

یک مدیریت خیلی خیلی ساده .

خوب حالا باید تابع sendMessage که در onclick تعریف کردیم را بسازیم .

ابتدا یک متغیر گلوبال برای دسترسی به کانکشن در توابع میسازیم .

خوب حالا تابع را میسازیم .

همان طور که میبینید برای ارسال پیام ما از send استفاده میکنیم .

خوب کار تمام شد 🙂 الان ما یک سرور بسیار ساده برای گفتگو داریم .

اجرای کار سوکت سرور

برای این کار ابتدا فایل node.js را اجرا کنید .

خوب حالا فایل index.html را  در مرورگر باز کنید ( نیاز به استفاده از لوکال هاست یا بستر اضافی نیست‌:)‌)

به همین راحتی

نمونه پروژه ی توسعه یافته

بنده یک نمونه پروژه توسعه یافته این آموزش را در گیت هاب قرار دادم و میتوانید استفاده کنید .

این سورس قابلیت های نظیر مدیریت ٫ کیک کردن ٫ دریافت لیست کاربران و … میباشد .

https://github.com/Amhr/nodejs-simple-websocket-chat

 

اگر سوال یا نظری داشتید در نظرات مطرح نمایید

بر چسب های پست : , , , , , , , ,
مطالب مرتبط
سلام دوستان امیدوام حالتان خوب باشد . در این آموزش قرار است یک سیستم پوش نوتیفیک ...
۱۳ اسفند ۹۴
11 دیدگاه
بنام خدا و با عرض سلام و خسته نباشید . قراره در این آموزش با استفاده از node.js ...
۲۴ شهریور ۹۴
17 دیدگاه
4 دیدگاه برای “آموزش ساخت اتاق گفتگو با استفاده از وب سوکت”
  1. آرمین گفت:

    سلام
    دوست عزیز من با استفاده از socket.io یک چیزی مشابه برنامه شما ولی ساده تر نوشتم که پیام من رو به همه کاربرهایی که متصل هستند با سوکت ارسال میکنه.
    ولی مشکل اینجاست که بعد از حدود ۲ الی ۳ روز با اینکه سرور js ران هست هنگ میکنه و دیگه کار نمیکنه حتی ping هم نمیشه و من مجبور میشم سرور رو stop کنم و مجدد ران کنم. هر کسی هم دادم نگاه کرد متوجه نشد و یکی گفت باگ از خود nodejs هست!!
    میشه شما برای من فایل کدم رو بررسی کنید؟ کل فایل حدود ۱۰ خط کد بیشتر نیست!

    1. در تلگرام بنده @pp2007ws با من در تماس باشید

  2. emirmg گفت:

    ممنون از آموزش خوبتون . استار زدم رو گیت هاب .

    موفق باشید

  3. Mohsen گفت:

    سلام ممنون از آموزشتون
    مشکل اکثر آموزشهای که من دیدم حالا فارسی خیلی کم و انگلیسی هم اکثرا یه مسیر رو طی کردن اینه که تا اجرا روی لوکال هاست رو آموزش میدن و بعد آموزش رو تموم میکنن در صورتی که بخض اصلی اجرای برنامه های nodejs روی یه سرور واقعیه.

    اگه میشه اینم آموزش بدید من ندیدم جایی آموزشش رو. فقط با heroku بود که اونم به نظرم خیلی سخت اومد. مرسی

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود به حساب کاربری
بستن این پنجره