كيف يعمل الإنترنت؟ فهم العلاقة بين العميل والخادم

في هذا الدرس سنتعرف على الكيفية التي يعمل بها الإنترنت خلف الكواليس. سنفهم الفرق بين العميل (Client) مثل متصفحك أو هاتفك، والخادم (Server) الذي يخزن المواقع والملفات. كما سنستعرض دورة الطلب والاستجابة (Request & Response Cycle) من لحظة كتابة عنوان الموقع وحتى ظهور الصفحة أمامك.

بيئة العمل والمتطلبات التقنية

تخيل معايا إنك دلوقتي فتحت المتصفح وكتبت: google.com … في ثواني الصفحة ظهرت قدامك!
لكن هل سألت نفسك: إيه اللي بيحصل وراء الكواليس؟
إزاي جهازك الصغير اللي في إيدك يقدر يوصل لملايين الصفحات والمواقع في لحظة؟

السر كله في حاجة اسمها: العميل (Client) و الخادم (Server). العميل هو جهازك أو المتصفح اللي بيطلب المعلومة، والخادم هو الكمبيوتر القوي اللي بيخزن الملفات وبيبعتلك النتيجة.

في الدرس ده، هنتعلم خطوة بخطوة إزاي بتتم الرحلة من أول ما تكتب عنوان الموقع لحد ما الصفحة بتظهر كاملة قدامك. هنفهم دورة الطلب والاستجابة اللي هي قلب الإنترنت.

1) ما هو الإنترنت؟

الإنترنت ببساطة هو: شبكة من الشبكات تربط أجهزة العالم ببعضها عبر قواعد موحدة تسمى بروتوكولات (أشهرها TCP/IP). أي جهاز متصل كمبيوتر، موبايل، خادم يستطيع تبادل البيانات على هذه الشبكة.

العناصر الأساسية

اسم الموقع… وليس الرقم!

الناس تتذكر أسماء مثل example.com، لكن الشبكات تتعامل بأرقام IP. هنا يأتي دور DNS: نظام أسماء النطاقات الذي يحوّل الاسم إلى عنوان IP (يشبه “دفتر عناوين” للإنترنت).

فرق مهم: الإنترنت ≠ الويب

البنية التحتية لنقل البيانات.

خدمة تعمل فوق الإنترنت باستخدام HTTP/HTTPS لعرض صفحات HTML. (هناك خدمات أخرى فوق الإنترنت مثل البريد الإلكتروني … إلخ).

رحلة مبسطة عند كتابة عنوان موقع

Your Browser (Client)
        │  URL
        ▼
      DNS Lookup ──► IP Address
        │
        ▼  HTTP/HTTPS Request
      Server (Website)
        │
        ▼  Response (HTML/CSS/JS)
Your Browser renders the page

لمحة عن الأمان

HTTPS هو HTTP + TLS وهو تشفير مسؤل عن حماية البيانات أثناء انتقالها ويظهر ذلك في القفل الموجود في شريط العنوان.

مصطلحات مفتاحية

تطوير الكود

2) العميل (Client) والخادم (Server)

الفكرة الأساسية

الويب قائم على نموذج العميل–الخادم (Client–Server Model).

دورة الطلب والاستجابة (Request–Response Cycle)

مثلًا: لما تكتب example.com/about المتصفح يبعت رسالة HTTP للخادم بتقول:

مثال مبسط

النتيجة: الموقع يعمل أمامك.

شكل توضيحي (ASCII Art)

[Client: Browser]  --->  (HTTP Request)  --->  [Server: Website]
[Client: Browser]  <--- (HTTP Response)  <---  [Server: Website]

مثال عملي (Request/Response حقيقي باستخدام curl)

لو كتبت في التيرمنال:

curl -i https://example.com

هتشوف استجابة (Response Headers + HTML) من الخادم مباشرة. ده يوضح إن أي متصفح ما هو إلا أداة بتنظم وتعرض الرد ده بشكل منظم وسهل القراءه والتعامل معه.

3) ماذا يحدث عند كتابة عنوان موقع؟

لما تكتب في المتصفح: www.example.com … بيحصل سلسلة خطوات منظمة لحد ما الصفحة تظهر قدامك:

1. إدخال العنوان (URL)

العنوان اللي كتبته اسمه URL (Uniform Resource Locator). مثل:

https://www.example.com/about

بيتكون من:

2. البحث عن الخادم (DNS Lookup)

المتصفح ما يعرف اسم "example.com" بشكل مباشر. لابد ان يتحول الاسم إلى IP Address رقم يشبه (192.168.1.1). هنا دور DNS (Domain Name System) اللي بيشتغل زي دفتر تليفونات الإنترنت: "example.com" → "93.184.216.34".

3. إنشاء الاتصال (TCP/IP + HTTPS)

4. إرسال الطلب (HTTP Request)

GET /about HTTP/1.1
Host: www.example.com

5. استلام الاستجابة (HTTP Response)

HTTP/1.1 200 OK
Content-Type: text/html

ومعاها ملفات HTML (وفي طلبات تالية CSS, JS, Images…).

6. بناء الصفحة (Rendering)

المتصفح يستقبل الملفات ويبدأ يقرأ HTML يبني هيكل الصفحة. يطبق CSS يضيف الألوان والتصميم. يشغل JavaScript يضيف التفاعل والحركة. يعرض النتيجة النهائية على الشاشة.

الشكل التوضيحي المبسط

URL → DNS → TCP/IP → HTTP Request → Server → HTTP Response → Browser Render → Web Page

4) مكونات صفحة الويب (HTML – CSS – JavaScript)

بعد ما المتصفح يستلم الاستجابة من الخادم، يبتدي يكون الصفحة اللي بتشوفها. الصفحة دي مبنية من 3 عناصر أساسية، كل واحد منهم ليه دور محدد:

أولاً: HTML (هيكل الصفحة)

مثال بسيط:

<h1>Welcome to My Website</h1>
<p>This is a short introduction.</p>
<img src="profile.jpg" alt="My Profile Picture">

ثانياً: CSS (التصميم والشكل)

نفس مثالنا بعد إضافة CSS:

h1 {
  color: blue;
  text-align: center;
}

p {
  font-size: 18px;
  color: gray;
}

ثالثا: JavaScript (التفاعل والحركة)

JavaScript هو اللي بيخلي الصفحة "حية" وتتفاعل مع المستخدم.مثل:

مثال صغير:

document.querySelector("h1").onclick = function() {
  alert("You clicked the heading!");
}

كيف يشتغلوا مع بعض؟

5) دورة الطلب والاستجابة (Client–Server Model)

الإنترنت يعمل طول الوقت على مفهوم بسيط اسمه: الطلب (Request) و الاستجابة (Response).

خلينا نشوفها خطوة بخطوة:

الخطوة 1: العميل يطلب

لما تكتب رابط (URL) في المتصفح وتضغط Enter المتصفح (Client) يبعت طلب للخادم.

الطلب ده بيتضمن:

الخطوة 2: الخادم يستقبل

الخادم (Server) يستقبل الطلب، ويشوف إنت عايز إيه. لو الصفحة موجودة، يجهّزها في صورة استجابة (Response).

الخطوة 3: الخادم يرد

الاستجابة اللي بيرجعها الخادم بتكون غالبًا:

الخطوة 4: العميل يعرض

المتصفح يستلم الملفات، ويجمعها مع بعض ويعرضها أمامك كصفحة ويب.

الخلاصة

الإنترنت شبكة عالمية بتوصل ملايين الأجهزة مع بعض. عشان نوصل لموقع لازم نكتب اسمه (Domain) اللي بيتترجم لعنوان رقمي (IP). المتصفح (Client) هو اللي بيطلب الصفحة. الخادم (Server) هو اللي بيخزن ويرجع الملفات. دورة الإنترنت كلها قائمة على الطلب (Request) و الاستجابة (Response).