发送图片，机器人聊天完成

@@ -33,12 +33,12 @@
 
 
     <div class="menu">
     <div class="menu">
         <div class="icon-wrap camera">
         <div class="icon-wrap camera">
-            <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
+            <input type="file" class="upload-img" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
             <div class="icon"></div>
             <div class="icon"></div>
             <p class="menu-name">拍照</p>
             <p class="menu-name">拍照</p>
         </div>
         </div>
         <div class="icon-wrap photo">
         <div class="icon-wrap photo">
-            <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
+            <input type="file" class="upload-img" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
             <div class="icon"></div>
             <div class="icon"></div>
             <p class="menu-name">相册</p>
             <p class="menu-name">相册</p>
         </div>
         </div>

@@ -5,10 +5,17 @@
 
 
 'use strict';
 'use strict';
 
 
-import {time} from './time';
-import {tip} from './tip';
-import {ChatRole, Customer, Employee, Robot} from './role';
-import {RatingView, LeaveMSGView, OrderListView} from './view';
+import { time } from './time';
+import { tip } from './tip';
+import { Customer, Employee} from './role';
+import { RatingView, LeaveMSGView, OrderListView } from './view';
+
+require('../../home/jquery.upload');
+var saveImage = require('../../home/save-image');
+
+var socket = require('./socket-chat'),
+    socketConf = require('./socket-config'),
+    cmEntity = socketConf.conversationMessage;
 
 
 const chatBox = $('#chat-window');
 const chatBox = $('#chat-window');
 
 
@@ -16,9 +23,9 @@ const append = (html) => {
     chatBox.append(html);
     chatBox.append(html);
 };
 };
 
 
-let gg = new Customer(),
-    mm = new Employee();
+let gg, mm;
 
 
+// 聊天调整footer位置
 const resizeFooter = () => {
 const resizeFooter = () => {
     let bottom = $('#chat-footer').height();
     let bottom = $('#chat-footer').height();
 
 
@@ -26,20 +33,146 @@ const resizeFooter = () => {
     chatBox[0].scrollTop = chatBox[0].scrollHeight;
     chatBox[0].scrollTop = chatBox[0].scrollHeight;
 };
 };
 
 
-$('.text-in').on('keydown', function(e) {
-    if (e.keyCode === 13) {
-        append(tip('奥巴马').offLine());
+
+var chat = {
+    // 初始化websocket
+    init: function() {
+        const self = this;
+
+        socket.init(Object.assign(socketConf, {
+            onMessage: function(e) {
+                var received = JSON.parse(e.data);
+                console.log(received);
+                cmEntity.conversationId = received.newConversationId > 0 ?
+                        received.newConversationId :
+                        received.conversationId;
+
+                gg = new Customer(cmEntity.userHead);
+                mm = new Employee(cmEntity.userHead);
+                // 保存过程中信息
+                self.getMessage(received);
+            }
+        }));
+    },
+
+    // 处理收到的消息
+    getMessage: function(rec) {
+        var tipTpl,
+            recType = rec.type,
+            message = rec.message,
+            msgType = message.type,
+            allTypes = socketConf.recType;
+
+        switch (recType) {
+
+            case allTypes.ENTER:
+                this.enterSuccess(message);
+                break;
+
+            case allTypes.LINK_SUCCESS:
+                this.linkSuccess(msgType, message);
+                break;
+
+            case allTypes.CU_SEND:
+                this.handleCusMsg(rec, msgType, message);
+                break;
+
+            // case allTypes.BREAK_TIME:
+            //     breakCountdown(message);
+            //     break;
+
+            case allTypes.ROBOT_SEND:
+                rec.csName = rec.csName || '客服机器人';
+                append(mm.sendMsg(message.content));
+                resizeFooter();
+
+                break;
+
+            // case allTypes.CS_SEND:
+            //     // 处理客服消息
+            //     handleCsMsg(rec, msgType, message);
+            //     break;
+
+            // case allTypes.EVAL_INVITE:
+            //     // 客服发起
+            //     processInfo.promoter = 2;
+            //     showEvalModal();
+            //     break;
+
+            // case allTypes.CS_CHATTING:
+            //     // 正在人工会话
+            //     csChatting(message);
+            //     break;
+
+            // case allTypes.OFFLINE:
+            //     tipTpl =
+            //         `<div class="list-item">
+            //         <p class="push-tip">
+            //             <span class="tip">
+            //                 ${message.content}
+            //                 <a class="red-tip reconnect">连线客服</a>
+            //             </span>
+            //         </p>
+            //     </div>`;
+            //     break;
+
+            default:
+                break;
+
+        }
+    },
+
+    // 刚进入提示
+    enterSuccess: function() {
         append(time(Date.now()).show());
         append(time(Date.now()).show());
-        append(gg.sendMsg($(this).val(), true));
-        append(gg.sendImg('http://img2.imgtn.bdimg.com/it/u=3492499187,4068539923&fm=11&gp=0.jpg'));
-        $(this).val('');
+        append(tip().offLine());
+    },
+
+    // 连线人工客服
+    linkSuccess: function(type, message) {
+        var status = $('.chat-status'),
+            name = $('.service-name');
+
+        if (type === 2 || type === 3) {
+            status.css('background', '#85be4a');
+            name.text('YOHO!客服');
+            append(tip(message.content).onLine());
+        } else {
+            name.text('YOHO!客服');
+        }
+    },
+
+    // 用户发消息
+    handleCusMsg: function(rec, msgType, message) {
+        if (msgType === 2) {
+            append(gg.sendImg(message.content, true));
+        } else {
+            append(gg.sendMsg(message.content, true));
+        }
         resizeFooter();
         resizeFooter();
+    }
+};
+
+chat.init();
+
+// 用户发送消息
+const sendMsg = function(type, content) {
+    if (!content) {
+        return;
+    } else {
+        cmEntity.type = 3;
+        cmEntity.message.content = content;
+        cmEntity.message.type = type || 1;
+        socket.send(JSON.stringify(cmEntity));
+    }
+};
+
+// 客户端接受消息
 
 
-        setTimeout(function() {
-            append(mm.sendMsg('想要玩的好，法老之鹰不可少!'));
-            append(mm.sendImg('http://www.027zpw.com/zimeiti/uploads/allimg/160525/09301R521-0.jpg'));
-            resizeFooter();
-        }, 1000);
+$('.text-in').on('keydown', function(e) {
+    if (e.keyCode === 13) {
+        sendMsg(1, $(this).val());
+        $(this).val('');
     }
     }
 });
 });
 
 
@@ -54,6 +187,29 @@ $('.menu-trigger').on('touchend', function() {
         $menu.hide();
         $menu.hide();
         resizeFooter();
         resizeFooter();
     }
     }
+
+    $('.upload-img').upload({
+        auto: true,
+        fileType: 'image/*',
+        uploadScript: '/api/upload/image',
+        fileObjName: 'filename',
+        fileSizeLimit: 999999,
+        height: '100%',
+        width: '100%',
+        multi: false,
+        formData: {
+            bucket: 'suggest'
+        },
+        onUploadComplete: function(file, data) {
+            let url;
+
+            data = saveImage.saveImage(data);
+            url = data.imgList[0].imgRelUrl + '?imageView2/2/w/640/q/90';
+            url = 'http://img11.static.yhbimg.com/suggest' + url;
+            sendMsg(2, url);
+        }
+    });
+    $('.uploadifive-button').css('position', 'absolute');
 });
 });
 
 
 // 评论
 // 评论
@@ -87,12 +243,4 @@ $('#chat-window').on('click', '.chat-image', function() {
     fake.on('click', function() {
     fake.on('click', function() {
         fake.fadeOut();
         fake.fadeOut();
     });
     });
-});
-
-
-
-
-
-
-
-
+});

@@ -6,8 +6,12 @@
 'use strict';
 'use strict';
 
 
 class ChatRole {
 class ChatRole {
-    constructor() {
-        this.fakeImg = '';
+    constructor(headIcon) {
+        this.headIcon = headIcon;
+    }
+
+    changeIcon(src) {
+        this.headIcon = src;
     }
     }
 }
 }
 
 
@@ -15,7 +19,7 @@ class Customer extends ChatRole {
     sendMsg(msg, status) {
     sendMsg(msg, status) {
         status = status ? '' : '<i class="send-fail">!</i>';
         status = status ? '' : '<i class="send-fail">!</i>';
         return `<div class="msg-wrap send-msg">
         return `<div class="msg-wrap send-msg">
-                    <img src="" alt="" class="head-icon">
+                    <img src="${this.headIcon}" alt="" class="head-icon">
                     <div class="chat-info">
                     <div class="chat-info">
                         ${status}
                         ${status}
                         <span>${msg}</span> 
                         <span>${msg}</span> 
@@ -26,7 +30,7 @@ class Customer extends ChatRole {
     sendImg(src, status) {
     sendImg(src, status) {
         status = status ? '' : '<i class="send-fail">!</i>';
         status = status ? '' : '<i class="send-fail">!</i>';
         return `<div class="msg-wrap send-msg">
         return `<div class="msg-wrap send-msg">
-                    <img src="" alt="" class="head-icon">
+                    <img src="${this.headIcon}" alt="" class="head-icon">
                     <div class="chat-info">
                     <div class="chat-info">
                         ${status}
                         ${status}
                         <span class="image">
                         <span class="image">
@@ -40,7 +44,7 @@ class Customer extends ChatRole {
 class Employee extends ChatRole {
 class Employee extends ChatRole {
     sendMsg(msg) {
     sendMsg(msg) {
         return `<div class="msg-wrap recevied-msg">
         return `<div class="msg-wrap recevied-msg">
-                    <img src="" alt="" class="head-icon">
+                    <img src="${this.headIcon}" alt="" class="head-icon">
                     <div class="chat-info">
                     <div class="chat-info">
                         <span>${msg}</span>
                         <span>${msg}</span>
                     </div>
                     </div>
@@ -49,7 +53,7 @@ class Employee extends ChatRole {
 
 
     sendImg(src) {
     sendImg(src) {
         return `<div class="msg-wrap recevied-msg">
         return `<div class="msg-wrap recevied-msg">
-                    <img src="" alt="" class="head-icon">
+                    <img src="${this.headIcon}" alt="" class="head-icon">
                     <div class="chat-info">
                     <div class="chat-info">
                         <span class="image">
                         <span class="image">
                             <img src="${src}" alt="" class="chat-image">
                             <img src="${src}" alt="" class="chat-image">
@@ -59,9 +63,5 @@ class Employee extends ChatRole {
     }
     }
 }
 }
 
 
-class Robot extends ChatRole {
-
-}
-
-export {ChatRole, Customer, Employee, Robot};
+export {ChatRole, Customer, Employee};
 
 

+/**
+ * socket 聊天
+ *
+ * @author: liqi <qi.li@yoho.cn>
+ * @date: 2016/11/8
+ */
+
+var param,
+    servers,
+    socket,
+    server,
+    conversationMessage;
+
+function _randomServer() {
+    return servers[new Date().getTime() % servers.length];
+}
+
+/**
+ * socket初始化
+ * @param options
+ */
+function socketInit(options) {
+    servers = options.servers;
+    server = _randomServer();
+    conversationMessage = options.conversationMessage;
+
+    if (!window.WebSocket) {
+        window.WebSocket = window.MozWebSocket;
+    }
+
+    if (window.WebSocket) {
+        param = JSON.stringify(conversationMessage);
+        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');
+    }
+}
+
+/**
+ * 发送消息
+ * @param msg 消息内容
+ */
+function sendMsg(msg) {
+    if (!window.WebSocket) {
+        return;
+    }
+    if (socket.readyState === WebSocket.OPEN) {
+        console.log(msg);
+        socket.send(msg);
+    } else {
+        console.log('The socket is not open.');
+    }
+}
+
+module.exports = {
+    init: socketInit,
+    send: sendMsg
+};
+

+/**
+ * socket config
+ *
+ * @author: liqi <qi.li@yoho.cn>
+ * @date: 2016/11/8
+ */
+
+var config = {
+    servers: ['ws://socket.yohobuy.com:10240'],
+    defaultUserHead: '//img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif',
+    recType: {
+        ENTER: 1,                 // 用户进入
+        LINK_SUCCESS: 2,          // 连线人工客服回应
+        MANUAL_SERVICE: 2,        // 连线人工客服
+        CU_SEND: 3,               // 用户发消息
+        BREAK_TIME: 5,            // 断链倒计时
+        ROBOT_SEND: 103,          // 机器人消息
+        TRANSFER: 1006,           // 会话转移
+        CS_ENTER: 10001,          // 客服进入
+        CS_CHANGE_STATE: 10002,   // 客服更改状态
+        CS_SEND: 10003,           // 客服发送消息
+        NEW_CU: 10004,            // 新用户接入
+        EVAL_INVITE: 10005,       // 客服评价邀请
+        TRANSFER_REQ: 10006,      // 收到他人的转移的请求
+        TRANS_REQ_ANSWER: 10007,  // 收到他人对自己转移请求的反馈
+        SUC_DISTRIBUTE: 10009,    // 客服管理员收到会话分配成功的回执
+        CS_CHATTING: 5000000,    // 客服管理员收到会话分配成功的回执
+        OFFLINE: 999999999,        // 断线
+        OP_LEAVE: 999999998      // 对方离开
+    },
+
+    conversationMessage: {
+        objectId: '',
+        sendTime: 0,
+        sortId: 1,
+        sortCode: '1',
+        platId: 2,
+        userId: 0,
+        conversationId: 0,
+        sessionId: '',
+        encryptedUid: 0,
+        userHead: '//img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif', // 用户头像
+        userName: '18551982892', // 用户账号
+        csId: 0,
+        type: 1,
+        serviceSortId: 0,
+        serviceSortCode: '',
+        customerSettingId: 0,
+        message: {
+            messageObjectId: '',
+            type: 0,
+            content: '',
+            newContent: ''
+        }
+    }
+};
+
+module.exports = config;

@@ -6,8 +6,8 @@
 */
 */
 
 
 class Tip {
 class Tip {
-    constructor(uname) {
-        this.uname = uname || '';
+    constructor(msg) {
+        this.uname = msg || '';
     }
     }
 
 
     offLine() {
     offLine() {
@@ -18,7 +18,7 @@ class Tip {
 
 
     onLine() {
     onLine() {
         return `<div class="change-mm">
         return `<div class="change-mm">
-                    <span class="leave-msg">${this.uname}正在为您服务</span>
+                    <span class="leave-msg">${this.msg}</span>
                 </div>`;
                 </div>`;
     }
     }
 }
 }

@@ -57,4 +57,12 @@
         width: 120px;
         width: 120px;
         opacity: 0;
         opacity: 0;
     }
     }
+
+    .uploadifive-button {
+        color: transparent;
+    }
+
+    .uploadifive-queue {
+        display: none;
+    }
 }
 }