WebSockets & Realtime Systems Programming · درس

الطلب والاستجابة عبر WebSockets

تعلّموا تقنيات لمحاكاة دلالات الطلب والاستجابة التقليدية باستخدام معرّفات رسائل WebSocket وإقرارات الاستلام.

الطلب والاستجابة عبر WebSockets درس مجاني في WebSockets & Realtime Systems Programming على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في WebSockets & Realtime Systems Programming، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة WebSockets & Realtime Systems Programming 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

Beyond Fire-and-Forget

WebSockets are fantastic for real-time, continuous streams of data. Think chat messages, live updates, or game states!

But what if you need to perform a traditional request-response interaction, like fetching specific data from a server and expecting a single, matching reply?

The Asynchronous Nature

Unlike HTTP, where each request gets an immediate, direct response, WebSockets operate on an asynchronous, message-based model.

When you send a message over a WebSocket, you don't automatically know which incoming message is its specific reply. It's like sending a letter and waiting for a specific reply letter in a pile of mail!

Unique Request Identifiers

To solve this, we introduce a crucial concept: Message IDs. Every time a client sends a request, it attaches a unique identifier.

The server then processes the request and includes that same identifier in its response. This allows the client to match the response to its original request.

Client-Side Request Tracking

On the client, we need a way to track which requests are pending and what to do when their responses arrive. A common pattern is to use a Map or object to store a Promise for each pending request.

Try running this basic setup in your browser's console:

const ws = new WebSocket("ws://localhost:8080");
const pendingRequests = new Map();

ws.onopen = () => console.log("WebSocket Connected!");
ws.onclose = () => console.log("WebSocket Disconnected.");
ws.onerror = (error) => console.error("WebSocket Error:", error);

// This will be updated later to handle responses

Server Responds with ID

The server's role is simple: when it receives a message with an id, it should process it and send back a response that includes the same id.

Here's a simplified Node.js server snippet:

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', ws => {
  ws.on('message', message => {
    const request = JSON.parse(message);
    console.log('Received:', request);

    // Assume processing takes time...
    setTimeout(() => {
      const response = {
        id: request.id, // Echo the original ID!
        type: 'response',
        payload: `Hello from server, for request ${request.id}`
      };
      ws.send(JSON.stringify(response));
    }, 1000);
  });
});
console.log('Server started on ws://localhost:8080');

The Full Cycle in Action

Let's trace a request-response cycle:

Client generates unique id (e.g., 1).
Client stores a Promise for id: 1 in pendingRequests.
Client sends {id: 1, type: 'fetchUser', userId: 123}.
Server receives, processes, and prepares response.
Server sends {id: 1, type: 'userFetched', data: {...}}.
Client receives message, looks up id: 1 in pendingRequests, and resolves its Promise.

A `sendRequest` Function

To make sending requests easier, we can wrap the logic in a helper function. This function will generate an ID, store a promise, send the message, and return the promise.

Add this to your client-side code:

let nextRequestId = 0;

function sendRequest(type, payload) {
  const requestId = nextRequestId++;
  const message = { id: requestId, type, payload };

  return new Promise((resolve, reject) => {
    pendingRequests.set(requestId, { resolve, reject, timeoutId: null });
    ws.send(JSON.stringify(message));
    console.log("Sent request:", message);

    // We'll add timeout logic soon!
  });
}

// Example usage (after ws is open):
// sendRequest('getUser', { id: 1 }).then(data => console.log(data));

Processing Server Responses

Now, let's update our client's ws.onmessage handler to correctly process incoming server responses and resolve (or reject) the associated promises.

This is where the pendingRequests map truly shines!

ws.onmessage = (event) => {
  const message = JSON.parse(event.data);
  console.log("Received:", message);

  const { id, error, payload } = message;
  if (pendingRequests.has(id)) {
    const { resolve, reject, timeoutId } = pendingRequests.get(id);
    clearTimeout(timeoutId); // Important: clear the timeout!
    pendingRequests.delete(id); // Remove from tracking

    if (error) {
      reject(new Error(error));
    } else {
      resolve(payload); // Resolve with the response payload
    }
  } else {
    console.warn("Unmatched message ID or broadcast received:", message);
    // Handle messages that are not direct responses to a request (e.g., broadcasts)
  }
};

Timeouts and Error Handling

What if the server never responds? Or the connection drops?

It's crucial to implement timeouts for pending requests. If a response isn't received within a set duration, the client should automatically reject the promise with a timeout error.

This prevents requests from hanging indefinitely and consuming memory.

Check Your Understanding

Which of the following are essential components for implementing a robust request-response pattern over WebSockets?

Recap: Request-Response

You've learned how to simulate a traditional request-response model using WebSockets!

Unique Message IDs: Attach an ID to each request.
Client-Side Tracking: Use a Map to store Promises for pending requests.
Server Echo: Server includes the request ID in its response.
Timeouts: Implement timeouts to handle unreceived responses gracefully.

This pattern makes WebSockets incredibly versatile for both streaming and discrete data exchanges!

الأسئلة الشائعة

هل درس «الطلب والاستجابة عبر WebSockets» مجاني؟

نعم — نص درس «الطلب والاستجابة عبر WebSockets» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة WebSockets & Realtime Systems Programming، انتقل إلى CoddyKit PRO. تتضمن دورة WebSockets & Realtime Systems Programming 4 دروس في المجموع.

ماذا ستتعلم في «الطلب والاستجابة عبر WebSockets»؟

تعلّموا تقنيات لمحاكاة دلالات الطلب والاستجابة التقليدية باستخدام معرّفات رسائل WebSocket وإقرارات الاستلام. تتمرن على WebSockets & Realtime Systems Programming مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ WebSockets & Realtime Systems Programming؟

لا تُشترط خبرة سابقة. WebSockets & Realtime Systems Programming على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «الطلب والاستجابة عبر WebSockets»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس WebSockets & Realtime Systems Programming هذا؟

نعم. كل درس في WebSockets & Realtime Systems Programming يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى WebSockets & Realtime Systems Programming