svg

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

@@ -0,0 +1,81 @@
+{% extends '@CadolesCore/base.html.twig' %}
+
+{% block localstyle %}
+    .message {
+        padding:10px;
+        margin-top: 5px;
+        background-color: #{{ color['main'] }};
+        color: #{{ color['fontcolorhover'] }};
+    }
+    .msgavatar {
+        float:left;
+        height:40px;
+    }
+    .msgdiv {
+        float:left;
+        padding-left:10px;
+    }
+    .msgtitle {
+        line-height: 12px;
+        margin-bottom: 10px;
+    }
+{% endblock %}
+
+{% block pagewrapper %}
+    <div class="mychat">
+
+
+    </div>
+{% endblock %}
+
+{% 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>
+{% endblock %}
+
+{% block localjavascript %}
+	$(document).ready(function(){
+        var dateoptions = {weekday: "long", year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute:  "2-digit" };
+
+
+        {% if app.user %}
+            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:{{ gos_web_socket_server_port }}";
+            var _WS_URI = "wss://{{ gos_web_socket_server_host }}:5555";
+            console.log(_WS_URI);
+
+            var webSocket = WS.connect(_WS_URI);
+
+            webSocket.on("socket/connect", function (session) {
+
+                session.call("websocket/rpc/update_connection_data", {"userkey": "{{userkey}}" }).then(
+                    function (result)
+                    {
+                        console.log("RPC Valid!", result);
+                    },
+                    function (error, desc)
+                    {
+                        console.log("RPC Error", error, desc);
+                    }
+                );                
+
+                //the callback function in "subscribe" is called everytime an event is published in that channel.
+                session.subscribe("websocket/channel/{{groupid}}", function (uri, payload) {
+                    html ="<div class='message row'>";
+                    html+="<div class='msgavatar'><img id='user_avatar_img' src='/{{ alias }}/uploads/avatar/"+payload.msg.avatar+"' class='avatar'></div>";
+                    html+="<div class='msgdiv'>"
+                    html+="<div class='msgtitle'>"+payload.msg.lastname+"<br><small>"+new Date(payload.msg.submitdate.date).toLocaleDateString("fr-FR", dateoptions)+"</small></div>";
+                    html+="<div class='msgtopic'>"+payload.msg.message+"</div>";
+                    html+="</div>";
+                    html+="</div>";
+                    $(".mychat").append(html);
+
+                    console.log("Received message", payload.msg);
+                });
+
+                session.publish("websocket/channel/{{groupid}}", "This is a message!");  
+                session.publish("websocket/channel/{{groupid}}", "This is a message!");  
+                session.publish("websocket/channel/{{groupid}}", "This is a message!");            
+            })     
+        {% endif %}   
+	});
+{% endblock %}