WebSockets & Realtime Systems Programming · درس

تنفيذ المنطق من جهة الخادم

اكتبوا تعليمات برمجية لإنشاء خادم WebSocket والاستماع إلى الاتصالات ومعالجة الأحداث الأساسية.

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

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

Server Logic Unveiled

Welcome back! In the previous lesson, we set up our Node.js project. Now, let's dive into building the actual server logic for our WebSocket application.

We'll learn how to create a WebSocket server, listen for incoming client connections, and handle basic events like receiving and sending messages.

Creating the WS Server

The first step is to create an instance of our WebSocket server. We'll use the ws library we installed earlier. It provides a WebSocket.Server class.

We need to specify a port for our server to listen on. Port 8080 is a common choice for development.

Try running this basic server setup:

const WebSocket = require('ws');

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

console.log('WebSocket server started on port 8080');

Listening for Connections

Our server is running, but it doesn't do much yet! The most fundamental event for a WebSocket server is 'connection'.

This event fires every time a new client successfully establishes a WebSocket connection with our server. The event handler receives a ws object, representing the individual client connection.

Let's add a handler to log when a client connects:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');
});

console.log('WebSocket server started on port 8080');

The Client WebSocket Object

When a client connects, the wss.on('connection') callback receives a ws object. This isn't the server itself, but an instance of WebSocket specific to that client.

It represents the communication channel with that single client.
We'll use this ws object to send messages to, and receive messages from, that particular client.

Think of it as a direct line to one person in a crowded room.

Handling Client Messages

Once a client is connected, it can send messages to our server. We need to listen for these messages using the 'message' event on the individual client's ws object.

The message handler receives the data sent by the client. For simplicity, we'll assume text messages for now.

Update your server to log any incoming messages:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
  });
});

console.log('WebSocket server started on port 8080');

Sending Data Back to Client

A key aspect of WebSockets is bidirectional communication. Not only can clients send messages to the server, but the server can also send messages back to specific clients.

We use the ws.send() method on the client's WebSocket object to send data. Let's create a simple 'echo' server that sends back whatever it receives!

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`); // Echo back!
  });
});

console.log('WebSocket server started on port 8080');

Handling Client Disconnections

Clients won't stay connected forever. They might close their browser tab, lose internet, or deliberately disconnect. It's crucial to handle these disconnections gracefully.

The 'close' event on the client's ws object tells us when a client has disconnected. This is useful for cleanup or logging.

Add a 'close' event handler to your server:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });
});

console.log('WebSocket server started on port 8080');

Dealing with Errors

Errors can occur at various stages �� network issues, malformed messages, or server problems. It's good practice to include error handling.

Client-specific errors: Use ws.on('error', ...) for issues related to a single client connection.
Server-wide errors: Use wss.on('error', ...) for problems affecting the entire WebSocket server.

Let's add basic error logging to our server:

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    ws.send(`Server received: ${message}`);
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });

  ws.on('error', function error(err) {
    console.error('Client WS Error:', err.message);
  });
});

wss.on('error', function serverError(err) {
  console.error('Server WS Error:', err.message);
});

console.log('WebSocket server started on port 8080');

Full Basic Server Example

You've now learned how to set up a WebSocket server, handle new connections, listen for incoming messages, send responses, and manage disconnections and errors.

This complete example brings all those concepts together, forming a robust foundation for your WebSocket applications.

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  console.log('Client connected!');

  ws.on('message', function incoming(message) {
    console.log(`Received from client: ${message}`);
    ws.send(`Echo: ${message}`); // Send message back to the same client
  });

  ws.on('close', function close() {
    console.log('Client disconnected!');
  });

  ws.on('error', function error(err) {
    console.error('Client connection error:', err);
  });
});

wss.on('listening', () => {
  console.log('WebSocket server is listening on port 8080');
});

wss.on('error', function serverError(err) {
  console.error('WebSocket server error:', err);
});

Server Logic Quiz

Which event handler is used on the server instance (wss) to detect when a new client connects?

Recap & Next Steps

Great work! You've successfully implemented the core server-side logic for a WebSocket application.

You learned to create a WebSocket.Server instance.
You handled 'connection', 'message', 'close', and 'error' events.
You can now send messages back to individual connected clients using ws.send().

Next, we'll explore how to send messages to ALL connected clients, a crucial feature for chat applications and other broadcast scenarios!

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

هل درس «تنفيذ المنطق من جهة الخادم» مجاني؟

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

ماذا ستتعلم في «تنفيذ المنطق من جهة الخادم»؟

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

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

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

كم من الوقت يستغرق درس «تنفيذ المنطق من جهة الخادم»؟

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

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

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

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

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