مقالة WebJX مقدمة: ميزة جديدة رائعة في HTML5 هي WebSockets ، والتي تتيح لنا التحدث إلى الخادم دون طلبات AJAX. اليوم ، ستسمح Bingo للجميع بتشغيل WebSocket عبر جانب الخادم من بيئة PHP ، وإنشاء العملاء ، وإرسال واستقبال معلومات من جانب الخادم من خلال بروتوكول WebSockets. ما هي WebSockets؟ Websockets ثنائية الاتجاه في واجهة (TCP)
ميزة جديدة رائعة في HTML5 هي WebSockets ، والتي تتيح لنا التحدث إلى الخادم دون طلبات AJAX. اليوم ، ستسمح Bingo للجميع بتشغيل WebSocket عبر جانب الخادم من بيئة PHP ، وإنشاء العملاء ، وإرسال واستقبال معلومات من جانب الخادم من خلال بروتوكول WebSockets.
ما هي WebSockets؟
WebSockets هي تقنية تقوم بالاتصال ثنائي الاتجاه على واجهة (TCP) ، ونوع تقنية الدفع. في الوقت نفسه ، ستظل WebSockets تعتمد على معيار W3C. حتى الآن ، دعمت أحدث إصدارات متصفحات Chrome و Safari Websockets بالفعل.
ماذا سيتم استبدال WebSockets؟
يمكن أن تحل WebSockets محل الاقتراع الطويل (تقنية PHP Server Push) ، وهو مفهوم مثير للاهتمام. يرسل العميل طلبًا إلى الخادم. الآن ، لن يستجيب الخادم للبيانات التي لم يتم إعدادها. سيبقي الاتصال مفتوحًا حتى تصبح أحدث البيانات جاهزة لإرسالها. بعد ذلك ، يتلقى العميل البيانات ثم يرسل طلبًا آخر. هذا له فوائده: تقليل الكمون في أي من الاتصالات ، ولا يحتاج إلى إنشاء اتصال جديد آخر عند فتح اتصال واحد بالفعل. لكن الصبغة الطويلة ليست تقنية خيالية ، ولا يزال من الممكن أن تحدث توقف الطلب ، لذلك سيكون هناك حاجة إلى اتصال جديد.
تستخدم بعض تطبيقات Ajax التكنولوجيا المذكورة أعلاه - والتي تعزى غالبًا إلى استخدام الموارد المنخفضة.
فقط تخيل كم سيكون رائعًا إذا سيبدأ الخادم ويرسل بيانات إلى العملاء الذين يرغبون في تلقيه دون الحاجة إلى إعداد بعض منافذ الاتصال مقدمًا! مرحبا بكم في عالم التكنولوجيا الدفع!
الخطوة 1: احصل على خادم WebSocket
سيركز هذا البرنامج التعليمي أكثر على إنشاء العميل بدلاً من تنفيذ الخادم.
يمكنني استخدام XAMPP استنادًا إلى Windows 7 لتنفيذ تشغيل PHP محليًا. phpwebsockets هو خادم WebSocket PHP. (في تجربتي ، هناك بعض المشكلات البسيطة في هذا الإصدار. لقد قمت ببعض التعديلات على ذلك وحملت الملف المصدر لمشاركته معك.) يمكن للإصدارات المختلفة أيضًا تنفيذ WebSocket. إذا تعذر استخدام المرء ، فيمكنك تجربة إصدارات أخرى أو متابعة قراءة البرنامج التعليمي التالي.
jwebsocket (جافا)
مقبس الويب-روبي (روبي)
مقبس IO-NODE (node.js)
ابدأ خادم Apache
الخطوة 2: تعديل عناوين URL والمنافذ
وفقًا للتثبيت السابق ، قم بتعديل الخادم ، ما يلي مثال في setup.class.php:
}
تصفح الملف وإجراء التغييرات إذا كان ذلك مناسبًا.
الخطوة 3: ابدأ في إنشاء عميل
ها هو ملف العميل. php:
> <>
>
>
>
> على سبيل المثال ، حاول "مرحبًا" ، "الاسم" ، "العمر" ، "اليوم">
> افصل >>
</html>
لقد أنشأنا القالب الأساسي: حاوية سجل الدردشة ، مربع إدخال الإدخال وزر غير متصل.
الخطوة 4: أضف بعض CSS
لا يوجد رمز خيالي ، فقط تعامل مع نمط العلامة.
جسم
رمادي
}
الخطوة 5: حدث WebSocket
أولاً ، دعونا نحاول أن نفهم مفهوم أحداث WebSocket:
أحداث WebSocket:
سوف نستخدم ثلاثة أحداث WebSocket:
OnoPen: عند فتح الواجهة
onMessage: عند استلام رسالة
Onclose: عندما تكون الواجهة مغلقة
كيف نحقق هذا؟
قم أولاً بإنشاء كائن WebSocket
ثم اكتشف الحدث على النحو التالي
المقبس.
}
افعل هذا عندما نتلقى الرسالة:
Socket.msgmsg) ؛ //مذهل!
}
لكننا ما زلنا نحاول تجنب استخدام التنبيه ، والآن يمكننا دمج ما تعلمناه في صفحة العميل.
الخطوة 6: جافا سكريبت
أولاً ، وضعنا الكود في الدالة المستند. جاهز لـ jQuery ، ثم نحتاج أيضًا إلى التحقق مما إذا كان متصفح المستخدم يدعم WebSocket. إذا لم يكن مدعومًا ، فسنضيف رابطًا إلى صفحة متصفح Chrome.
$
نافذة
$.
$.
كما ترون ، إذا كان متصفح المستخدم يدعم WebSocket ، فسوف نقوم بتنفيذ وظيفة Connect (). فيما يلي الوظيفة الأساسية ، سنبدأ في إنشاء الأحداث المفتوحة والإغلاق والاستلام.
سنقوم بتحديد عنوان URL على الخادم الخاص بنا.
قد تجد لماذا لا يوجد HTTP في عنوان URL؟ حسنًا ، نعم ، هذا عنوان URL WebSocket يستخدم بروتوكولًا مختلفًا. هنا مخطط انهيار عنوان URL: