24 tut
مرجع درسی دانش‌پژوهان برنامه‌نویسی

آموزش HTML - وب‌سوکت

وب‌سوکت (WebSockets) یک فناوری ارتباطی دوطرفه و نسل جدید برای برنامه‌های کاربردی وب است که روی یک سوکت منفرد کار می‌کند.

وب‌سوکت‌ها امکان ارتباط دوطرفه را فراهم می‌کنند، به این معنی که هم کلاینت و هم سرور می‌توانند به‌طور مستقل و هم‌زمان به یکدیگر داده ارسال کنند.

پس از برقرار کردن یک اتصال وب‌سوکت با سرور وب، می‌توانیم با فراخوانی متد send() داده‌ها را از مرورگر به سرور ارسال کنیم و با استفاده از گرداننده رویداد onmessage داده‌ها را از سرور در مرورگر دریافت کنیم.

سینتکس

در ادامه API مربوطه که یک شیء WebSocket جدید می‌سازد آورده شده است:

var Socket = new WebSocket(url, [protocol] );

در اینجا آرگومان اول، url، آدرسی را مشخص می‌کند که باید به آن متصل شد. ویژگی دوم، protocol، اختیاری است و در صورت وجود، زیرپروتکلی را مشخص می‌کند که سرور برای موفقیت‌آمیز بودن اتصال باید از آن پشتیبانی کند.

ویژگی‌های وب‌سوکت (Attributes)

در ادامه ویژگی‌های شیء WebSocket آورده شده است. با این فرض که شیء سوکت را مطابق آنچه در بالا گفته شد ساخته‌ایم:

ویژگی توضیحات
Socket.readyState

ویژگی فقط‌خواندنی readyState وضعیت اتصال را نشان می‌دهد. این ویژگی می‌تواند مقادیر زیر را داشته باشد:

  • مقدار 0 نشان‌دهنده این است که اتصال هنوز برقرار نشده است.
  • مقدار 1 نشان‌دهنده این است که اتصال برقرار شده و امکان ارتباط وجود دارد.
  • مقدار 2 نشان‌دهنده این است که اتصال در حال طی کردن مراحل دست‌تکانی پایانی (closing handshake) است.
  • مقدار 3 نشان‌دهنده این است که اتصال بسته شده است یا امکان باز کردن آن وجود نداشته است.
Socket.bufferedAmount

ویژگی فقط‌خواندنی bufferedAmount تعداد بایت‌های متن UTF-8 را نشان می‌دهد که با استفاده از متد send() در صف ارسال قرار گرفته‌اند.

رویدادهای وب‌سوکت (Events)

در ادامه رویدادهای مرتبط با شیء WebSocket آورده شده است. با این فرض که شیء سوکت را مطابق آنچه در بالا گفته شد ساخته‌ایم:

رویداد مقادیر و گرداننده رویداد مقادیر و توضیحات
open Socket.onopen این رویداد زمانی رخ می‌دهد که اتصال سوکت برقرار شود.
message Socket.onmessage این رویداد زمانی رخ می‌دهد که کلاینت داده‌ای از سرور دریافت کند.
error Socket.onerror این رویداد زمانی رخ می‌دهد که خطایی در ارتباط به‌وجود آید.
close Socket.onclose این رویداد زمانی رخ می‌دهد که اتصال بسته شود.

متدهای وب‌سوکت (Methods)

در ادامه متدهای مرتبط با شیء WebSocket آورده شده است. با این فرض که شیء سوکت را مطابق آنچه در بالا گفته شد ساخته‌ایم:

متد توضیحات
Socket.send()

متد send(data) داده‌ها را با استفاده از اتصال موجود منتقل می‌کند.
Socket.close()

متد close() برای خاتمه دادن به هرگونه اتصال موجود استفاده می‌شود.

راه‌اندازی سرور وب‌سوکت با پایتون

گام ۱. نصب پایتون
اگر پایتون روی دستگاه شما نصب نیست، آن را از Python.org دانلود و نصب کنید.
گام ۲. نصب کتابخانه WebSocket
پس از نصب پایتون، یک پوشه برای پروژه خود بسازید و آن پوشه را در خط فرمان (Command Prompt) یا ترمینال باز کنید. سپس این دستور را اجرا کنید.
pip install websockets
گام ۳. ساخت سرور وب‌سوکت
یک ویرایشگر متن باز کنید و کد پایتون زیر را بنویسید. سپس آن را به عنوان یک فایل در پوشه با نام 'server.py' ذخیره کنید.
import asyncio
import websockets

async def echo(websocket, path):
    async for message in websocket:
        print(f"Received message: {message}")
        await websocket.send(f"Server: You said \"{message}\"")

start_server = websockets.serve(echo, "localhost", 8080)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
گام ۴. اجرای سرور
در ترمینال به پوشه پروژه خود بروید و این دستور را برای شروع به کار سرور اجرا کنید.
python server.py

راه‌اندازی کلاینت HTML برای سرور

تا اینجا یک سرور پایتون برای وب‌سوکت راه‌اندازی کرده‌ایم. سرور در ترمینال شما در حال اجرا خواهد بود، بنابراین هر پیامی که به سرور ارسال شود در ترمینال قابل مشاهده است. در اینجا خواهیم دید که چگونه با استفاده از HTML و JavaScript یک کلاینت راه‌اندازی کنیم که بتواند پیام‌ها را از سرور دریافت کند و همچنین پیام‌هایی را به سرور بفرستد.

یک فایل HTML با نام 'index.html' در پوشه ایجاد کنید.

<!DOCTYPE html>
<html lang="en">
     
<head>
   <title>WebSocket Example</title>
</head>

<body>
   <h1>WebSocket Client</h1>
   <input type="text" 
          id="messageInput" 
          placeholder="Type a message..." />
   <button id="sendButton">
      Send
   </button>
   <div id="messages">
   </div>

   <script>
      const socket = new WebSocket('ws://localhost:8080');

      socket.addEventListener('open', 
      () => {
      console.log('Connected to server');
      });

      socket.addEventListener('message', 
      (event) => {
      const messageDiv = document.createElement('div');
      messageDiv.textContent = event.data;
      document.getElementById('messages').appendChild(messageDiv);
      });

      document.getElementById('sendButton').addEventListener('click', 
      () => {
      const messageInput = document.getElementById('messageInput');
      const message = messageInput.value;
      socket.send(message);
      messageInput.value = '';
      });
   </script>
</body>
</html>

پیشرفت مطالعه: وضعیت خوانده‌شدن این درس فقط در همین مرورگر ذخیره می‌شود؛ بدون نیاز به حساب کاربری.

درس قبلی: وب ورکرها API درس بعدی: حافظه وب