الأربعاء، 6 مايو 2015

php : شرح ال websocket

السلام عليكم

هل فكرت يوماً بعمل تحديثات للمسخدم مثلاً اخر التنبيهات وهكذا فقمت باستخدام ajax كل ثانية مثلاً ؟ طبعاً ستلاحظ بطء في قدوم التحديثات وضغط علي السيرفر .

الحل باستخدام websocket حيث السيرفر هو من يرسل التحديثات وليس انت من يطلبها

يعتقد البعض ان كتابة websocket باستخدام php صعب لكنها سهلة جداً باستخدام احد المكتبات

متطلبات

  • امكانية الدخول الي سطر الاوامر

  • الشرح سيكون باستخدام هذه المكتبة لسهولتها http://ift.tt/1xWAOKS او http://ift.tt/1Rc7xX6

  • الشرح سيعمل علي php 5.3 او اعلي جربته علي php 5.4

اهلا بالعالم

لانشاء سيرفر websocket سنكتب التالي ونحفظه بملف server.php او اي اسم

<?php
    include(__dir__."/class.PHPWebSocket.php"); // استدعاء المكتبة
    set_time_limit(0); // لالغاء اقصي مدة للطلب
    $server = new PHPWebSocket();
    /*
     * الحدث عند اتصال المستخدم بالسيرفر
     * $id هو رقم ثابت للمستخدم يتغير ولايتكرر في اتصالان معاً
    */
    $server->bind("open",function($id){
        global $server;
        $server->wsSend($id,"انه يعمل"); // ارسال رسالة للمستخدم يجب ان يكون رقم ال $ip الخاص به موجود
    });

    // تشغيل السيرفر
    $server->wsStartServer(
        gethostbyname("localhost")// هنا يمكن وضع اي بي سنستخدم هذه الدالة لجلب اي بي localhost 
        ,"9989" // منفذ السيرفر ضع اي رقم يجب ان لايكون مستخدم في برنامج اخر وسيستخدم فيما بعد في javascript
    );

والان تشغيل السيرفر من سطر الاوامر php -f server.php ان لم تجد خطأ ولم يكتب رد فانه يعمل الان الواجهة

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <button id="mkcon">اتصال</button>
        <script type="text/javascript">
            document.querySelector("#mkcon").addEventListener("click",function(){
                if(!WebSocket)
                    alert("متصفح لايدعم websocket");
                else{
                    ws = new WebSocket("http://wslocalhost:9989");// الاتصال بالسيرفر ادخل نفس المعلومات التي ادخلتها في كود السيرفر
                    ws.addEventListener("open",function(){ // عند الاتصال بالسيرفر
                        alert("تم الاتصال");
                    });
                    ws.addEventListener("message",function(ms){ // عند قدوم رسالة
                        alert(ms.data);
                    });
                }
            });
        </script>
    </body>
</html>

استلام الرسائل وربط المستخدمين معاً

اولا اغلق السيرفر الذي انشاءناه من قبل عن طريق سطر الاوامر يوجد العديد من الطرق مثلاً (9989 هو المنفذ الذي قمنا بتحديده) lsof -i:9989 -n ستجد عدة مخرجات منها pid لسيرفر php اغلقه ( 29606 هو الpid الذي اخرج لي لايكون ثابت , قد تحتاج الي صلاحيات مدير) kill 29606 ثم استبدل كود السيرفر ب

<?php
    include(__dir__."/class.PHPWebSocket.php"); // استدعاء المكتبة
    set_time_limit(0); // لالغاء اقصي مدة للطلب
    $server = new PHPWebSocket();
    /*
     * الحدث عند اتصال المستخدم بالسيرفر
     * $id هو رقم ثابت للمستخدم يتغير ولايتكرر في اتصالان معاً
    */
    $server->bind("open",function($id){
        global $server;
        $server->wsSend($id,"انه يعمل"); // ارسال رسالة للمستخدم يجب ان يكون رقم ال $ip الخاص به موجود
    });

    /*
     * عند قدوم رسالة من الخادم
    */
    $server->bind("message",function($id,$mss){
        global $server;
        $server->wsSend($id,"تم ارسال رسالتك بنجاح !"); // ارسال رسالة للمرسل
        foreach($server->wsClients as $clientId => $client)// جميع المستخدمين المتصلين بالسيرفر
            if($clientId != $id)// المستخدم ليس المرسل
                $server->wsSend($clientId,$mss); // ارسال الرسالة لباقي المستخدمين
    });

    // تشغيل السيرفر
    $server->wsStartServer(
        gethostbyname("localhost")// هنا يمكن وضع اي بي سنستخدم هذه الدالة لجلب اي بي localhost 
        ,"9989" // منفذ السيرفر ضع اي رقم يجب ان لايكون مستخدم في برنامج اخر وسيستخدم فيما بعد في javascript
    );

وشغل السيرفر كما علمنا php -f server.php ثم كود الواجهة <!DOCTYPE html> ارسال اتصال document.querySelector("#mkcon").addEventListener("click",function(){ if(!WebSocket) alert("متصفح لايدعم websocket"); else{ ws = new WebSocket("http://wslocalhost:9989");// الاتصال بالسيرفر ادخل نفس المعلومات التي ادخلتها في كود السيرفر ws.addEventListener("open",function(){ // عند الاتصال بالسيرفر alert("تم الاتصال"); // تفعيل العناصر المغلقة زر الارسال وصندوق الرسالة غير مهم disableded = document.querySelectorAll("[disabled]"); for(element=0;element<=disableded.length-1;element++) disableded[element].disabled=0; }); ws.addEventListener("message",function(ms){ // عند قدوم رسالة alert(ms.data); }); ws.addEventListener("close",function(){ alert("تم اغلاق الاتصال"); }); } }); document.querySelector("#sendms").addEventListener("click",function(){ if(!ws) alert("قم بالاتصال اولاً"); else{ text = document.querySelector("textarea").value; if(!text) alert("ادخل رسالة اولاً"); else ws.send(text); } });

طبعاً يوجد استخدامات اخري لل websocket وهذه كانت امثلة فقط

ملاحظات

  • websocket لايدعم الجلسات cookies

  • في حال استخدام ssl سيكون البروتوكول هو wss بدلاً من ws

  • بعض الاستضافات لاتدعم sockets لذا يفضل تخصيص سيرفر

  • لدعم المتصفحات القديمة يوجد مكتبات علي github ل javascript تستخدم ال flash وطرق اخري

  • في حال استخدام websocket في التنبيهات وابقاء المستخدمين متصلين معاً ستقوم ببناء الموقع علي طريقة الصفحة الواحدة

  • في حال عدم امكانية الدخول الي سطر الاوامر او عدم وجود دعم socket استخدم sse قد اشرحه في درس مقبل

الي الان انتهي الدرس في حال واجهت مشكلة ارسلها لي .



from حسوب I/O - الأكثر شيوعاً http://ift.tt/1GOv1ZX
مرسلة بواسطة في
التسميات:

ليست هناك تعليقات:

إرسال تعليق

دائماً، رأيكم يهمنا،

الاشتراك في: تعليقات الرسالة (Atom)