ما هو WebSocket؟ كيف يتم استخدامه؟ ما هي مزاياه؟ ما هي الاختلافات

ما هو WebSocket؟ كيف يتم استخدامه؟ ما هي مزاياه؟ ما هي الاختلافات بينه وبين AJAX و Axios؟

5556

16 Aralık 2025 Salı - 09:00 (4 Saat önce)

WebSocket هو بروتوكول اتصال تدعمه العديد من متصفحات الويب الحديثة ومنصات الخوادم. يتيح هذا البروتوكول اتصالًا ثنائي الاتجاه بين متصفح الويب والخادم. بينما يستخدم بروتوكول HTTP التقليدي نموذج "الطلب والاستجابة" للطلبات من العميل إلى الخادم، مع WebSocket يمكن للخادم أيضًا إرسال البيانات إلى العميل. وهذا أمر بالغ الأهمية لدعم التطبيقات في الوقت الفعلي والمواقع التفاعلية.

يوفر WebSocket اتصالًا ثنائي الاتجاه بين العميل والخادم. لذلك، تعمل تقنية WebSocket بين العميل والخادم. ومع ذلك، يلزم وجود دعم لـ WebSocket على جانب الخادم. بمجرد إنشاء اتصال بين العميل والخادم، يمكن لكلا الطرفين إرسال البيانات واستقبالها. وبالتالي، لتمكين الاتصال في الوقت الفعلي باستخدام WebSocket، يجب أن يوجد رمز تطبيق مناسب على كل من جانب العميل والخادم. على سبيل المثال، يمكن لمتصفح الويب استخدام WebSocket على جانب العميل، في حين يمكن لخادم الويب قبول اتصالات WebSocket والتعامل معها على جانب الخادم. بهذه الطريقة، يسهل الاتصال في الوقت الفعلي باستخدام WebSocket.

الميزات الأساسية لـ WebSocket هي:

اتصال ثنائي كامل: يمكن لكل من العميل والخادم إرسال البيانات إلى بعضهما البعض بعد إنشاء الاتصال.
كتم زمني منخفض: يقوم WebSocket بتبادل البيانات مباشرة دون بيانات رأس إضافية غير ضرورية مثل HTTP، مما يؤدي إلى كتم زمني أقل.
اتصال واحد: يمكن استخدام اتصال واحد لتبادل بيانات متعددة، مما يقلل من تكاليف إنشاء اتصالات غير ضرورية.
إمكانية توسيع البروتوكول: يمكن تخصيص WebSocket وتوسيعه باستخدام امتدادات البروتوكول.

يُستخدم WebSocket في مجموعة متنوعة من السيناريوهات التي تتطلب اتصالًا في الوقت الفعلي في التطبيقات المستندة إلى الويب. وهو مثالي للتطبيقات مثل الدردشة الحية والألعاب عبر الإنترنت والتطبيقات المالية والتحليلات في الوقت الفعلي.

بعض حالات استخدام WebSocket:

تطبيقات الدردشة الحية: WebSocket مثالي لتطبيقات الدردشة الحية حيث يمكن للمستخدمين التواصل في الوقت الفعلي. يعزز الإرسال والاستقبال السريع للرسائل تجربة المستخدم.
ألعاب الوقت الفعلي: تتطلب الألعاب متعددة اللاعبين عبر الإنترنت تبادل بيانات سريع ومستمر بين اللاعبين. WebSocket مثالي لمعالجة تفاعلات المستخدم في الوقت الفعلي في مثل هذه الألعاب.
التطبيقات المالية: تتغير أسعار الأسهم والعملات المشفرة والأصول المالية الأخرى بسرعة. يمكن للتطبيقات المالية استخدام WebSocket لمراقبة بيانات السوق في الوقت الفعلي وإرسال إشعارات فورية للمستخدمين.
التحليلات في الوقت الفعلي: يمكن استخدام WebSocket لمعالجة البيانات الضخمة والتحليلات في الوقت الفعلي. على سبيل المثال، يمكن لتطبيق تحليل بيانات البث معالجة البيانات الواردة على الفور وعرض النتائج للمستخدمين.
التحكم والمراقبة عن بُعد: في التطبيقات مثل أجهزة إنترنت الأشياء وأنظمة التحكم الصناعية، يمكن استخدام WebSocket للتواصل المستمر مع الأجهزة ومراقبة الحالة.
تحميل الملفات بالسحب والإفلات: يمكن استخدام WebSocket لمراقبة تحميل الملفات بالسحب والإفلات في الوقت الفعلي وعرض التقدم للمستخدمين.

هذه السيناريوهات ليست سوى أمثلة قليلة على WebSocket، وهذه التكنولوجيا هي حل مناسب للعديد من التطبيقات المختلفة التي تتطلب اتصالًا في الوقت الفعلي في مجالات متنوعة.

مقارنة WebSocket مع AJAX و Axios
يختلف WebSocket كبروتوكول اتصال عن طرق الاتصال المستندة إلى HTTP مثل AJAX و Axios، وله حالات استخدام مختلفة. إليك مقارنة بين WebSocket و AJAX و Axios:

القرب والاتصال في الوقت الفعلي:

WebSocket: مثالي للاتصال في الوقت الفعلي. يوفر اتصالًا ثنائي الاتجاه ومستمرًا بين الخادم والعميل. يمكن استخدامه في سيناريوهات مثل تطبيقات الدردشة الحية وألعاب الوقت الفعلي.
AJAX و Axios: توفر التقنيات المستندة إلى HTTP مثل AJAX و Axios اتصالًا أحادي الاتجاه مع الخادم. يرسل العميل طلبًا إلى الخادم ويتلقى استجابة. هذا مفيد لتبادل البيانات دون إعادة تحميل الصفحة ولكنه أقل ملاءمة للاتصال في الوقت الفعلي مقارنة بـ WebSocket.

حركة البيانات:

WebSocket: بعد إنشاء الاتصال، يرسل ويتلقى البيانات دون بيانات رأس غير ضرورية. هذا يؤدي إلى حركة بيانات أقل وزمن انتقال أقل.
AJAX و Axios: تضيف الاتصالات المستندة إلى HTTP بيانات رأس لكل طلب، مما قد يؤدي إلى زيادة حركة البيانات وزمن انتقال أعلى.

إدارة الاتصال:

WebSocket: يوفر اتصالًا مستمرًا عبر اتصال واحد. بمجرد إنشاء الاتصال، ليست هناك حاجة لإعادة الاتصال مرارًا لتبادل البيانات بين العميل والخادم.
AJAX و Axios: يتطلب كل طلب طلب HTTP منفصل، مما يجعل إدارة الاتصال أكثر تعقيدًا. يمكن أن يؤدي هذا إلى تكاليف اتصال غير ضرورية.

المنصات المدعومة:

WebSocket: مدعوم من قبل متصفحات الويب الحديثة ومنصات الخوادم. ومع ذلك، لا تدعم بعض المتصفحات القديمة ومنصات الخوادم WebSocket.
AJAX و Axios: مدعومة من قبل جميع متصفحات الويب ومنصات الخوادم تقريبًا، مما يوفر توافقًا أوسع.

في الختام، يُعد WebSocket مثاليًا للتطبيقات التي تتطلب اتصالًا في الوقت الفعلي، ولكن له حالة استخدام أكثر تحديدًا مقارنة بالتقنيات المستندة إلى HTTP. تُستخدم التقنيات المستندة إلى HTTP مثل AJAX و Axios على نطاق أوسع لتبادل البيانات للأغراض العامة.

مثال على الاستخدام
يوضح هذا المثال كيفية الاتصال من عميل JavaScript إلى خادم WebSocket وإرسال الرسائل واستقبالها. في هذا المثال، سنقوم بإنشاء خادم WebSocket بسيط باستخدام Node.js ثم الاتصال بهذا الخادم باستخدام JavaScript في ملف HTML.

خادم WebSocket (Node.js):

const WebSocket = require('ws');

// WebSocket sunucusunu oluştur
const wss = new WebSocket.Server({ port: 8080 });

// Yeni bir bağlantı geldiğinde
wss.on('connection', function connection(ws) {
console.log('Yeni bir bağlantı oluşturuldu.');

// İstemciden gelen mesajları dinle
ws.on('message', function incoming(message) {
console.log('İstemciden mesaj alındı:', message);

// Gelen mesajı geri gönder
ws.send('Sunucudan alındı: ' + message);
});
});

عميل WebSocket (HTML و JavaScript):

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

// Sunucudan gelen mesajları dinle
socket.onmessage = function(event) {
const outputDiv = document.getElementById('output');
outputDiv.innerHTML += ' ' + event.data + ' ';

};

// Mesaj gönderme işlevi
function sendMessage() {
const inputField = document.getElementById('messageInput');
const message = inputField.value;
socket.send(message);
inputField.value = ''; // input alanını temizle
}

يقوم المثال أعلاه بإنشاء خادم WebSocket والاتصال به باستخدام JavaScript داخل ملف HTML على جانب العميل. عندما يدخل المستخدم رسائله في مربع إدخال النص ويضغط على زر "إرسال الرسالة"، يرسل العميل هذه الرسالة إلى الخادم ويعرض رد الخادم على الشاشة.

خادم ميني سوكيت لبث بيانات Paribu BTC

"use strict";

process.title = 'btc paribu';

var webSocketsServerPort = 1337;

var webSocketServer = require('websocket').server;
var http = require('http');
var axios = require('axios');
var uuid = require('uuid');

axios.defaults.timeout = 180000;

var clients = [];

/**
* HTTP server
*/
var server = null;

function createServer() {
server = http.createServer(function (request, response) { });

server.listen(webSocketsServerPort, function () {
console.log((new Date()) + " Server is listening on port " + webSocketsServerPort);
});
var wsServer;

wsServer = new webSocketServer({
httpServer: server
});

wsServer.on('request', function (request) {
var connection = request.accept(null, request.origin);
var _cnnuuid = add_connection(connection);

connection.on('message', function (message) {
if (message.type === 'utf8') { // accept only text

}
});
connection.on('close', function (connection) {
clean_disconnect_cnn();
});
});
} // createserver

function add_connection(_cnn) {
let _cnnuuid = null;

try {
_cnnuuid = uuid.v4();
clients.push({ uuid: _cnnuuid, cnn: _cnn });

if (clients.length > 60){
serverreset();
}
} catch (error) {
console.error(error);
}

return _cnnuuid;
}

function getData() {
if (clients.length > 0 || clients.length == 0) {

axios.get('https://paribu.com/ticker')
.then(function (response) {
console.log((new Date()) + " Sended Data (Client : " + clients.length + ")");

sendData(response);

})
.catch(function (error) {
console.log("error https://paribu.com/ticker ");

setTimeout(() => {
getData();
}, 3000);

function clean_disconnect_cnn() {
if (clients.length == 0) return;
let disconnected = clients.filter(function (e) {
return !e.cnn.connected;
});

if (disconnected.length > 0) {
clients = clients.filter(function (e) { return e.cnn.connected; });

}
}

function sendData(_senddata) {
try {
if (_senddata != null && _senddata.data != undefined && _senddata.data != null) {
let jsondata = JSON.stringify(_senddata.data);

if (clients.length > 0) {
for (let i = 0; i < clients.length; i++) {
try {
if (clients[i].cnn.connected) {
clients[i].cnn.send(jsondata);
}
} catch (error) {
console.error(error);
}
}
}
} else {
console.log("not data received");
}
} catch (error) {
console.log(error);
}

setTimeout(() => { getData(); }, 5000);
}

createServer();
getData();

setInterval(() => {
serverreset();
}, 1000 * 60 * 2); // 2dk da bir restart

function serverreset(){
try {
clients.forEach(element => {
element.cnn.close();
});
} catch (error) {}

server.close();
clients = [];
console.log("server closed");
server = null;

createServer();
}

Web Yazılım
Yazılım

Tepkini Göster

Yorumlar

Sende Yorumunu Ekle

0 karakter