fe / yohobuywap-node · Commits

Go to a project

Authored by zzzzzzz
Commit 5d6c72a82c7a89dfdf635c90ca2820e13a25ffc2 1 parent e1842961

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

Inline Side-by-side
Showing 7 changed files with 323 additions and 41 deletions
@@ -33,12 +33,12 @@ @@ -33,12 +33,12 @@
33 33
34 <div class="menu"> 34 <div class="menu">
35 <div class="icon-wrap camera"> 35 <div class="icon-wrap camera">
36 - <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*"> 36 + <input type="file" class="upload-img" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
37 <div class="icon"></div> 37 <div class="icon"></div>
38 <p class="menu-name">拍照</p> 38 <p class="menu-name">拍照</p>
39 </div> 39 </div>
40 <div class="icon-wrap photo"> 40 <div class="icon-wrap photo">
41 - <input type="file" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*"> 41 + <input type="file" class="upload-img" style="position: absolute;right: -3px;top: -3px;z-index: 999;" accept="image/*">
42 <div class="icon"></div> 42 <div class="icon"></div>
43 <p class="menu-name">相册</p> 43 <p class="menu-name">相册</p>
44 </div> 44 </div>
@@ -5,10 +5,17 @@ @@ -5,10 +5,17 @@
5 5
6 'use strict'; 6 'use strict';
7 7
8 -import {time} from './time';  
9 -import {tip} from './tip';  
10 -import {ChatRole, Customer, Employee, Robot} from './role';  
11 -import {RatingView, LeaveMSGView, OrderListView} from './view'; 8 +import { time } from './time';
  9 +import { tip } from './tip';
  10 +import { Customer, Employee} from './role';
  11 +import { RatingView, LeaveMSGView, OrderListView } from './view';
  12 +
  13 +require('../../home/jquery.upload');
  14 +var saveImage = require('../../home/save-image');
  15 +
  16 +var socket = require('./socket-chat'),
  17 + socketConf = require('./socket-config'),
  18 + cmEntity = socketConf.conversationMessage;
12 19
13 const chatBox = $('#chat-window'); 20 const chatBox = $('#chat-window');
14 21
@@ -16,9 +23,9 @@ const append = (html) => { @@ -16,9 +23,9 @@ const append = (html) => {
16 chatBox.append(html); 23 chatBox.append(html);
17 }; 24 };
18 25
19 -let gg = new Customer(),  
20 - mm = new Employee(); 26 +let gg, mm;
21 27
  28 +// 聊天调整footer位置
22 const resizeFooter = () => { 29 const resizeFooter = () => {
23 let bottom = $('#chat-footer').height(); 30 let bottom = $('#chat-footer').height();
24 31
@@ -26,20 +33,146 @@ const resizeFooter = () => { @@ -26,20 +33,146 @@ const resizeFooter = () => {
26 chatBox[0].scrollTop = chatBox[0].scrollHeight; 33 chatBox[0].scrollTop = chatBox[0].scrollHeight;
27 }; 34 };
28 35
29 -$('.text-in').on('keydown', function(e) {  
30 - if (e.keyCode === 13) {  
31 - append(tip('奥巴马').offLine());  
32 - append(time(Date.now()).show());  
33 - append(gg.sendMsg($(this).val(), true));  
34 - append(gg.sendImg('http://img2.imgtn.bdimg.com/it/u=3492499187,4068539923&fm=11&gp=0.jpg'));  
35 - $(this).val(''); 36 +
  37 +var chat = {
  38 + // 初始化websocket
  39 + init: function() {
  40 + const self = this;
  41 +
  42 + socket.init(Object.assign(socketConf, {
  43 + onMessage: function(e) {
  44 + var received = JSON.parse(e.data);
  45 + console.log(received);
  46 + cmEntity.conversationId = received.newConversationId > 0 ?
  47 + received.newConversationId :
  48 + received.conversationId;
  49 +
  50 + gg = new Customer(cmEntity.userHead);
  51 + mm = new Employee(cmEntity.userHead);
  52 + // 保存过程中信息
  53 + self.getMessage(received);
  54 + }
  55 + }));
  56 + },
  57 +
  58 + // 处理收到的消息
  59 + getMessage: function(rec) {
  60 + var tipTpl,
  61 + recType = rec.type,
  62 + message = rec.message,
  63 + msgType = message.type,
  64 + allTypes = socketConf.recType;
  65 +
  66 + switch (recType) {
  67 +
  68 + case allTypes.ENTER:
  69 + this.enterSuccess(message);
  70 + break;
  71 +
  72 + case allTypes.LINK_SUCCESS:
  73 + this.linkSuccess(msgType, message);
  74 + break;
  75 +
  76 + case allTypes.CU_SEND:
  77 + this.handleCusMsg(rec, msgType, message);
  78 + break;
  79 +
  80 + // case allTypes.BREAK_TIME:
  81 + // breakCountdown(message);
  82 + // break;
  83 +
  84 + case allTypes.ROBOT_SEND:
  85 + rec.csName = rec.csName || '客服机器人';
  86 + append(mm.sendMsg(message.content));
36 resizeFooter(); 87 resizeFooter();
37 88
38 - setTimeout(function() {  
39 - append(mm.sendMsg('想要玩的好，法老之鹰不可少!'));  
40 - append(mm.sendImg('http://www.027zpw.com/zimeiti/uploads/allimg/160525/09301R521-0.jpg')); 89 + break;
  90 +
  91 + // case allTypes.CS_SEND:
  92 + // // 处理客服消息
  93 + // handleCsMsg(rec, msgType, message);
  94 + // break;
  95 +
  96 + // case allTypes.EVAL_INVITE:
  97 + // // 客服发起
  98 + // processInfo.promoter = 2;
  99 + // showEvalModal();
  100 + // break;
  101 +
  102 + // case allTypes.CS_CHATTING:
  103 + // // 正在人工会话
  104 + // csChatting(message);
  105 + // break;
  106 +
  107 + // case allTypes.OFFLINE:
  108 + // tipTpl =
  109 + // `<div class="list-item">
  110 + // <p class="push-tip">
  111 + // <span class="tip">
  112 + // ${message.content}
  113 + // <a class="red-tip reconnect">连线客服</a>
  114 + // </span>
  115 + // </p>
  116 + // </div>`;
  117 + // break;
  118 +
  119 + default:
  120 + break;
  121 +
  122 + }
  123 + },
  124 +
  125 + // 刚进入提示
  126 + enterSuccess: function() {
  127 + append(time(Date.now()).show());
  128 + append(tip().offLine());
  129 + },
  130 +
  131 + // 连线人工客服
  132 + linkSuccess: function(type, message) {
  133 + var status = $('.chat-status'),
  134 + name = $('.service-name');
  135 +
  136 + if (type === 2 || type === 3) {
  137 + status.css('background', '#85be4a');
  138 + name.text('YOHO!客服');
  139 + append(tip(message.content).onLine());
  140 + } else {
  141 + name.text('YOHO!客服');
  142 + }
  143 + },
  144 +
  145 + // 用户发消息
  146 + handleCusMsg: function(rec, msgType, message) {
  147 + if (msgType === 2) {
  148 + append(gg.sendImg(message.content, true));
  149 + } else {
  150 + append(gg.sendMsg(message.content, true));
  151 + }
41 resizeFooter(); 152 resizeFooter();
42 - }, 1000); 153 + }
  154 +};
  155 +
  156 +chat.init();
  157 +
  158 +// 用户发送消息
  159 +const sendMsg = function(type, content) {
  160 + if (!content) {
  161 + return;
  162 + } else {
  163 + cmEntity.type = 3;
  164 + cmEntity.message.content = content;
  165 + cmEntity.message.type = type || 1;
  166 + socket.send(JSON.stringify(cmEntity));
  167 + }
  168 +};
  169 +
  170 +// 客户端接受消息
  171 +
  172 +$('.text-in').on('keydown', function(e) {
  173 + if (e.keyCode === 13) {
  174 + sendMsg(1, $(this).val());
  175 + $(this).val('');
43 } 176 }
44 }); 177 });
45 178
@@ -54,6 +187,29 @@ $('.menu-trigger').on('touchend', function() { @@ -54,6 +187,29 @@ $('.menu-trigger').on('touchend', function() {
54 $menu.hide(); 187 $menu.hide();
55 resizeFooter(); 188 resizeFooter();
56 } 189 }
  190 +
  191 + $('.upload-img').upload({
  192 + auto: true,
  193 + fileType: 'image/*',
  194 + uploadScript: '/api/upload/image',
  195 + fileObjName: 'filename',
  196 + fileSizeLimit: 999999,
  197 + height: '100%',
  198 + width: '100%',
  199 + multi: false,
  200 + formData: {
  201 + bucket: 'suggest'
  202 + },
  203 + onUploadComplete: function(file, data) {
  204 + let url;
  205 +
  206 + data = saveImage.saveImage(data);
  207 + url = data.imgList[0].imgRelUrl + '?imageView2/2/w/640/q/90';
  208 + url = 'http://img11.static.yhbimg.com/suggest' + url;
  209 + sendMsg(2, url);
  210 + }
  211 + });
  212 + $('.uploadifive-button').css('position', 'absolute');
57 }); 213 });
58 214
59 // 评论 215 // 评论
@@ -88,11 +244,3 @@ $('#chat-window').on('click', '.chat-image', function() { @@ -88,11 +244,3 @@ $('#chat-window').on('click', '.chat-image', function() {
88 fake.fadeOut(); 244 fake.fadeOut();
89 }); 245 });
90 }); 246 });
91 -  
92 -  
93 -  
94 -  
95 -  
96 -  
97 -  
98 -  
@@ -6,8 +6,12 @@ @@ -6,8 +6,12 @@
6 'use strict'; 6 'use strict';
7 7
8 class ChatRole { 8 class ChatRole {
9 - constructor() {  
10 - this.fakeImg = ''; 9 + constructor(headIcon) {
  10 + this.headIcon = headIcon;
  11 + }
  12 +
  13 + changeIcon(src) {
  14 + this.headIcon = src;
11 } 15 }
12 } 16 }
13 17
@@ -15,7 +19,7 @@ class Customer extends ChatRole { @@ -15,7 +19,7 @@ class Customer extends ChatRole {
15 sendMsg(msg, status) { 19 sendMsg(msg, status) {
16 status = status ? '' : '<i class="send-fail">!</i>'; 20 status = status ? '' : '<i class="send-fail">!</i>';
17 return `<div class="msg-wrap send-msg"> 21 return `<div class="msg-wrap send-msg">
18 - <img src="" alt="" class="head-icon"> 22 + <img src="${this.headIcon}" alt="" class="head-icon">
19 <div class="chat-info"> 23 <div class="chat-info">
20 ${status} 24 ${status}
21 <span>${msg}</span> 25 <span>${msg}</span>
@@ -26,7 +30,7 @@ class Customer extends ChatRole { @@ -26,7 +30,7 @@ class Customer extends ChatRole {
26 sendImg(src, status) { 30 sendImg(src, status) {
27 status = status ? '' : '<i class="send-fail">!</i>'; 31 status = status ? '' : '<i class="send-fail">!</i>';
28 return `<div class="msg-wrap send-msg"> 32 return `<div class="msg-wrap send-msg">
29 - <img src="" alt="" class="head-icon"> 33 + <img src="${this.headIcon}" alt="" class="head-icon">
30 <div class="chat-info"> 34 <div class="chat-info">
31 ${status} 35 ${status}
32 <span class="image"> 36 <span class="image">
@@ -40,7 +44,7 @@ class Customer extends ChatRole { @@ -40,7 +44,7 @@ class Customer extends ChatRole {
40 class Employee extends ChatRole { 44 class Employee extends ChatRole {
41 sendMsg(msg) { 45 sendMsg(msg) {
42 return `<div class="msg-wrap recevied-msg"> 46 return `<div class="msg-wrap recevied-msg">
43 - <img src="" alt="" class="head-icon"> 47 + <img src="${this.headIcon}" alt="" class="head-icon">
44 <div class="chat-info"> 48 <div class="chat-info">
45 <span>${msg}</span> 49 <span>${msg}</span>
46 </div> 50 </div>
@@ -49,7 +53,7 @@ class Employee extends ChatRole { @@ -49,7 +53,7 @@ class Employee extends ChatRole {
49 53
50 sendImg(src) { 54 sendImg(src) {
51 return `<div class="msg-wrap recevied-msg"> 55 return `<div class="msg-wrap recevied-msg">
52 - <img src="" alt="" class="head-icon"> 56 + <img src="${this.headIcon}" alt="" class="head-icon">
53 <div class="chat-info"> 57 <div class="chat-info">
54 <span class="image"> 58 <span class="image">
55 <img src="${src}" alt="" class="chat-image"> 59 <img src="${src}" alt="" class="chat-image">
@@ -59,9 +63,5 @@ class Employee extends ChatRole { @@ -59,9 +63,5 @@ class Employee extends ChatRole {
59 } 63 }
60 } 64 }
61 65
62 -class Robot extends ChatRole {  
63 -  
64 -}  
65 -  
66 -export {ChatRole, Customer, Employee, Robot}; 66 +export {ChatRole, Customer, Employee};
67 67
  1 +/**
  2 + * socket 聊天
  3 + *
  4 + * @author: liqi <qi.li@yoho.cn>
  5 + * @date: 2016/11/8
  6 + */
  7 +
  8 +var param,
  9 + servers,
  10 + socket,
  11 + server,
  12 + conversationMessage;
  13 +
  14 +function _randomServer() {
  15 + return servers[new Date().getTime() % servers.length];
  16 +}
  17 +
  18 +/**
  19 + * socket初始化
  20 + * @param options
  21 + */
  22 +function socketInit(options) {
  23 + servers = options.servers;
  24 + server = _randomServer();
  25 + conversationMessage = options.conversationMessage;
  26 +
  27 + if (!window.WebSocket) {
  28 + window.WebSocket = window.MozWebSocket;
  29 + }
  30 +
  31 + if (window.WebSocket) {
  32 + param = JSON.stringify(conversationMessage);
  33 + socket = new WebSocket(server + '/im?param=' + param);
  34 + socket.onmessage = options.onMessage || function() {
  35 + console.log('received msg');
  36 + };
  37 + socket.onopen = options.onOpen || function() {
  38 + console.log('websocket is open');
  39 + };
  40 + socket.onclose = options.onClose || function() {
  41 + console.log('websocket is closed');
  42 + };
  43 + } else {
  44 + console.log('websocket is not support');
  45 + }
  46 +}
  47 +
  48 +/**
  49 + * 发送消息
  50 + * @param msg 消息内容
  51 + */
  52 +function sendMsg(msg) {
  53 + if (!window.WebSocket) {
  54 + return;
  55 + }
  56 + if (socket.readyState === WebSocket.OPEN) {
  57 + console.log(msg);
  58 + socket.send(msg);
  59 + } else {
  60 + console.log('The socket is not open.');
  61 + }
  62 +}
  63 +
  64 +module.exports = {
  65 + init: socketInit,
  66 + send: sendMsg
  67 +};
  68 +
  1 +/**
  2 + * socket config
  3 + *
  4 + * @author: liqi <qi.li@yoho.cn>
  5 + * @date: 2016/11/8
  6 + */
  7 +
  8 +var config = {
  9 + servers: ['ws://socket.yohobuy.com:10240'],
  10 + defaultUserHead: '//img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif',
  11 + recType: {
  12 + ENTER: 1, // 用户进入
  13 + LINK_SUCCESS: 2, // 连线人工客服回应
  14 + MANUAL_SERVICE: 2, // 连线人工客服
  15 + CU_SEND: 3, // 用户发消息
  16 + BREAK_TIME: 5, // 断链倒计时
  17 + ROBOT_SEND: 103, // 机器人消息
  18 + TRANSFER: 1006, // 会话转移
  19 + CS_ENTER: 10001, // 客服进入
  20 + CS_CHANGE_STATE: 10002, // 客服更改状态
  21 + CS_SEND: 10003, // 客服发送消息
  22 + NEW_CU: 10004, // 新用户接入
  23 + EVAL_INVITE: 10005, // 客服评价邀请
  24 + TRANSFER_REQ: 10006, // 收到他人的转移的请求
  25 + TRANS_REQ_ANSWER: 10007, // 收到他人对自己转移请求的反馈
  26 + SUC_DISTRIBUTE: 10009, // 客服管理员收到会话分配成功的回执
  27 + CS_CHATTING: 5000000, // 客服管理员收到会话分配成功的回执
  28 + OFFLINE: 999999999, // 断线
  29 + OP_LEAVE: 999999998 // 对方离开
  30 + },
  31 +
  32 + conversationMessage: {
  33 + objectId: '',
  34 + sendTime: 0,
  35 + sortId: 1,
  36 + sortCode: '1',
  37 + platId: 2,
  38 + userId: 0,
  39 + conversationId: 0,
  40 + sessionId: '',
  41 + encryptedUid: 0,
  42 + userHead: '//img10.static.yhbimg.com/headimg/2013/11/28/09/01cae078abe5fe320c88cdf4c220212688.gif', // 用户头像
  43 + userName: '18551982892', // 用户账号
  44 + csId: 0,
  45 + type: 1,
  46 + serviceSortId: 0,
  47 + serviceSortCode: '',
  48 + customerSettingId: 0,
  49 + message: {
  50 + messageObjectId: '',
  51 + type: 0,
  52 + content: '',
  53 + newContent: ''
  54 + }
  55 + }
  56 +};
  57 +
  58 +module.exports = config;
@@ -6,8 +6,8 @@ @@ -6,8 +6,8 @@
6 */ 6 */
7 7
8 class Tip { 8 class Tip {
9 - constructor(uname) {  
10 - this.uname = uname || ''; 9 + constructor(msg) {
  10 + this.uname = msg || '';
11 } 11 }
12 12
13 offLine() { 13 offLine() {
@@ -18,7 +18,7 @@ class Tip { @@ -18,7 +18,7 @@ class Tip {
18 18
19 onLine() { 19 onLine() {
20 return `<div class="change-mm"> 20 return `<div class="change-mm">
21 - <span class="leave-msg">${this.uname}正在为您服务</span> 21 + <span class="leave-msg">${this.msg}</span>
22 </div>`; 22 </div>`;
23 } 23 }
24 } 24 }
@@ -57,4 +57,12 @@ @@ -57,4 +57,12 @@
57 width: 120px; 57 width: 120px;
58 opacity: 0; 58 opacity: 0;
59 } 59 }
  60 +
  61 + .uploadifive-button {
  62 + color: transparent;
  63 + }
  64 +
  65 + .uploadifive-queue {
  66 + display: none;
  67 + }
60 } 68 }