821 lines
23 KiB
JavaScript
821 lines
23 KiB
JavaScript
import { reactive, ref, unref } from 'vue';
|
||
import sheep from '@/sheep';
|
||
import chat from '@/sheep/api/chat';
|
||
import dayjs from 'dayjs';
|
||
import io from '@hyoga/uni-socket.io';
|
||
|
||
export function useChatWebSocket(socketConfig) {
|
||
let SocketIo = null;
|
||
|
||
// chat状态数据
|
||
const state = reactive({
|
||
chatDotNum: 0, //总状态红点
|
||
chatList: [], //会话信息
|
||
customerUserInfo: {}, //用户信息
|
||
customerServerInfo: {
|
||
//客服信息
|
||
title: '连接中...',
|
||
state: 'connecting',
|
||
avatar: null,
|
||
nickname: '',
|
||
},
|
||
socketState: {
|
||
isConnect: true, //是否连接成功
|
||
isConnecting: false, //重连中，不允许新的socket开启。
|
||
tip: '',
|
||
},
|
||
chatHistoryPagination: {
|
||
page: 0, //当前页
|
||
list_rows: 10, //每页条数
|
||
last_id: 0, //最后条ID
|
||
lastPage: 0, //总共多少页
|
||
loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
|
||
},
|
||
templateChatList: [], //猜你想问
|
||
|
||
chatConfig: {}, // 配置信息
|
||
|
||
isSendSucces: -1, // 是否发送成功 -1=发送中|0=发送成功|1发送失败
|
||
});
|
||
|
||
/**
|
||
* 连接初始化
|
||
* @param {Object} config - 配置信息
|
||
* @param {Function} callBack -回调函数,有新消息接入，保持底部
|
||
*/
|
||
const socketInit = (config, callBack) => {
|
||
state.chatConfig = config;
|
||
if (SocketIo && SocketIo.connected) return; // 如果socket已经连接，返回false
|
||
if (state.socketState.isConnecting) return; // 重连中，返回false
|
||
|
||
// 启动初始化
|
||
SocketIo = io(config.chat_domain, {
|
||
reconnection: true, // 默认 true 是否断线重连
|
||
reconnectionAttempts: 5, // 默认无限次 断线尝试次数
|
||
reconnectionDelay: 1000, // 默认 1000，进行下一次重连的间隔。
|
||
reconnectionDelayMax: 5000, // 默认 5000， 重新连接等待的最长时间 默认 5000
|
||
randomizationFactor: 0.5, // 默认 0.5 [0-1]，随机重连延迟时间
|
||
timeout: 20000, // 默认 20s
|
||
transports: ['websocket', 'polling'], // websocket | polling,
|
||
...config,
|
||
});
|
||
|
||
// 监听连接
|
||
SocketIo.on('connect', async (res) => {
|
||
socketReset(callBack);
|
||
// socket连接
|
||
// 用户登录
|
||
// 顾客登录
|
||
console.log('socket:connect');
|
||
});
|
||
// 监听消息
|
||
SocketIo.on('message', (res) => {
|
||
if (res.error === 0) {
|
||
const { message, sender } = res.data;
|
||
state.chatList.push(formatMessage(res.data.message));
|
||
|
||
// 告诉父级页面
|
||
// window.parent.postMessage({
|
||
// chatDotNum: ++state.chatDotNum
|
||
// })
|
||
callBack && callBack();
|
||
}
|
||
});
|
||
// 监听客服接入成功
|
||
SocketIo.on('customer_service_access', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: res.data.customer_service.name,
|
||
state: 'online',
|
||
avatar: res.data.customer_service.avatar,
|
||
});
|
||
state.chatList.push(formatMessage(res.data.message));
|
||
// callBack && callBack()
|
||
}
|
||
});
|
||
// 监听排队等待
|
||
SocketIo.on('waiting_queue', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: res.data.title,
|
||
state: 'waiting',
|
||
avatar: '',
|
||
});
|
||
// callBack && callBack()
|
||
}
|
||
});
|
||
// 监听没有客服在线
|
||
SocketIo.on('no_customer_service', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: '暂无客服在线...',
|
||
state: 'waiting',
|
||
avatar: '',
|
||
});
|
||
}
|
||
state.chatList.push(formatMessage(res.data.message));
|
||
// callBack && callBack()
|
||
});
|
||
// 监听客服上线
|
||
SocketIo.on('customer_service_online', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: res.data.customer_service.name,
|
||
state: 'online',
|
||
avatar: res.data.customer_service.avatar,
|
||
});
|
||
}
|
||
});
|
||
// 监听客服下线
|
||
SocketIo.on('customer_service_offline', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: res.data.customer_service.name,
|
||
state: 'offline',
|
||
avatar: res.data.customer_service.avatar,
|
||
});
|
||
}
|
||
});
|
||
// 监听客服忙碌
|
||
SocketIo.on('customer_service_busy', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: res.data.customer_service.name,
|
||
state: 'busy',
|
||
avatar: res.data.customer_service.avatar,
|
||
});
|
||
}
|
||
});
|
||
// 监听客服断开链接
|
||
SocketIo.on('customer_service_break', (res) => {
|
||
if (res.error === 0) {
|
||
editCustomerServerInfo({
|
||
title: '客服服务结束',
|
||
state: 'offline',
|
||
avatar: '',
|
||
});
|
||
state.socketState.isConnect = false;
|
||
state.socketState.tip = '当前服务已结束';
|
||
}
|
||
state.chatList.push(formatMessage(res.data.message));
|
||
// callBack && callBack()
|
||
});
|
||
// 监听自定义错误 custom_error
|
||
SocketIo.on('custom_error', (error) => {
|
||
editCustomerServerInfo({
|
||
title: error.msg,
|
||
state: 'offline',
|
||
avatar: '',
|
||
});
|
||
console.log('custom_error:', error);
|
||
});
|
||
// 监听错误 error
|
||
SocketIo.on('error', (error) => {
|
||
console.log('error:', error);
|
||
});
|
||
// 重连失败 connect_error
|
||
SocketIo.on('connect_error', (error) => {
|
||
console.log('connect_error');
|
||
});
|
||
// 连接上，但无反应 connect_timeout
|
||
SocketIo.on('connect_timeout', (error) => {
|
||
console.log(error, 'connect_timeout');
|
||
});
|
||
// 服务进程销毁 disconnect
|
||
SocketIo.on('disconnect', (error) => {
|
||
console.log(error, 'disconnect');
|
||
});
|
||
// 服务重启重连上reconnect
|
||
SocketIo.on('reconnect', (error) => {
|
||
console.log(error, 'reconnect');
|
||
});
|
||
// 开始重连reconnect_attempt
|
||
SocketIo.on('reconnect_attempt', (error) => {
|
||
state.socketState.isConnect = false;
|
||
state.socketState.isConnecting = true;
|
||
editCustomerServerInfo({
|
||
title: `重连中，第${error}次尝试...`,
|
||
state: 'waiting',
|
||
avatar: '',
|
||
});
|
||
console.log(error, 'reconnect_attempt');
|
||
});
|
||
// 重新连接中reconnecting
|
||
SocketIo.on('reconnecting', (error) => {
|
||
console.log(error, 'reconnecting');
|
||
});
|
||
// 重新连接错误reconnect_error
|
||
SocketIo.on('reconnect_error', (error) => {
|
||
console.log('reconnect_error');
|
||
});
|
||
// 重新连接失败reconnect_failed
|
||
SocketIo.on('reconnect_failed', (error) => {
|
||
state.socketState.isConnecting = false;
|
||
editCustomerServerInfo({
|
||
title: `重连失败，请刷新重试~`,
|
||
state: 'waiting',
|
||
avatar: '',
|
||
});
|
||
console.log(error, 'reconnect_failed');
|
||
|
||
// setTimeout(() => {
|
||
state.isSendSucces = 1;
|
||
// }, 500)
|
||
});
|
||
};
|
||
|
||
// 重置socket
|
||
const socketReset = (callBack) => {
|
||
state.chatList = [];
|
||
state.chatHistoryList = [];
|
||
state.chatHistoryPagination = {
|
||
page: 0,
|
||
per_page: 10,
|
||
last_id: 0,
|
||
totalPage: 0,
|
||
};
|
||
socketConnection(callBack); // 连接
|
||
};
|
||
|
||
// 退出连接
|
||
const socketClose = () => {
|
||
SocketIo.emit('customer_logout', {}, (res) => {
|
||
console.log('socket:退出', res);
|
||
});
|
||
};
|
||
|
||
// 测试事件
|
||
const socketTest = () => {
|
||
SocketIo.emit('test', {}, (res) => {
|
||
console.log('test:test', res);
|
||
});
|
||
};
|
||
|
||
// 发送消息
|
||
const socketSendMsg = (data, sendMsgCallBack) => {
|
||
state.isSendSucces = -1;
|
||
state.chatList.push(data);
|
||
sendMsgCallBack && sendMsgCallBack();
|
||
SocketIo.emit(
|
||
'message',
|
||
{
|
||
message: formatInput(data),
|
||
...data.customData,
|
||
},
|
||
(res) => {
|
||
// setTimeout(() => {
|
||
state.isSendSucces = res.error;
|
||
// }, 500)
|
||
|
||
// console.log(res, 'socket:send');
|
||
// sendMsgCallBack && sendMsgCallBack()
|
||
},
|
||
);
|
||
};
|
||
|
||
// 连接socket,存入sessionId
|
||
const socketConnection = (callBack) => {
|
||
SocketIo.emit(
|
||
'connection',
|
||
{
|
||
auth: 'user',
|
||
token: uni.getStorageSync('socketUserToken') || '',
|
||
session_id: uni.getStorageSync('socketSessionId') || '',
|
||
},
|
||
(res) => {
|
||
if (res.error === 0) {
|
||
socketCustomerLogin(callBack);
|
||
uni.setStorageSync('socketSessionId', res.data.session_id);
|
||
// uni.getStorageSync('socketUserToken') && socketLogin(uni.getStorageSync(
|
||
// 'socketUserToken')) // 如果有用户token,绑定
|
||
state.customerUserInfo = res.data.chat_user;
|
||
state.socketState.isConnect = true;
|
||
} else {
|
||
editCustomerServerInfo({
|
||
title: `服务器异常！`,
|
||
state: 'waiting',
|
||
avatar: '',
|
||
});
|
||
state.socketState.isConnect = false;
|
||
}
|
||
},
|
||
);
|
||
};
|
||
|
||
// 用户id,获取token
|
||
const getUserToken = async (id) => {
|
||
const res = await chat.unifiedToken();
|
||
if (res.error === 0) {
|
||
uni.setStorageSync('socketUserToken', res.data.token);
|
||
// SocketIo && SocketIo.connected && socketLogin(res.data.token)
|
||
}
|
||
return res;
|
||
};
|
||
|
||
// 用户登录
|
||
const socketLogin = (token) => {
|
||
SocketIo.emit(
|
||
'login',
|
||
{
|
||
token: token,
|
||
},
|
||
(res) => {
|
||
console.log(res, 'socket:login');
|
||
state.customerUserInfo = res.data.chat_user;
|
||
},
|
||
);
|
||
};
|
||
|
||
// 顾客登录
|
||
const socketCustomerLogin = (callBack) => {
|
||
SocketIo.emit(
|
||
'customer_login',
|
||
{
|
||
room_id: state.chatConfig.room_id,
|
||
},
|
||
(res) => {
|
||
state.templateChatList = res.data.questions.length ? res.data.questions : [];
|
||
state.chatList.push({
|
||
from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||
mode: 'template', // goods,order,image,text,system
|
||
date: new Date().getTime(), //时间
|
||
content: {
|
||
//内容
|
||
list: state.templateChatList,
|
||
},
|
||
});
|
||
res.error === 0 && socketHistoryList(callBack);
|
||
},
|
||
);
|
||
};
|
||
|
||
// 获取历史消息
|
||
const socketHistoryList = (historyCallBack) => {
|
||
state.chatHistoryPagination.loadStatus = 'loading';
|
||
state.chatHistoryPagination.page += 1;
|
||
SocketIo.emit('messages', state.chatHistoryPagination, (res) => {
|
||
if (res.error === 0) {
|
||
state.chatHistoryPagination.total = res.data.messages.total;
|
||
state.chatHistoryPagination.lastPage = res.data.messages.last_page;
|
||
state.chatHistoryPagination.page = res.data.messages.current_page;
|
||
res.data.messages.data.forEach((item) => {
|
||
item.message_type && state.chatList.unshift(formatMessage(item));
|
||
});
|
||
state.chatHistoryPagination.loadStatus =
|
||
state.chatHistoryPagination.page < state.chatHistoryPagination.lastPage
|
||
? 'loadmore'
|
||
: 'nomore';
|
||
if (state.chatHistoryPagination.last_id == 0) {
|
||
state.chatHistoryPagination.last_id = res.data.messages.data.length
|
||
? res.data.messages.data[0].id
|
||
: 0;
|
||
}
|
||
state.chatHistoryPagination.page === 1 && historyCallBack && historyCallBack();
|
||
}
|
||
|
||
// 历史记录之后，猜你想问
|
||
// state.chatList.push({
|
||
// from: 'customer_service', // 用户customer右 | 顾客customer_service左 | 系统system中间
|
||
// mode: 'template', // goods,order,image,text,system
|
||
// date: new Date().getTime(), //时间
|
||
// content: { //内容
|
||
// list: state.templateChatList
|
||
// }
|
||
// })
|
||
});
|
||
};
|
||
|
||
// 修改客服信息
|
||
const editCustomerServerInfo = (data) => {
|
||
state.customerServerInfo = {
|
||
...state.customerServerInfo,
|
||
...data,
|
||
};
|
||
};
|
||
|
||
/**
|
||
* ================
|
||
* 工具函数 ↓
|
||
* ===============
|
||
*/
|
||
|
||
/**
|
||
* 是否显示时间
|
||
* @param {*} item - 数据
|
||
* @param {*} index - 索引
|
||
*/
|
||
const showTime = (item, index) => {
|
||
if (unref(state.chatList)[index + 1]) {
|
||
let dateString = dayjs(unref(state.chatList)[index + 1].date).fromNow();
|
||
if (dateString === dayjs(unref(item).date).fromNow()) {
|
||
return false;
|
||
} else {
|
||
dateString = dayjs(unref(item).date).fromNow();
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
};
|
||
|
||
/**
|
||
* 格式化时间
|
||
* @param {*} time - 时间戳
|
||
*/
|
||
const formatTime = (time) => {
|
||
let diffTime = new Date().getTime() - time;
|
||
if (diffTime > 28 * 24 * 60 * 1000) {
|
||
return dayjs(time).format('MM/DD HH:mm');
|
||
}
|
||
if (diffTime > 360 * 28 * 24 * 60 * 1000) {
|
||
return dayjs(time).format('YYYY/MM/DD HH:mm');
|
||
}
|
||
return dayjs(time).fromNow();
|
||
};
|
||
|
||
/**
|
||
* 获取焦点
|
||
* @param {*} virtualNode - 节点信息 ref
|
||
*/
|
||
const getFocus = (virtualNode) => {
|
||
if (window.getSelection) {
|
||
let chatInput = unref(virtualNode);
|
||
chatInput.focus();
|
||
let range = window.getSelection();
|
||
range.selectAllChildren(chatInput);
|
||
range.collapseToEnd();
|
||
} else if (document.selection) {
|
||
let range = document.selection.createRange();
|
||
range.moveToElementText(chatInput);
|
||
range.collapse(false);
|
||
range.select();
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 文件上传
|
||
* @param {Blob} file -文件数据流
|
||
* @return {path,fullPath}
|
||
*/
|
||
|
||
const upload = (name, file) => {
|
||
return new Promise((resolve, reject) => {
|
||
let data = new FormData();
|
||
data.append('file', file, name);
|
||
data.append('group', 'chat');
|
||
ajax({
|
||
url: '/upload',
|
||
method: 'post',
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data',
|
||
},
|
||
data,
|
||
success: function (res) {
|
||
resolve(res);
|
||
},
|
||
error: function (err) {
|
||
reject(err);
|
||
},
|
||
});
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 粘贴到输入框
|
||
* @param {*} e - 粘贴内容
|
||
* @param {*} uploadHttp - 上传图片地址
|
||
*/
|
||
const onPaste = async (e) => {
|
||
let paste = e.clipboardData || window.clipboardData;
|
||
let filesArr = Array.from(paste.files);
|
||
filesArr.forEach(async (child) => {
|
||
if (child && child.type.includes('image')) {
|
||
e.preventDefault(); //阻止默认
|
||
let file = child;
|
||
const img = await readImg(file);
|
||
const blob = await compressImg(img, file.type);
|
||
const { data } = await upload(file.name, blob);
|
||
let image = `<img class="full-url" src='${data.fullurl}'>`;
|
||
document.execCommand('insertHTML', false, image);
|
||
} else {
|
||
document.execCommand('insertHTML', false, paste.getData('text'));
|
||
}
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 拖拽到输入框
|
||
* @param {*} e - 粘贴内容
|
||
* @param {*} uploadHttp - 上传图片地址
|
||
*/
|
||
const onDrop = async (e) => {
|
||
e.preventDefault(); //阻止默认
|
||
let filesArr = Array.from(e.dataTransfer.files);
|
||
filesArr.forEach(async (child) => {
|
||
if (child && child.type.includes('image')) {
|
||
let file = child;
|
||
const img = await readImg(file);
|
||
const blob = await compressImg(img, file.type);
|
||
const { data } = await upload(file.name, blob);
|
||
let image = `<img class="full-url" src='${data.fullurl}' >`;
|
||
document.execCommand('insertHTML', false, image);
|
||
} else {
|
||
ElMessage({
|
||
message: '禁止拖拽非图片资源',
|
||
type: 'warning',
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 解析富文本输入框内容
|
||
* @param {*} virtualNode -节点信息
|
||
* @param {Function} formatInputCallBack - cb 回调
|
||
*/
|
||
const formatChatInput = (virtualNode, formatInputCallBack) => {
|
||
let res = '';
|
||
let elemArr = Array.from(virtualNode.childNodes);
|
||
elemArr.forEach((child, index) => {
|
||
if (child.nodeName === '#text') {
|
||
//如果为文本节点
|
||
res += child.nodeValue;
|
||
if (
|
||
//文本节点的后面是图片，并且不是emoji,分开发送。输入框中的图片和文本表情分开。
|
||
elemArr[index + 1] &&
|
||
elemArr[index + 1].nodeName === 'IMG' &&
|
||
elemArr[index + 1] &&
|
||
elemArr[index + 1].name !== 'emoji'
|
||
) {
|
||
const data = {
|
||
from: 'customer',
|
||
mode: 'text',
|
||
date: new Date().getTime(),
|
||
content: {
|
||
text: filterXSS(res),
|
||
},
|
||
};
|
||
formatInputCallBack && formatInputCallBack(data);
|
||
res = '';
|
||
}
|
||
} else if (child.nodeName === 'BR') {
|
||
res += '<br/>';
|
||
} else if (child.nodeName === 'IMG') {
|
||
// 有emjio 和 一般图片
|
||
// 图片解析后直接发送，不跟文字表情一组
|
||
if (child.name !== 'emoji') {
|
||
let srcReg = /src=[\'\']?([^\'\']*)[\'\']?/i;
|
||
let src = child.outerHTML.match(srcReg);
|
||
const data = {
|
||
from: 'customer',
|
||
mode: 'image',
|
||
date: new Date().getTime(),
|
||
content: {
|
||
url: src[1],
|
||
path: src[1].replace(/http:\/\/[^\/]*/, ''),
|
||
},
|
||
};
|
||
formatInputCallBack && formatInputCallBack(data);
|
||
} else {
|
||
// 非表情图片跟文字一起发送
|
||
res += child.outerHTML;
|
||
}
|
||
} else if (child.nodeName === 'DIV') {
|
||
res += `<div style='width:200px; white-space: nowrap;'>${child.outerHTML}</div>`;
|
||
}
|
||
});
|
||
if (res) {
|
||
const data = {
|
||
from: 'customer',
|
||
mode: 'text',
|
||
date: new Date().getTime(),
|
||
content: {
|
||
text: filterXSS(res),
|
||
},
|
||
};
|
||
formatInputCallBack && formatInputCallBack(data);
|
||
}
|
||
unref(virtualNode).innerHTML = '';
|
||
};
|
||
|
||
/**
|
||
* 状态回调
|
||
* @param {*} res -接口返回数据
|
||
*/
|
||
const callBackNotice = (res) => {
|
||
ElNotification({
|
||
title: 'socket',
|
||
message: res.msg,
|
||
showClose: true,
|
||
type: res.error === 0 ? 'success' : 'warning',
|
||
duration: 1200,
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 格式化发送信息
|
||
* @param {Object} message
|
||
* @returns obj - 消息对象
|
||
*/
|
||
const formatInput = (message) => {
|
||
let obj = {};
|
||
switch (message.mode) {
|
||
case 'text':
|
||
obj = {
|
||
message_type: 'text',
|
||
message: message.content.text,
|
||
};
|
||
break;
|
||
case 'image':
|
||
obj = {
|
||
message_type: 'image',
|
||
message: message.content.path,
|
||
};
|
||
break;
|
||
case 'goods':
|
||
obj = {
|
||
message_type: 'goods',
|
||
message: message.content.item,
|
||
};
|
||
break;
|
||
case 'order':
|
||
obj = {
|
||
message_type: 'order',
|
||
message: message.content.item,
|
||
};
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return obj;
|
||
};
|
||
/**
|
||
* 格式化接收信息
|
||
* @param {*} message
|
||
* @returns obj - 消息对象
|
||
*/
|
||
const formatMessage = (message) => {
|
||
let obj = {};
|
||
switch (message.message_type) {
|
||
case 'system':
|
||
obj = {
|
||
from: 'system', // 用户customer左 | 顾客customer_service右 | 系统system中间
|
||
mode: 'system', // goods,order,image,text,system
|
||
date: message.create_time * 1000, //时间
|
||
content: {
|
||
//内容
|
||
text: message.message,
|
||
},
|
||
};
|
||
break;
|
||
case 'text':
|
||
obj = {
|
||
from: message.sender_identify,
|
||
mode: message.message_type,
|
||
date: message.create_time * 1000, //时间
|
||
sender: message.sender,
|
||
content: {
|
||
text: message.message,
|
||
messageId: message.id,
|
||
},
|
||
};
|
||
break;
|
||
case 'image':
|
||
obj = {
|
||
from: message.sender_identify,
|
||
mode: message.message_type,
|
||
date: message.create_time * 1000, //时间
|
||
sender: message.sender,
|
||
content: {
|
||
url: sheep.$url.cdn(message.message),
|
||
messageId: message.id,
|
||
},
|
||
};
|
||
break;
|
||
case 'goods':
|
||
obj = {
|
||
from: message.sender_identify,
|
||
mode: message.message_type,
|
||
date: message.create_time * 1000, //时间
|
||
sender: message.sender,
|
||
content: {
|
||
item: message.message,
|
||
messageId: message.id,
|
||
},
|
||
};
|
||
break;
|
||
case 'order':
|
||
obj = {
|
||
from: message.sender_identify,
|
||
mode: message.message_type,
|
||
date: message.create_time * 1000, //时间
|
||
sender: message.sender,
|
||
content: {
|
||
item: message.message,
|
||
messageId: message.id,
|
||
},
|
||
};
|
||
break;
|
||
default:
|
||
break;
|
||
}
|
||
return obj;
|
||
};
|
||
|
||
/**
|
||
* file 转换为 img
|
||
* @param {*} file - file 文件
|
||
* @returns img - img标签
|
||
*/
|
||
const readImg = (file) => {
|
||
return new Promise((resolve, reject) => {
|
||
const img = new Image();
|
||
const reader = new FileReader();
|
||
reader.onload = function (e) {
|
||
img.src = e.target.result;
|
||
};
|
||
reader.onerror = function (e) {
|
||
reject(e);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
img.onload = function () {
|
||
resolve(img);
|
||
};
|
||
img.onerror = function (e) {
|
||
reject(e);
|
||
};
|
||
});
|
||
};
|
||
|
||
/**
|
||
* 压缩图片
|
||
*@param img -被压缩的img对象
|
||
* @param type -压缩后转换的文件类型
|
||
* @param mx -触发压缩的图片最大宽度限制
|
||
* @param mh -触发压缩的图片最大高度限制
|
||
* @returns blob - 文件流
|
||
*/
|
||
const compressImg = (img, type = 'image/jpeg', mx = 1000, mh = 1000, quality = 1) => {
|
||
return new Promise((resolve, reject) => {
|
||
const canvas = document.createElement('canvas');
|
||
const context = canvas.getContext('2d');
|
||
const { width: originWidth, height: originHeight } = img;
|
||
// 最大尺寸限制
|
||
const maxWidth = mx;
|
||
const maxHeight = mh;
|
||
// 目标尺寸
|
||
let targetWidth = originWidth;
|
||
let targetHeight = originHeight;
|
||
if (originWidth > maxWidth || originHeight > maxHeight) {
|
||
if (originWidth / originHeight > 1) {
|
||
// 宽图片
|
||
targetWidth = maxWidth;
|
||
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
|
||
} else {
|
||
// 高图片
|
||
targetHeight = maxHeight;
|
||
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
|
||
}
|
||
}
|
||
canvas.width = targetWidth;
|
||
canvas.height = targetHeight;
|
||
context.clearRect(0, 0, targetWidth, targetHeight);
|
||
// 图片绘制
|
||
context.drawImage(img, 0, 0, targetWidth, targetHeight);
|
||
canvas.toBlob(
|
||
function (blob) {
|
||
resolve(blob);
|
||
},
|
||
type,
|
||
quality,
|
||
);
|
||
});
|
||
};
|
||
|
||
return {
|
||
compressImg,
|
||
readImg,
|
||
formatMessage,
|
||
formatInput,
|
||
callBackNotice,
|
||
|
||
socketInit,
|
||
socketSendMsg,
|
||
socketClose,
|
||
socketHistoryList,
|
||
|
||
getFocus,
|
||
formatChatInput,
|
||
onDrop,
|
||
onPaste,
|
||
upload,
|
||
|
||
getUserToken,
|
||
|
||
state,
|
||
|
||
socketTest,
|
||
|
||
showTime,
|
||
formatTime,
|
||
};
|
||
} |