المساعدة في reconnect socket.io

يمكننا أن نجرب طريقة أخرى بحيث يتعامل بشكل صحيح مع محاولات الاتصال الناجحة والفاشلة، ويعرض الرسائل المناسبة ويقوم بتحديث الصفحة في حالة فشل محاولة الاتصال بالطريقة التالية:

var connectionSuccessful = false; // علم لتتبع نجاح الاتصال


socket.on("connect", function () {
    if(USERID){
        $(document.body).append('<div class="ovr " style="width:100%;height:100%;z-index:999999;position: fixed;left: 0px;top: 0px;background-color: rgba(0, 0, 0, 0.6);"><div style="margin: 25%;margin-top:5%;border-radius: 4px;padding: 8px;width: 220px;" class=" label-warning"><button class="btn btn-danger fr closeconnect" style="\n margin-top: -6px;\n margin-right: -6px;\n" onclick="$(this).hide();window.clsbrow(100);">[ x ]</button><div>.. إعادة الاتصال</div></div></div>');    
        setTimeout(()=>{
            $(".ovr div").attr('class', 'label-success').find("div").text("تم الاتصال، جاري تسجيل الدخول..");
            connectionSuccessful = true; // الاتصال ناجح
        },2500);
        setTimeout(()=>{
            $('.ovr').remove();
        },4000);
    }
});


socket.on('disconnect', function () {
    if (connectionSuccessful) {
        // الاتصال ناجح سابقاً، لكنه الآن فقد
        $('.ovr div').attr('class', 'label-danger').find('div').text('تم فقد الاتصال..');
        lstat('danger', 'غير متصل');
        // ضع علم الاتصال كـ false لأن الاتصال فقد الآن
        connectionSuccessful = false;
    }
});


socket.on('connect_error', function () {
    if (!connectionSuccessful) {
        // فشلت محاولة الاتصال
        $('.ovr div').attr('class', 'label-danger').find('div').text('فشل الاتصال..');
        lstat("danger", "غير متصل");
        // قم بتحديث الصفحة بعد 5 ثواني إذا فشلت محاولة الاتصال
        setTimeout(() => {
            location.reload();
        }, 5000);
    }
}), 


socket.on("connect_timeout", function () {
    if (!connectionSuccessful) {
        // انتهت مهلة اتصال الاتصال
        $('.ovr div').attr('class', 'label-danger').find('div').text('انتهت مهلة اتصال الاتصال..');
        lstat('danger', "غير متصل");
        // قم بتحديث الصفحة بعد 5 ثواني إذا انتهت مهلة اتصال الاتصال
        setTimeout(() => {
            location.reload();
        }, 5000);
    }
}), 


socket.on('error', function () {
    if (!connectionSuccessful) {
        // حدث خطأ أثناء محاولة الاتصال
        $('.ovr div').attr('class', 'label-danger').find('div').text('خطأ في الاتصال..');
        lstat("danger", "غير متصل");
        // قم بتحديث الصفحة بعد 5 ثواني إذا حدث خطأ أثناء محاولة الاتصال
        setTimeout(() => {
            location.reload();
        }, 5000);
    }
});