پرش به مطلب اصلی

WebSocket

ابزاری برای پیاده‌سازی سوکت که به صورت پیش‌فرض داخل core اصلی javascript وجود داره و نیاز به ایمپورت پکیج، کتابخونه و یا ماژول خاصی نداره

در داخل Client با استفاده از کد زیر قابل دسترس هست:

const socket = new WebSocket();

داخل Server(Node.js) باید از پکیجی به اسم ws استفاده کنیم:

npm install ws

Server​

برای استارت سوکت در سرور ابتدا پکیج ws را نصب میکنیم

npm install --save ws

سپس یک سرور را به آن به عنوان پورتی برای فعالیت socket پاس میدهیم. و درنهایت سرور را روی پورت مدنظر ران میکنیم.

const http = require("http");
const webSocket = require("ws");

const server = http.createServer();
const ws = new webSocket.Server({ server });

server.listen(8000, () => console.log("Server runned on port 8000"));

حال برخی listener ها ws دارد که میتونیم با استفاده از آن دیتای رد و بدل شده رو بگیریم.

Headers​

برای مثل زمانی که header ارسال میشود میتونیم به استفاده از متد زیر هدر هارا دریافت کنیم:

ws.on("headers", (headers, req) => {
  console.log(headers);
});

خروجی headers شامل برخی موارد مانند آیدی کانکشن سوکت ایجاد شده و ... هست

Connection​

همچنین میتوانیم زمانی که کانکشن برقرار میشود آنرا با استفاده از متد زیر ترک کنیم:

ws.on("connection", (socket, req) => {
  console.log("Connection created successfully");
});

Message​

پیام‌هیایی که از سوی کلاینت ارسال میشود را هم میتوانیم به صورت زیر ترک کنیم:

ws.on("connection", (socket, req) => {
  console.log("Connection created successfully");

  socket.on("message", (data) => {
    console.log(data.toString());
  });
});

در اینجا مقدار data.toString شامل پیام کلاینت هست

Close, Error​

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

ws.on("close", () => console.log("Connection closed"));
ws.on("error", (err) => console.log("error :" + err));

Example​

یک مثال کامل از ایجاد سوکت در سمت سرور به صورت زیر هست :

server.js
const http = require("http");
const webSocket = require("ws");

const server = http.createServer();
const ws = new webSocket.Server({ server });

ws.on("headers", (headers, req) => {
  console.log(headers);
});

ws.on("connection", (socket, req) => {
  socket.send("Hello Client!");
  socket.on("message", (data) => {
    console.log(data.toString());
  });
});

ws.on("close", () => console.log("Connection closed"));
ws.on("error", (err) => console.log(err));

server.listen(8000, () => console.log("Server runned on port 8000"));

Client​

نحوه‌ی برقراری ارتباط با سوکت سرور از سوی کلاینت را اینجا توضیح میدیم:

نیاز به نصب پکیج خاصی نیست.

برای شروع کار یک کانکشن به url-ای که سوکت سرور روش قرار داره برقرار میکنیم:

const socket = new WebSocket("ws://localhost:8000");

دقت کن که ws:// به این خاطر هست که کانکشن ما روی پروتکل websocket برقرار هست. ما انواع پروتکل داریم که مانند http, https, ws, ftp, ... هستن که صرفا یسری قوانین برای خودشون دارن. توهم میتونی برای خودت یک پروتکل دلخواه با قوانین دلخواه بسازی !

onOpen​

زمانی که کانکشن به طور موفق با سوکت سرور برقرار بشه میتونیم از این متد استفاده کنیم:

socket.onopen = (event) => {
  console.log("Connection oppend successfully");
};

onMessage​

زمانی که پیامی از سرور دریافت میکنیم میتونیم با استفاده از این متد دریافتش بکنیم:

socket.onmessage = (event) => {
  console.log(event.data);
};

onClose​

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

socket.onclose = () => {
  console.log("Connection closed");
};

onerror​

زمانی که ارور داریم میتونیم این متد رو کال کنیم:

socket.onerror = (err) => {
  console.log("Error : " + err);
};

Example​

یک مثال از یک کلاینت برای برقراری ارتباط با سوکت سرور اینجا آوردیم:

const socket = new WebSocket("http://localhost:8000");

socket.onopen = (event) => {
  socket.send("Hello Server!");
};

socket.onmessage = (event) => {
  const p = document.createElement("p");
  p.innerText = event.data;
  document.body.appendChild(p);
  socket.send("Your message recived !");
};

socket.onclose = () => {
  console.log("Connection closed");
};

socket.onerror = (err) => {
  console.log(err);
};