HTML5 WebSockets TURIPAR

الكاتب：Eve Cole وقت التحديث：2025-02-06 13:43:41

ميزة جديدة رائعة في HTML5 هي WebSockets ، والتي تتيح لنا التحدث إلى الخادم دون طلبات AJAX. اليوم ، ستسمح Bingo للجميع بتشغيل WebSocket عبر جانب الخادم من بيئة PHP ، وإنشاء العملاء ، وإرسال واستقبال معلومات من جانب الخادم من خلال بروتوكول WebSockets.

ما هي WebSockets؟

WebSockets هي تقنية تقوم بالاتصال ثنائي الاتجاه على واجهة (TCP) ، ونوع تقنية الدفع. في الوقت نفسه ، ستظل WebSockets تعتمد على معيار W3C.

ماذا سيتم استبدال WebSockets؟ يمكن أن تحل WebSockets محل الاقتراع الطويل (تقنية PHP Server Push) ، وهو مفهوم مثير للاهتمام. يرسل العميل طلبًا إلى الخادم. ثم يرسل طلبًا آخر. هذا له فوائده: تقليل الكمون في أي من الاتصالات ، ولا يحتاج إلى إنشاء اتصال جديد آخر عند فتح اتصال واحد بالفعل. لكن الصبغة الطويلة ليست تقنية خيالية ، ولا يزال من الممكن أن تحدث توقف الطلب ، لذلك سيكون هناك حاجة إلى اتصال جديد.

تستخدم بعض تطبيقات Ajax التكنولوجيا المذكورة أعلاه - والتي تعزى غالبًا إلى استخدام الموارد المنخفضة.

فقط تخيل كم سيكون رائعًا إذا سيبدأ الخادم ويرسل بيانات إلى العملاء الذين يرغبون في تلقيه دون الحاجة إلى إعداد بعض منافذ الاتصال مقدمًا! مرحبا بكم في عالم التكنولوجيا الدفع!

الخطوة 1: احصل على خادم WebSocket

سيركز هذا البرنامج التعليمي أكثر على إنشاء العميل بدلاً من تنفيذ الخادم.

يمكنني استخدام XAMPP استنادًا إلى Windows 7 لتنفيذ تشغيل PHP محليًا. phpwebsockets هو خادم WebSocket PHP. (في تجربتي ، هناك بعض المشكلات البسيطة في هذا الإصدار. إصدارات أخرى.

jwebsocket (جافا)

مقبس الويب-روبي (روبي)

مقبس IO-NODE (node.js)

ابدأ خادم Apache

الخطوة 2: تعديل عناوين URL والمنافذ

وفقًا للتثبيت السابق ، قم بتعديل الخادم ، ما يلي مثال في setup.class.php:

الوظيفة العامة __construct ($ host = 'localhost' ، $ port = 8000 ، $ max = 100)
{
$ this-> CreateSocket ($ Host ، $ Port) ؛
}

تصفح الملف وإجراء التغييرات إذا كان ذلك مناسبًا.

الخطوة 3: ابدأ في إنشاء عميل

ها هو ملف العميل. php:

<! doctype html>
<html>
<head>
<script src =
"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<title> عميل WebSockets </title>
</head>
<body>
<div id = "wrapper">
<div id = "container">
<H1> عميل WebSockets </h1>
<div id = "chatlog">
</viv> <!-#Chatlog->
<p id = "أمثلة"> على سبيل المثال ، حاول "مرحبا" ، "الاسم" ، "العمر" ، "اليوم" </p>
<input id = "text" type = "text" />
<button id = "disconnect"> افصل </button>
</viv> <!- #container->
</div>
</body>
</html>

لقد أنشأنا القالب الأساسي: حاوية سجل الدردشة ، مربع إدخال الإدخال وزر غير متصل.

الخطوة 4: أضف بعض CSS

لا يوجد رمز خيالي ، فقط تعامل مع نمط العلامة.

جسم {
Font-Family: Arial ، Helvetica ، Sans-Serif ؛
}
#حاوية{
الحدود: 5 بكسل رمادي صلبة.
العرض: 800 بكسل ؛
الهامش: 0 Auto ؛
الحشو: 10 بكسل ؛
}
#Chatlog {
الحشو: 5 بكسل ؛
الحدود: 1 بكسل سوداء صلبة.
}
#Chatlog P {
الهامش: 0 ؛
}
.حدث {
اللون:#999 ؛
}
.تحذير{
خط الرصيف: جريئة ؛
اللون: #CCC ؛
}

الخطوة 5: WebSocket

الأحداث أولاً ، دعنا نحاول وفهم مفهوم أحداث WebSocket:

أحداث WebSocket:

سوف نستخدم ثلاثة أحداث WebSocket:

OnoPen: عند فتح الواجهة

onMessage: عند استلام رسالة

Onclose: عندما تكون الواجهة مغلقة

كيف نحقق هذا؟

قم أولاً بإنشاء كائن WebSocket

var socket = websocket جديد (& ldquo ؛ ws: // localhost: 8000/socket/server/startDaemon.php & rdquo ؛) ؛

ثم اكتشف الحدث على النحو التالي

socket.onopen = function () {
تنبيه ("تم فتح المقبس!") ؛
}

افعل هذا عندما نتلقى الرسالة:

socket.onmessage = function (msg) {
تنبيه (MSG) ؛
}

لكننا ما زلنا نحاول تجنب استخدام التنبيه ، والآن يمكننا دمج ما تعلمناه في صفحة العميل.

الخطوة 6: جافا سكريبت

أولاً ، وضعنا الكود في الدالة المستند. جاهز لـ jQuery ، ثم نحتاج أيضًا إلى التحقق مما إذا كان متصفح المستخدم يدعم WebSocket. إذا لم يكن مدعومًا ، فسنضيف رابطًا إلى صفحة متصفح Chrome.

كما ترون ، إذا كان متصفح المستخدم يدعم WebSocket ، فسوف نقوم بتنفيذ وظيفة Connect (). فيما يلي الوظيفة الأساسية ، سنبدأ في إنشاء الأحداث المفتوحة والإغلاق والاستلام.

سنقوم بتحديد عنوان URL على الخادم الخاص بنا.

var socket ؛
var host = "ws: // localhost: 8000/socket/server/startDaemon.php" ؛

قد تجد لماذا لا يوجد HTTP في عنوان URL؟ حسنًا ، نعم ، هذا عنوان URL WebSocket يستخدم بروتوكولًا مختلفًا.

دعنا نستمر في إكمال وظيفة Connect () أدناه. نقوم بإنشاء WebSocket ونمرر المعلومات إلى وظيفة Message () ، وسنشرحها لاحقًا. نقوم بإنشاء وظائف onopen ، onMessage ، و onclose. تجدر الإشارة إلى أننا نوفر للمستخدم حالة المنفذ ، وهو أمر غير ضروري ، لكننا نضعه بشكل رئيسي لراحة تصحيح الأخطاء.

التوصيل = 0
فتح = 1
مغلق = 2
وظيفة الاتصال () {
يحاول {
var socket ؛
var host = "ws: // localhost: 8000/socket/server/startDaemon.php" ؛
VAR Socket = جديد WebSocket (مضيف) ؛
رسالة ('<p class = "event"> socket:'+socket.readyState) ؛
socket.onopen = function () {
Message ('<p class = "event"> socket status:'+socket.readyState+'(open)') ؛
}
socket.onmessage = function (msg) {
رسالة ('<p class = "message"> تم استلامها:'+msg.data) ؛
}
socket.onclose = function () {
Message ('<p class = "event"> socket status:'+socket.readyState+'(مغلق)') ؛
}
} catch (استثناء) {
رسالة ('<p> خطأ'+استثناء) ؛
}
}

وظيفة Message () بسيطة ، فهي تملأ النص الذي نريد تقديمه للمستخدم في حاوية سجل الدردشة. نقوم بإنشاء الفئة المناسبة لعلامة الفقرة (<p>) في وظيفة حدث Socket ، وليس لدينا سوى علامة نهاية فقرة واحدة في وظيفة الرسالة.

رسالة وظيفة (msg) {
$ ('#chatlog'). إلحاق (msg+'</p>') ؛
}

النتائج الحالية

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

الخطوة 7: إرسال البيانات

الآن لدينا زر إرسال ، لكن لا يزال يتعين علينا الاستماع إلى المستخدم الذي يضغط على حدث لوحة المفاتيح وتشغيل وظيفة الإرسال.

$ ('#text'). keypress (function (event) {
if (event.keycode == '13') {
يرسل()؛
}
}) ؛

ها هي وظيفة send ():

وظيفة إرسال () {
var text = $ ('#text'). val () ؛
if (text == "") {
رسالة ('<p class = "تحذير"> الرجاء إدخال رسالة ") ؛
يعود ؛
}
يحاول {
Socket.send (text) ؛
رسالة ('<p class = "event"> أرسلت:'+نص)
} catch (استثناء) {
رسالة ('<p class = "تحذير"> خطأ:' + استثناء) ؛
}
$ ('#text'). val ("") ؛
}

هنا نحتاج:

Socket.send () ؛

يقوم الرمز الإضافي بالعمل التالي: اكتشف ما إذا كان المستخدم قد لم يدخل شيئًا سوى النقر فوق مربع الإدخال ، وقم بتنفيذ وظيفة Message ().

الخطوة 8: أغلق المقبس

العملية لإغلاق المقبس بسيطة للغاية ، ما عليك سوى إضافة حدث نقرة إلى زر الفصل للاستماع.

$ ('#disconnect'). انقر فوق (function () {
socket.close () ؛
}) ؛

أكمل رمز JavaScript

$ (وثيقة). ready (function () {
if (! ("websocket" في النافذة)) {
$ (' #chatlog ، input ، button ، #examples'). fadeout ("fast") ؛
$ ('<p> oh no ، أنت بحاجة إلى متصفح يدعم WebSockets. ماذا عن <a href = "Google'> http://www.google.com/chrome"> Google chrome </a>؟ </p > '). appendto ('#Container ') ؛
}آخر{
// لدى المستخدم WebSockets
يتصل()؛
وظيفة الاتصال () {
var socket ؛
var host = "ws: // localhost: 8000/socket/server/startDaemon.php" ؛
يحاول {
VAR Socket = جديد WebSocket (مضيف) ؛
رسالة ('<p class = "event"> socket:'+socket.readyState) ؛
socket.onopen = function () {
Message ('<p class = "event"> socket status:'+socket.readyState+'(open)') ؛
}
socket.onmessage = function (msg) {
رسالة ('<p class = "message"> تم استلامها:'+msg.data) ؛
}
socket.onclose = function () {
Message ('<p class = "event"> socket status:'+socket.readyState+'(مغلق)') ؛
}
} catch (استثناء) {
رسالة ('<p> خطأ'+استثناء) ؛
}
وظيفة إرسال () {
var text = $ ('#text'). val () ؛

if (text == "") {
رسالة ('<p class = "تحذير"> الرجاء إدخال رسالة ") ؛
يعود ؛
}
يحاول {
Socket.send (text) ؛
رسالة ('<p class = "event"> أرسلت:'+نص)
} catch (استثناء) {
رسالة ('<p class = "تحذير">') ؛
}
$ ('#text'). val ("") ؛
}
رسالة وظيفة (msg) {
$ ('#chatlog'). إلحاق (msg+'</p>') ؛
}
$ ('#text'). keypress (function (event) {
if (event.keycode == '13') {
يرسل()؛
}
}) ؛
$ ('#disconnect'). انقر فوق (function () {
socket.close () ؛
}) ؛
} // end connect
} // end آخر
}) ؛

الخطوة 9: عند تشغيل خادم WebSocket ، نحتاج إلى إدخال بعض خطوط الأوامر. انقر فوق الزر "shell" في لوحة تحكم XAMPP وأدخل:

PHP -Q path to server.php

الآن لديك تشغيل خادم WebSocket!

تم الانتهاء من المهمة!

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