Authored by zzzzzzz

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

... ... @@ -33,12 +33,12 @@
<div class="menu">
<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>
<p class="menu-name">拍照</p>
</div>
<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>
<p class="menu-name">相册</p>
</div>
... ...
... ... @@ -5,10 +5,17 @@
'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');
... ... @@ -16,9 +23,9 @@ const append = (html) => {
chatBox.append(html);
};
let gg = new Customer(),
mm = new Employee();
let gg, mm;
// 聊天调整footer位置
const resizeFooter = () => {
let bottom = $('#chat-footer').height();
... ... @@ -26,20 +33,146 @@ const resizeFooter = () => {
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(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();
}
};
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();
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.fadeOut();
});
});
});
\ No newline at end of file
... ...
... ... @@ -6,8 +6,12 @@
'use strict';
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) {
status = status ? '' : '<i class="send-fail">!</i>';
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">
${status}
<span>${msg}</span>
... ... @@ -26,7 +30,7 @@ class Customer extends ChatRole {
sendImg(src, status) {
status = status ? '' : '<i class="send-fail">!</i>';
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">
${status}
<span class="image">
... ... @@ -40,7 +44,7 @@ class Customer extends ChatRole {
class Employee extends ChatRole {
sendMsg(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">
<span>${msg}</span>
</div>
... ... @@ -49,7 +53,7 @@ class Employee extends ChatRole {
sendImg(src) {
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">
<span class="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 {
constructor(uname) {
this.uname = uname || '';
constructor(msg) {
this.uname = msg || '';
}
offLine() {
... ... @@ -18,7 +18,7 @@ class Tip {
onLine() {
return `<div class="change-mm">
<span class="leave-msg">${this.uname}正在为您服务</span>
<span class="leave-msg">${this.msg}</span>
</div>`;
}
}
... ...
... ... @@ -57,4 +57,12 @@
width: 120px;
opacity: 0;
}
.uploadifive-button {
color: transparent;
}
.uploadifive-queue {
display: none;
}
}
... ...