Merge branch 'feature/customerService' of git.yoho.cn:fe/yohobuy-node into feature/customerService

@@ -48,6 +48,9 @@
         <!-- 不支持websocket -->
         {{> un-support}}
 
+        <!-- websocket连接失败 -->
+        {{> connect-fail}}
+
         <input name="encryptedUid" type="text" type="hidden" value={{encryptedUid}}>
         {{#if devEnv}}
             <input name="assetsPrefix" type="text" type="hidden" value="">

+<div class="connect-fail">
+    <div class="back"></div>
+    <div class="desc">连接失败，请<a class="reconnect">重新连接</a></div>
+</div>

@@ -183,6 +183,32 @@ function pageInit() {
     }
 
     /**
+     * 连接socket
+     */
+    function connectSocket() {
+        socketChat.init(Object.assign(originConf, {
+            onMessage: function(e) {
+                var jsonString = e.data;
+                var received = JSON.parse(jsonString);
+
+                socketConfCM.conversationId = received.newConversationId !== 0 ?
+                    received.newConversationId :
+                    received.conversationId;
+
+                getMessage(received);
+            },
+
+            connectFailCb: function () {
+                $('.connect-fail').fadeIn();
+            },
+
+            socketClosedCb: function () {
+                alert('链接已经断开了，请刷新后重试！');
+            }
+        }));
+    }
+
+    /**
      * 处理发送消息
      * @param e
      * @param msgType
@@ -255,7 +281,7 @@ function pageInit() {
     }
 
     /**
-     * 人工客服                                                      s
+     * 人工客服
      */
     function manualService() {
         socketConfCM.type = allRTs.MANUAL_SERVICE;
@@ -271,6 +297,14 @@ function pageInit() {
     }
 
     /**
+     * 客服已离线
+     */
+    function csOffline(message) {
+        // 系统通知
+        systemTip('', message.content);
+    }
+
+    /**
      * 留言
      */
     function leaveMsg() {
@@ -333,6 +367,8 @@ function pageInit() {
                         </span>
                     </p>
                 </div>`;
+                // 隐藏人工
+                $iconMs.hide();
                 break;
 
             case MANUAL_SERVICE: // 2是接入人工成功
@@ -623,6 +659,11 @@ function pageInit() {
                 csChatting(message);
                 break;
 
+            // 对方离开
+            case allTypes.OP_LEAVE:
+                csOffline(message);
+                break;
+
             case allTypes.OFFLINE:
                 tipTpl =
                     `<div class="list-item">
@@ -766,23 +807,13 @@ function pageInit() {
             if (jsonData && jsonData.data && jsonData.data.result !== -1) {
 
                 socketConfCM.userHead = jsonData.data.headIco || '';
-                socketConfCM.userName = window.getUser()[0];
+                socketConfCM.userName = decodeURIComponent(window.getUser()[0]);
 
                 // 原始配置信息用于重新连线
                 originConf = JSON.parse(JSON.stringify(socketConf));
 
-                socketChat.init(Object.assign(socketConf, {
-                    onMessage: function(e) {
-                        var received = JSON.parse(e.data);
-
-                        socketConfCM.conversationId = received.newConversationId > 0 ?
-                            received.newConversationId :
-                            received.conversationId;
-
-                        // 保存过程中信息
-                        getMessage(received);
-                    }
-                }));
+                // 连接
+                connectSocket();
             }
         });
     }());
@@ -1091,30 +1122,11 @@ function pageInit() {
     });
 
     // 重新连线
-    $msgList.on('click', '.reconnect', function() {
+    $document.on('click', '.reconnect', function() {
+        $('.connect-fail').hide();
         // 共通处理
         beforeSendMsg();
-        socketChat.init(Object.assign(originConf, {
-            onOpen: function() {
-                console.log('websocket opened!');
-            },
-
-            onMessage: function(e) {
-                var jsonString = e.data;
-                var received = JSON.parse(jsonString);
-
-                socketConfCM.conversationId = received.newConversationId !== 0 ?
-                    received.newConversationId :
-                    received.conversationId;
-
-                getMessage(received);
-            },
-
-            onClose: function() {
-                console.log('websocket closed!');
-            }
-        }));
-
+        connectSocket();
     });
 
     // 发送

@@ -5,10 +5,13 @@
  * @date: 2016/11/8
  */
 
-var param,
-    servers,
+var times,
+    param,
     socket,
     server,
+    servers,
+    options,
+    connectId,
     conversationMessage;
 
 function _randomServer() {
@@ -17,31 +20,58 @@ function _randomServer() {
 
 /**
  * socket初始化
- * @param options
+ * @param opts
  */
-function socketInit(options) {
+function socketInit(opts) {
+    options = opts;
     servers = options.servers;
     server = _randomServer();
     conversationMessage = options.conversationMessage;
+    param = JSON.stringify(conversationMessage);
 
-    if (!window.WebSocket) {
-        window.WebSocket = window.MozWebSocket;
+    if (window.WebSocket) {
+        setTimeout(function () {
+           times = 1;
+           socket = socketConnect();
+           connectId = setInterval(function () {
+               if(socket.readyState !== WebSocket.OPEN) {
+                   if(times < 3) {
+                       socket.close();
+                       socket = socketConnect();
+                       times++;
+                   } else {
+                       clearInterval(connectId);
+                       // 连接失败回调
+                       options.connectFailCb();
+                   }
+               } else {
+                   clearInterval(connectId);
+               }
+           }, 5000);
+
+        }, 1000);
     }
 
-    if (window.WebSocket) {
-        param = JSON.stringify(conversationMessage);
-        socket = new WebSocket(server + '/im?param=' + param);
+    /**
+     * 连接
+     * @returns {WebSocket}
+     */
+    function socketConnect() {
+        var socket = new WebSocket(server + '/im?param=' + param);
+
         socket.onmessage = options.onMessage || function() {
             console.log('received msg');
         };
+
         socket.onopen = options.onOpen || function() {
             console.log('websocket is open');
         };
+
         socket.onclose = options.onClose || function() {
             console.log('websocket is closed');
         };
-    } else {
-        console.log('websocket is not support');
+
+        return socket;
     }
 }
 
@@ -56,7 +86,7 @@ function sendMsg(msg) {
     if (socket.readyState === WebSocket.OPEN) {
         socket.send(JSON.stringify(msg));
     } else {
-        console.log('The socket is not open.');
+        options.socketClosedCb();
     }
 }
 

+.connect-fail {
+    display: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    .back {
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: #000;
+        opacity: 0.7;
+    }
+
+    .desc {
+        position: relative;
+        margin-top: 10px;
+        color: #ffffff;
+        text-align: center;
+
+        .reconnect {
+            cursor: pointer;
+            color: #d0021b;
+            text-decoration: none;
+        }
+    }
+}

@@ -1130,6 +1130,7 @@ $color-3a3a3a: #3a3a3a;
 
     @import "_img-zoom-in.css";
     @import "_un-support.css";
+    @import "_connect-fail.css";
 }