HTML5 WebSockets API

WebSocket API هي تقنية متقدمة تتيح فتح جلسة اتصال تفاعلية ثنائية الاتجاه بين متصفح المستخدم والخادم.

ما هى تقنية WebSocket؟

WebSocket API هي تقنية متقدمة تتيح فتح جلسة اتصال تفاعلية ثنائية الاتجاه بين متصفح المستخدم والخادم.

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

بمجرد الحصول على اتصال Web Socket بخادم الويب ، يمكنك إرسال البيانات من المستعرض إلى الخادم عن طريق استدعاء طريقة ()send، وتلقي البيانات من الخادم إلى المستعرض بواسطة معالج أحداث onmessage.

إنشاء كائن WebSocket

يمكنك إنشاء كائن WebSocket جديد، عن طريق الـ constructor التالى:

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

توضيح بناء الجملة السابق:

url: تحدد عنوان URL الذي سيتم الاتصال به؛ يجب أن يكون هذا هو عنوان URL الذي سيستجيب له خادم WebSocket + يجب أن تستخدم مخطط العنوان التالى //:wss ، على الرغم من أن بعض البرامج قد تسمح لك باستخدام //:ws (غير الآمن للاتصالات المحلية).
protocol (اختياري): وإذا كان موجودًا ، فإنه يحدد بروتوكولًا فرعيًا يجب أن يدعمه الخادم حتى يكون الاتصال ناجحًا.

سيُلقي الـ constructor السابق خطأ SecurityError إذا كانت الوجهة لا تسمح بالوصول، قد يحدث هذا إذا حاولت استخدام اتصال غير آمن (يتطلب معظم متصفحات المستخدم الآن ارتباطًا آمنًا لجميع اتصالات WebSocket ما لم يكونوا على نفس الجهاز أو ربما على نفس الشبكة).

أمثلة للتوضيح – WebSockets

المثال الأول:

var firstExampleSocket = new WebSocket("wss://www.example.com/socketserver");

يقوم المثال البسيط السابق بإنشاء WebSocket جديد ، والاتصال بالخادم على wss://www.example.com/socketserver، بدون تسمية بروتوكول مخصص.

المثال الثانى:

var secondExampleSocket = new WebSocket("wss://www.example.com/socketserver", "protocolOne");

يقوم المثال البسيط السابق بإنشاء WebSocket جديد ، والاتصال بالخادم على wss://www.example.com/socketserver + تم تسمية بروتوكول مخصص بإسم “protocolOne“.

إذا كنت ترغب في فتح اتصال وتتحلى بالمرونة بشأن البروتوكولات التي تدعمها ، فيمكنك تحديد مجموعة من البروتوكولات:

var secondExampleSocket = new WebSocket("wss://www.example.com/socketserver", ["protocolOne", "protocolTwo"]);

بمجرد إنشاء الاتصال سيخبرك secondExampleSocket.protocol بالبروتوكول الذي حدده الخادم.

يعتمد إنشاء WebSocket على آلية ترقية HTTP ، لذا فإن طلب ترقية البروتوكول يكون ضمنيًا عندما نتعامل مع خادم الويب كالتالي: ws://www.example.com أو wss://www.example.com

إرسال البيانات إلى الخادم

بمجرد فتح اتصالك ، يمكنك البدء في إرسال البيانات إلى الخادم، لتقوم بذلك ما عليك سوى استدعاء طريقة ()send لكائن WebSocket لكل رسالة تريد إرسالها:

firstExampleSocket.send("Here's Message to send!");

لا يوجد شئ يضمن نجاح استدعاء طريقة ()send بعد إنشاء كائن WebSocket، لهذا السبب يمكننا على الأقل أن نتأكد من أن محاولة إرسال البيانات لا تحدث إلا بمجرد إنشاء اتصال عن طريق تحديد معالج حدث (onopen) للقيام بالعمل:

firstExampleSocket.onopen = function (event) {
    firstExampleSocket.send("Here's Message to send!");
};

استقبال الرسائل من الخادم

WebSockets عبارة عن واجهة برمجة تطبيقات API يحركها الحدث ؛ عند استلام الرسائل ، يتم إرسال حدث message إلى كائن WebSocket.

لبدء استقبال البيانات أو الرسائل الواردة، استخدم معالج حدث onmessage، كالتالى:

firstExampleSocket.onmessage = function (event) {
    alert(event.data);
}

إغلاق الاتصال

عندما تنتهي من استخدام اتصال WebSocket ، إستخدم طريقة ()close لإغلاق الإتصال، كالتالى:

firstExampleSocket.close();

مثال على جميع ما سبق معًا – WebSocket

<!DOCTYPE HTML>

<html>

<head>
    <meta charset="UTF-8">
    <title>WebSocket Example</title>
</head>

<body>
    <div id="websocket_run">
        <a href="javascript:webSocketTest()">Run webSocket</a>
        <p id="outputs"></p>
    </div>

    <script>
        function webSocketTest() {

            if ("WebSocket" in window) {

                // In case browser "Support WebSockets".
                document.getElementById("outputs").innerHTML = "WebSockets are supported in this Browser!";

                // Open a web socket
                var socket = new WebSocket("wss://localhost:8080/");

                socket.onopen = function() {
                    socket.send("Message to send"); // send data using send()
                    document.getElementById("outputs").innerHTML = "Message is sent!";
                };

                socket.onmessage = function(event) {
                    // Receive Message
                    document.getElementById("outputs").innerHTML = event.data;
                };

                socket.onclose = function() {
                    // Close websocket
                    document.getElementById("outputs").innerHTML = "Connection is closed!";
                };
            } else {
                // In case browser "Not support WebSockets".
                document.getElementById("outputs").innerHTML = "WebSockets aren't supported in this Browser!";
            }
        }
    </script>
</body>

</html>

WebSocket Example

Run webSocket

لا ينبغي استخدام WebSockets في بيئة ذات محتوى مختلط؛ أي أنه لا يجب عليك فتح اتصال WebSocket غير آمن من صفحة تم تحميلها باستخدام HTTPS أو العكس. تسمح معظم المتصفحات الآن فقط باتصالات WebSocket الآمنة ، ولم تعد تدعم استخدامها في السياقات غير الآمنة.

أخطاء الاتصال

في حالة حدوث خطأ أثناء محاولة الاتصال ، يتم أولاً إرسال حدث بسيط به خطأ في الاسم إلى كائن WebSocket (وبالتالي استدعاء onerror الخاص به) ، ثم يتم إرسال CloseEvent إلى كائن WebSocket (وبالتالي استدعاء معالج onclose) للإشارة إلى سبب إغلاق الاتصال.

WebSocket Attributes

فيما يلي سمات كائن WebSocket:

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

السمة

الوصف

Socket.readyState

تمثل السمة readyState حالة الاتصال.

يمكن أن تحتوي على القيم التالية:

“0“: تشير هذه القيمة إلى أن الاتصال لم يتم تأسيسه بعد.
“1” تشير هذه القيمة إلى أنه تم إنشاء الاتصال وإمكانية الاتصال.
“2” تشير هذه القيمة إلى أن الاتصال يمر بمصافحة الإغلاق.
“3” تشير هذه القيمة إلى أنه تم إغلاق الاتصال أو تعذر فتحه.

Socket.bufferedAmount

تمثل السمة bufferedAmount عدد بايتات نص UTF-8 التي تم وضعها في قائمة الانتظار باستخدام طريقة ()send.

WebSocket Methods

فيما يلي الطرق المرتبطة بكائن WebSocket:

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

WebSocket Events

فيما يلي الأحداث المرتبطة بكائن WebSocket:

الحدث	معالج الحدث (Event Handler)	الوصف
open	Socket.onopen	يحدث هذا الحدث عند إنشاء اتصال socket.
message	Socket.onmessage	يحدث هذا الحدث عندما يتلقى العميل (client) البيانات من الخادم.
close	Socket.onclose	يحدث هذا الحدث عند إغلاق الاتصال.
error	Socket.onerror	يحدث هذا الحدث عند وجود أي خطأ في الاتصال.