دروس أساسيات HTML5

API HTML5

وسائط HTML5

صور HTML5

معايير كتابة الكود في HTML5 أحداث إرسال الخادم في HTML5

WebSocket في HTML5

WebSocket هو protokol يقدمه HTML5 لتبادل الاتصال المزدوج الكامل عبر اتصال TCP الواحد.

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

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

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

يستطيع протوكول WebSocket المحدد من قبل HTML5 توفير موارد الخادم وعرض النطاق الترددي بشكل أفضل، ويمكنه إجراء اتصالات في الوقت الحقيقي بشكل أفضل.

يستخدم المتصفح JavaScript لإرسال طلب إنشاء اتصال WebSocket إلى الخادم، بعد إنشاء الاتصال، يمكن للعميل والخادم تبادل البيانات مباشرة عبر اتصال TCP.

بعد الحصول على اتصال WebSocket، يمكنك استخدام send() الطريقة لإرسال بيانات إلى الخادم، عبر onmessage لإعداد الاستقبال البيانات التي يعود بها الخادم.

استخدام هذا API لإنشاء كائن WebSocket.

var Socket = new WebSocket(url, [protocol]);

الاولى في الكود التالي، parameter url، يحدد عنوان URL للاتصال. الثانية parameter protocol، اختياري، يحدد البروتوكول الفرعي المقبول.

خصائص WebSocket

فيما يلي خصائص WebSocket. افترض أننا قمنا بإنشاء عميل Socket باستخدام الكود التالي:

خصائص	وصف
Socket.readyState	خاصيةقراءة فقط readyState يُمثل حالة الاتصال، يمكن أن تكون القيم التالية: 0 - يعني أن الاتصال لم يتم إنشاؤه بعد. 1 - يعني أن الاتصال قد تم إنشاؤه، يمكنه القيام بالتواصل. 2 - يعني أن الاتصال يتم إغلاقه. 3 - يعني أن الاتصال قد تم إغلاقه أو لا يمكن فتح الاتصال.
Socket.bufferedAmount	خاصيةقراءة فقط bufferedAmount عدد الثقوب الثنائية للنصوص UTF-8 التي تم وضعها في الصف الثابت بانتظار النقل ولكن لم يتم إرسالها بعد.

أحداث WebSocket

فيما يلي أحداث WebSocket المختلفة. افترض أننا قمنا بإنشاء عميل Socket باستخدام الكود التالي:

حدث	برنامج معالجة الحوادث	وصف
فتح	Socket.onopen	تُشغل عند إنشاء الاتصال
الرسالة	Socket.onmessage	تُشغل عند استقبال العملاء للبيانات من الخادم
خطأ	Socket.onerror	تُشغل عند حدوث خطأ في التواصل
إغلاق	Socket.onclose	تُشغل عند إغلاق الاتصال

طريقة WebSocket

فيما يلي طريقة WebSocket المختلفة. افترض أننا قمنا بإنشاء عميل Socket باستخدام الكود التالي:

الطريقة	وصف
Socket.send()	إرسال بيانات باستخدام الاتصال
Socket.close()	إغلاق الاتصال

مثال على WebSocket

بروتوكول WebSocket هو بروتوكول يعتمد على TCP.

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

HTML و JavaScript للعميل

يتم دعم واجهة WebSocket() حاليًا من قبل معظم المتصفحات، يمكنك تجربة المثال في المتصفحات التالية: Chrome, Mozilla, Opera و Safari.

محتويات ملف w3codebox_websocket.html

مثال

<!DOCTYPE HTML>
<html>
　　　<head>
　　　<meta charset="utf-8">
　　　<title>طريقة استخدام WebSocket, شبكة الدليل الأساسي (oldtoolbag.com)</title>
　　　　
　　　　　　<script type="text/javascript">
　　　　　　　　　function WebSocketTest()
　　　　　　　　　{
　　　　　　　　　var x = document.getElementById("websocket");
　　　　　　　　　　　　if ("WebSocket" in window)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　x.innerHTML="يدعم متصفحك WebSocket!";
　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　// فتح websocket
　　　　　　　　　　　　　　　var ws = new WebSocket("ws://echo.websocket.org");
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onopen = function()
　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　// WebSocket متصل بالفعل،استخدم طريقة send() لإرسال البيانات
　　　　　　　　　　　　　　　　　　ws.send("إرسال بيانات");
　　　　　　　　　　　　　　　　　　x.innerHTML="جاري إرسال البيانات...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onmessage = function(evt)　
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　var received_msg = evt.data;
　　　　　　　　　　　　　　　　　　x.innerHTML="تم استقبال البيانات, دليل أساسي (oldtoolbag.com)...";
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　ws.onclose = function()
　　　　　　　　　　　　　　　{　
　　　　　　　　　　　　　　　　　　// إغلاق websocket
　　　　　　　　　　　　　　　　　　x.innerHTML="الإتصال مغلق...";　
　　　　　　　　　　　　　　　};
　　　　　　　　　　　　}
　　　　　　　　　　　　
　　　　　　　　　　　　else
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　// متصفح غير يدعم WebSocket
　　　　　　　　　　　　　　　x.innerHTML="متصفحك لا يدعم WebSocket!";
　　　　　　　　　　　　}
　　　　　　　　　}
　　　　　　</script>
　　　　　　　　
　　　</head>
　　　<body>
　　　　　　　
　　　　　　<div id="sse">
　　　　　　　　　<input type="button" onclick="WebSocketTest()" value="تشغيل WebSocket">
　　　　　　</div>
　　　　　　<div id="websocket"></div>
　　　　　　
　　　</body>
</html>

اختبار لـ ‹/›

نتائج الاختبار في الشكل التالي:

الفرق بين WebSocket و Socket

يملك الاتصال البرمجي سبع طبقات، الطبقات الثلاث السفلية تتجه نحو اتصال البيانات، والطبقات الثلاث العليا تتجه نحو معالجة البيانات، بينما الطبقة العلوية للتحويل هي جسر يربط الطبقات الثلاث العليا والثلاث السفلية، وكل طبقة تقوم بعمل مختلف، ويعتمد البروتوكول العليا على البروتوكول السفلي. بناءً على مفهوم هذه هيكل الاتصال.
Socket ليست بروتوكولًا بالفعل، بل هي طبقة抽象ة للبرمجة العليا للاتصال بين طبقة التطبيق وأسرعة بروتوكول TCP/IP، وهي مجموعة من واجهات البرمجة. عند الاتصال بين جهازين، يُطلب من Socket تنظيم البيانات لتناسب البروتوكول المحدد. الاتصال بتكوين TCP يعتمد على بروتوكول IP الأساسي، والاتصال ببروتوكول IP يعتمد على الطبقات الأدنى مثل الطبقة العليا للرابط.
WebSocket هو بروتوكول طبقة التطبيق النموذجي.

Socket هو بروتوكول طبقة التحكم في التحويل
WebSocket هو بروتوكول طبقة التطبيق

معايير كتابة الكود في HTML5 أحداث إرسال الخادم في HTML5