0

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

عادل محمد عادل محمد

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

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

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

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

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

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

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

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

  • الأجهزة (Hosts): أجهزة المستخدمين والخوادم.
  • مزودو الخدمة (ISP): الشركة المسؤله عن توصيل الإنترنت.
  • الموجهات (Routers): توجه البيانات لأقصروأفضل طريق.
  • العناوين (IP Addresses): “رقم” لكل جهاز على الشبكة.
  • البروتوكولات: قواعد التخاطب مثل HTTP/HTTPS لتصفح الويب.

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

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

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

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

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

  1. المتصفح يسأل DNS: “ما عنوان IP لـ example.com؟”
  2. يحصل على IP يطلب الصفحة من الخادم باستخدام HTTP/HTTPS.
  3. الخادم يرد بملفات (HTML, CSS, JS, صور).
  4. المتصفح يرتبها ويعرض الصفحة أمامك.


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  وهو تشفير مسؤل عن حماية البيانات أثناء انتقالها ويظهر ذلك في القفل الموجود في شريط العنوان.

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

  • IP: عنوان الجهاز على الشبكة.
  • DNS: يحول الاسم إلى IP.
  • HTTP/HTTPS: بروتوكول نقل صفحات الويب.
  • Client/Server: طالب الخدمة ومزودها.

تمرين سريع (2–3 دقائق)

  • افتح متصفحك، اكتب أي موقع، ثم افتح Developer Tools → Network.
لاحظ: أول طلب يتم تحميله في الصفحة HTML، تليه طلبات CSS ثم JS ثم Images. دون اسم المجال (الدومين) وجرب معرفة الـ IP عبر أي أداة نظام (اختياري).

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

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

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

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

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

العميل يرسل طلب (Request):
مثلًا: لما تكتب example.com/about المتصفح يبعت رسالة HTTP للخادم بتقول:
  • “أريد صفحة /about”
الخادم يعالج الطلب:
  • يراجع الكود أو الملفات عنده ثم  يحدد الاستجابة المناسبة.
الخادم يرسل الاستجابة (Response):
  • يبعث HTML + CSS + JS + صور … إلخ.
المتصفح يعرض الصفحة:
  • يقوم بترجمة الملفات إلى صفحة مرئية تقدر تتفاعل معاها.

مثال مبسط

  • العميل: "أعطني الصفحة الرئيسية"
  • الخادم: "تفضل، هذه صفحة index.html"
  • العميل: "أحتاج ملفات CSS"
  • الخادم: "ها هي style.css"
  • العميل: "والصور؟"
  • الخادم: "تفضل image1.png, image2.jpg"
  النتيجة: الموقع يعمل أمامك.

شكل توضيحي (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) من الخادم مباشرة. ده يوضح إن أي متصفح ما هو إلا أداة بتنظم وتعرض الرد ده بشكل منظم وسهل القراءه والتعامل معه.

تمرين بسيط (5 دقائق)

  1. افتح DevTools → Network في متصفحك.
  2. زر أي موقع (مثلا wikipedia.org).
  3. لاحظ أول طلب (Document – HTML).
  4. شوف بعده طلبات CSS, JS, Images.
  5. حاول ترسم "خريطة مصغّرة" للطلب والاستجابة زي اللي فوق.

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

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

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

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


https://www.example.com/about

بيتكون من:


  • Protocol: https → طريقة الاتصال.
  • Domain Name: example.com → اسم الموقع.
  • Path: /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)

  • بعد معرفة الـ IP، المتصفح يفتح "خط اتصال" مع الخادم.

  • البروتوكولات المسؤولة:

    • TCP/IP: أساس نقل البيانات.
    • TLS/SSL: لتأمين الاتصال (في حالة 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

تمرين سريع (Thinking Exercise)

  • افتح أي موقع جديد أول مرة (لم تدخله من قبل).
  • افتح DevTools → Network.
  • لاحظ أول خطوة DNS ثم TLS Handshake ثم تحميل HTML.
  • حاول تكتب الخطوات اللي فهمتها بكلماتك الخاصة.

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

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

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

  • HTML (Hypertext Markup Language) هو الأساس. بيحدد "إيه موجود" على الصفحة:
    • عناوين (Headings)
    • فقرات (Paragraphs)
    • صور (Images)
    • روابط (Links)

مثال بسيط:


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

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

  • CSS (Cascading Style Sheets) مسؤول عن:
    • الألوان
    • حجم الخطوط
    • ترتيب العناصر
    • الخلفيات

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


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

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

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

JavaScript هو اللي بيخلي الصفحة "حية" وتتفاعل مع المستخدم.مثل:
    • زر يفتح رسالة منبثقة.
    • شريط صور متحرك (Slider).
    • التحقق من بيانات النموذج قبل الإرسال.

مثال صغير:


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

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

  • HTML = (الهيكل).
  • CSS = (الشكل).
  • JavaScript = (الديناميكية).

تمرين عملي

  1. أنشئ ملف index.html.
  2. أضف فقرة وصورة.
  3. جرب تغير لون الفقرة بخاصية CSS.
  4. أضف كود JavaScript يغير النص لما تضغط على الفقرة.

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

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

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

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

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

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

  • عنوان الموقع (Domain)
  • نوع المتصفح
  • الصفحة أو الملف المطلوب

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

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

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

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

    • ملفات HTML
    • ملفات CSS
    • ملفات JavaScript
    • صور أو فيديو

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

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

    مثال توضيحي (تشبيه واقعي)

    تخيل نفسك داخل مطعم. إنت = العميل (Client). الجرسون = الوسيط اللي ياخد طلبك (Request). المطبخ = الخادم (Server). الأكل اللي بيرجعلك = الاستجابة (Response). الأكل أمامك = المتصفح يعرض الصفحة.

    تجربة عملية بسيطة

    1. افتح أي موقع (مثلاً: https://example.com).
    2. اضغط Right Click → Inspect → Network Tab.
    3. هتلاقي المتصفح بيبعت Requests كتير للخادم (ملفات HTML, CSS, JS, صور).
    4. وهتلاقي الخادم بيرجع Responses.

    تمرين عملي

    1. اكتب خطوات رحلة "طلب–استجابة" بكلماتك الخاصة.
    2. حاول تعمل رسمة بسيطة توضح العلاقة بين: Client ↔ Server.

    الخلاصة

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

     اختبار قصير

    1. من المسؤول عن تخزين الملفات وتشغيل المواقع؟

    2.عندما تكتب "google.com" في المتصفح، إيه أول حاجة بتحصل؟

    3. دورة الإنترنت بتتكون من خطوتين رئيسيتين هما:

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

    مقالات قد تهمك

    تعليقات



      function initializeIntersectionObserver(elements,options={threshold:0.1,rootMargin:'0px 0px -50px 0px'}){const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.style.opacity='1';entry.target.style.transform='translateY(0)'}})},options);elements.forEach(el=>{el.style.opacity='0';el.style.transform='translateY(30px)';el.style.transition='opacity 0.6s ease, transform 0.6s ease';observer.observe(el)})} function initializeSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();const target=document.querySelector(this.getAttribute('href'));if(target){target.scrollIntoView({behavior:'smooth',block:'start'})}})})} function initializeLazyLoading(images){const imageObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src||img.src;img.classList.remove('lazy');imageObserver.unobserve(img)}})});images.forEach(img=>{img.dataset.src=img.src;img.classList.add('lazy');imageObserver.observe(img)})} function debounce(func,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}} document.addEventListener('DOMContentLoaded',()=>{initializeSmoothScrolling();initializeLazyLoading(document.querySelectorAll('img'));initializeHeroSection();initializeFeaturedLessons();initializeBeginnersGuide();initializeRecentProjects();initializeNewsletter();initializeFAQ();initializeLatestArticles()})