gérer la deconnexion au websocket (ref #23)

src/ninegate-1.0/app/config/config.yml

@@ -137,6 +137,7 @@ gos_web_socket:
     server:
         port: %websocket_port%    #The port the socket server will listen on
         host: %websocket_host%    #The host ip to bind to
+
         router:
             resources:
                 - "@CadolesWebsocketBundle/Resources/config/topic.yml" 

src/ninegate-1.0/src/Cadoles/WebsocketBundle/Controller/ChatController.php

@@ -105,4 +105,47 @@ class ChatController extends Controller
         $response->headers->set('Content-Type', 'application/json');        
         return $response;        
     }
+
+    public function listAction(Request $request) {
+        // S'assurer que c'est un appel ajax
+        if (!$request->isXmlHttpRequest()) {
+            return new JsonResponse(array('message' => 'Interdit'), 400);
+        }   
+
+        $em = $this->getDoctrine()->getManager();
+        $id=$request->request->get('id');
+        $output=array();
+
+        // On récupère le groupe
+        $group=$em->getRepository("CadolesCoreBundle:Group")->find($id);
+        if(!$group) die();
+
+        // On récupere le user        
+        $user=$this->getUser();
+        if(!$user) die();
+
+        // On récupère le lien usergroup
+        $usergroup=$em->getRepository("CadolesCoreBundle:UserGroup")->findOneBy(["group"=>$group,"user"=>$user]);
+        if(!$usergroup) die();
+        
+        // On récupere les messages
+        $messages=$em->getRepository("CadolesWebsocketBundle:Message")->findBy(["group"=>$group],["submitdate"=>"DESC"],10);
+
+        foreach($messages as $message) {
+            $tmp=[];
+            $tmp["id"]=$message->getId();
+            $tmp["message"]=$message->getTopic();
+            $tmp["submitdate"]=$message->getSubmitdate();
+            $tmp["userid"]=$message->getUser()->getId();
+            $tmp["userlastname"]=$message->getUser()->getLastname();
+            $tmp["userfirstname"]=$message->getUser()->getFirstname();
+            $tmp["useravatar"]=$message->getUser()->getAvatar();
+
+            array_push($output,$tmp);
+        }
+
+        $response = new Response(json_encode($output));    
+        $response->headers->set('Content-Type', 'application/json');        
+        return $response;               
+    }         
 }

src/ninegate-1.0/src/Cadoles/WebsocketBundle/Resources/config/routing.yml

@@ -5,3 +5,7 @@ cadoles_websocket_chat:
 cadoles_websocket_message_see:
     path: /user/message/see
     defaults: { _controller: CadolesWebsocketBundle:Chat:see }   
+
+cadoles_websocket_message_list:
+    path: /user/message/list
+    defaults: { _controller: CadolesWebsocketBundle:Chat:list }      

src/ninegate-1.0/src/Cadoles/WebsocketBundle/Resources/views/Chat/client.html.twig

@@ -115,12 +115,90 @@
 
 {% block localexternalscript %}
     <script src="/{{alias}}/bundles/goswebsocket/js/vendor/autobahn.min.js"></script>
-    <script src="/{{alias}}/bundles/goswebsocket/js/gos_web_socket_client.js"></script>
     <script type="text/javascript" src="/{{alias}}/ckeditor/adapters/jquery.js"></script>
 {% endblock %}
 
 {% block localjavascript %}
-var webSocket;
+    {% if websocket_activate and app.user %}
+    var WS = (function()
+    {
+        var GosSocket = function(uri, sessionConfig){
+            this._uri = uri;
+            this._session = false;
+            this._listeners = {};
+            this.connect(sessionConfig);
+        };
+
+        GosSocket.prototype.connect = function (sessionConfig) {
+            var that = this;
+
+            ab.connect(this._uri,
+
+                //Function on connect
+                function(session){
+                    that.fire({type: "socket/connect", data: session });
+                },
+
+                //Function on disconnect / error
+                function(code, reason){
+                    that._session = false;
+
+                    that.fire({type: "socket/disconnect", data: {code: code, reason: reason}});
+                },
+
+                sessionConfig
+            );
+        };
+
+        GosSocket.prototype.on = function(type, listener){
+            if (typeof this._listeners[type] == "undefined"){
+                this._listeners[type] = [];
+            }
+
+            this._listeners[type].push(listener);
+        };
+
+        GosSocket.prototype.fire = function(event){
+            if (typeof event == "string"){
+                event = { type: event };
+            }
+            if (!event.target){
+                event.target = this;
+            }
+
+            if (!event.type){  //falsy
+                throw new Error("Event object missing 'type' property.");
+            }
+
+            if (this._listeners[event.type] instanceof Array){
+                var listeners = this._listeners[event.type];
+                for (var i=0, len=listeners.length; i < len; i++){
+                    listeners[i].call(this, event.data);
+                }
+            }
+        };
+
+        GosSocket.prototype.off = function(type, listener){
+            if (this._listeners[type] instanceof Array){
+                var listeners = this._listeners[type];
+                for (var i=0, len=listeners.length; i < len; i++){
+                    if (listeners[i] === listener){
+                        listeners.splice(i, 1);
+                        break;
+                    }
+                }
+            }
+        };
+
+        return {
+            connect: function(uri, sessionConfig)
+            {
+                return new GosSocket(uri, sessionConfig);
+            }
+        }
+
+    })();
+    {% endif %}
 
 	$(document).ready(function(){
         if (CKEDITOR.instances["chat_message"]) CKEDITOR.instances["chat_message"].destroy();
@@ -153,26 +231,43 @@ var webSocket;
 
 	});
 
-    function websocket()
-    {       
     {% if websocket_activate and app.user %}
-            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
-            
-            console.log("INI WS");
-            webSocket = WS.connect(_WS_URI);
-            console.log("END INI WS");
         
+        var session;
         var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute:  "2-digit" };
         var timer;
-            var session;
+        var delayRetry=5000;
+        var isdeco=false;
+        var tosend=false;
+        var tosendmail=false;
+        var todelete=false;
+        var idtodelete;
 
-            webSocket.on("socket/connect", function (session) {     
+        function websocket()
-                // Reinit du tps de tentative de reco
+        {       
-                $('#modalinfo').modal('hide');
+            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
-                clearInterval(timer);
+            webSocket = WS.connect(_WS_URI,{retryDelay: delayRetry});
+
+            webSocket.on("socket/connect", function (sess) {  
+                console.log("=== CONNECT ===");
+
+                // Sauvegardce de la session
+                session=sess;
                 
                 //the callback function in "subscribe" is called everytime an event is published in that channel.
-                session.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
+                sess.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
+                    
+                    // Récupération lastmessage
+                    if(isdeco) recuplastmsg();
+
+                    // Si action en cours
+                    if(tosend) sendbtn();
+                    if(tosendmail) sendbtnmail();
+                    if(todelete) delmessage(idtodelete);
+
+                    // Il est co
+                    isdeco=false;
+
                     if(payload.msg) {
                         html ="<div id='message-"+payload.msg.id+"' class='message row'>";
                         html+="<div class='msgavatar'>";
@@ -203,8 +298,21 @@ var webSocket;
                         alert(payload.alert);
                     }
                 });
+            });
+            
+            webSocket.on("socket/disconnect", function(error){
+                laberror="Disconnected for " + error.reason + " with code " + error.code;
+                console.log("=== DISCONNECT ===");
+                console.log(laberror);
+                isdeco=true;
+            }); 
+        }
 
         $( "#sendbtn" ).click(function() {
+            sendbtn();
+        });
+
+        function sendbtn() {
             var data = CKEDITOR.instances["chat_message"].getData();
             if($("#sendbymail").bootstrapSwitch('state')) {
                 CKEDITOR.instances["chat_messagemail"].setData(data);
@@ -223,98 +331,137 @@ var webSocket;
             }
             else {
                 if(data) {
+                    try {
+                        // Flager que l'envoit c'est fait
+                        tosend=false;
+                        $("#sendbtn").html("Envoyer");
+                        $("#sendbtn").removeClass("btn-danger");
+                        $("#sendbtn").css('cursor','auto');
+
+                        // Push envent sur le websocket
                         event={mykey: "{{userkey}}", type: "add", message: data};
                         session.publish("websocket/channel/{{groupid}}", event);  
                         CKEDITOR.instances["chat_message"].setData('');
+                    }
+                    catch(error) {
+                        // L'envoi ne s'est pas fait
+                        console.log("Retry to send");
 
-                            /* Ne plus envoyer d'event compteur on passe par de l'ajax
+                        // On flag le fait de retenter l'envoit à la reconnexion
-                            event={type: "add", group:{{groupid}}};
+                        tosend=true;
-                            parent.parent.counter(event);                        
+
-                            */
+                        // On signal que l'envoi est en cours sur le bouton
+                        $("#sendbtn").html("Envoi en cours");
+                        $("#sendbtn").addClass("btn-danger");
+                        $("#sendbtn").css('cursor','progress');
+                    }
+                }
             }
         }
-                });
 
         $( "#sendbtnmail" ).click(function() {
+            sendbtnmail();
+        });
+
+        function sendbtnmail() {
             var data = CKEDITOR.instances["chat_messagemail"].getData();
             var subject=$("#mailsuject").val();
             var mailto=$("#mailto").val();
 
             if(data&&subject&&mailto) {
+                try {
+                    // Flager que l'envoit c'est fait
+                    tosendmail=false;
+                    $("#sendbtnmail").html("Envoyer");
+                    $("#sendbtnmail").removeClass("btn-danger");
+                    $("#sendbtnmail").css('cursor','auto');
+
+                    // Push envent sur le websocket
                     event={mykey: "{{userkey}}", type: "add", message: data, mail: "true", to: mailto, subject: subject};
                     session.publish("websocket/channel/{{groupid}}", event);  
                     CKEDITOR.instances["chat_message"].setData('');
 
-                        /* Ne plus envoyer d'event compteur on passe par de l'ajax
+                    // Cacher la popup
-                        event={type: "add", group:{{groupid}}};
-                        parent.parent.counter(event);                        
-                        */
-
                     $("#sendbymail").bootstrapSwitch('state',false);
                     $('#mymodal-sendmail').modal('hide');
                 }
+                catch(error) {
+                    // L'envoi ne s'est pas fait
+                    console.log("Retry to send");
+
+                    // On flag le fait de retenter l'envoit à la reconnexion
+                    tosendmail=true;
+
+                    // On signal que l'envoi est en cours sur le bouton
+                    $("#sendbtnmail").html("Envoi en cours");
+                    $("#sendbtnmail").addClass("btn-danger");
+                    $("#sendbtnmail").css('cursor','progress');
+                }                
+
+            }           
             else alert("Sujet, corps et destinataire(s) obligatoire");
-                });
+        }
 
         $(document).on('click', '.delmessage', function(){
-                    id=$(this).data("id");
+            delmessage($(this).data("id"));
+        });
+
+        function delmessage(id) {
+            try {
+                // Flager que l'envoit c'est fait
+                todelete=false;
+                idtodelete=null;
+
+                // Push envent sur le websocket          
                 event={mykey: "{{userkey}}", type: "del", id: id};
                 session.publish("websocket/channel/{{groupid}}", event);              
-                });
+            }
+            catch(error){
+                // Le delete ne s'est pas fait
+                console.log("Retry to delete");                
+
+                // On flag le fait de retenter l'envoit à la reconnexion
+                todelete=true;
+                idtodelete=id;
+            }
+        }
 
         $(document).on('click', '#listtoavatar img', function(){
             var mail = ";"+$(this).data("mail");
             $("#mailto").val($("#mailto").val().replace(mail, ""));
             $(this).remove();
         });
-            });
 
-            webSocket.on("socket/disconnect", function(error){
+        function recuplastmsg() {
-                laberror="Disconnected for " + error.reason + " with code " + error.code;
+            $.ajax({
-                console.log("=== DISCONNECT ===");
+                method: "POST",
-                console.log(laberror);
+                url: "{{ path('cadoles_websocket_message_list') }}",
-
+                data: {
-                
+                    "id": {{ groupid }},
-                if(error.code==2) {
+                },
-                    $('#modalinfo').modal('show');
+                success: function(datas) {
-                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous avez dépassé le nombre de reconnexion maximum<br><br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
+                    $.each(datas, function(i,data) {
-                    
+                        // Le message a-t-il été déposé durant la déconnexion ?
-                    clearInterval(timer);
+                        if(!$("#message-"+data.id).length) {
-                    var nbtentative=10;
+                            console.log("regen message");
-                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
+                            html ="<div id='message-"+data.id+"' class='message row'>";
-                    
+                            html+="<div class='msgavatar'>";
-                     setTimeout(function(){ websocket(); }, 10000);
+                            html+="<img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+data.useravatar+"' class='avatar'><br>";
-                    //setTimeout(function(){ location.reload(true); }, 10000);
+                            if(data.userid=={{app.user.id}} || '{{ fgmanager }}'=='1') {
+                                html+="<i class='delmessage fa fa-trash fa-fw' data-id='"+data.id+"' style='cursor: pointer;'></i>";
                             }
-
+                            html+="</div>";
-                if(error.code==3) {
+                            html+="<div class='msgdiv'>"
-                    $('#modalinfo').modal('show');
+                            html+="<div class='msgtitle'>"+data.userlastname+"<br><small>"+new Date(data.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
-                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Veuillez retentez d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
+                            html+="<div class='msgtopic'>"+data.message+"</div>";
-                    
+                            html+="</div>";
-                    clearInterval(timer);
+                            html+="</div>";
-                    var nbtentative=10;
+                            $(".mychat").prepend(html);                            
-                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
-
-                    setTimeout(function(){ websocket(); }, 10000);
-                    // setTimeout(function(){ location.reload(true); }, 10000);
-                }
-
-                if(error.code==6 || error.code==5) {
-                    
-                    $('#modalinfotext').html("<center>Impossible de se connecter au serveur.<br>Vous allez être reconnecté d'ici quelques secondes<br><br><code>"+laberror+"</code><br><br><div id='modalinfotimer'></div><br><a class='btn btn-primary' onclick='location.reload(true);'>Forcer la tentative de reconnexion</a></center>");
-
-                    clearInterval(timer);
-                    var nbtentative=5;
-                    //session.unsubscribe("websocket/channel/{{groupid}}");
-                    websocket();
-                    /*
-                    timer=setInterval(function(){ $('#modalinfotimer').html((nbtentative--)+"s") }, 1000);
-                    setTimeout(function(){ websocket(); }, 10000);
-                    */
                         }
                     });
-
+                } 
+            });            
+        }
     {% endif %}  
-    }
 
 {% endblock %}