rename
Lei OT
2 years ago
parent
3f56f5034d
commit
63965ffd69
@ -1,67 +0,0 @@
|
|||||||
// websocketLib.js
|
|
||||||
import { WebSocketSubject } from 'rxjs/webSocket';
|
|
||||||
import { retryWhen, delay, take, catchError } from 'rxjs/operators';
|
|
||||||
|
|
||||||
class WebSocketLib {
|
|
||||||
constructor(url, authToken, protocol) {
|
|
||||||
this.url = url;
|
|
||||||
this.authToken = authToken;
|
|
||||||
this.protocol = protocol;
|
|
||||||
}
|
|
||||||
|
|
||||||
connect() {
|
|
||||||
this.socket$ = new WebSocketSubject({
|
|
||||||
url: this.url,
|
|
||||||
protocol: this.protocol, // Use protocol for message type
|
|
||||||
openObserver: {
|
|
||||||
next: () => {
|
|
||||||
console.log('Connection established');
|
|
||||||
// Send authentication message as soon as connection is established
|
|
||||||
this.socket$.next({ event: 'authenticate', token: this.authToken });
|
|
||||||
},
|
|
||||||
},
|
|
||||||
closeObserver: {
|
|
||||||
next: () => {
|
|
||||||
console.log('Connection closed');
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
this.socket$
|
|
||||||
.pipe(
|
|
||||||
retryWhen(errors =>
|
|
||||||
errors.pipe(
|
|
||||||
delay(1000), // Retry connection every 1 second
|
|
||||||
take(10), // Maximum of 10 retries
|
|
||||||
catchError(error => new Error(`Failed to reconnect: ${error}`)) // Throw error after 10 failed retries
|
|
||||||
)
|
|
||||||
)
|
|
||||||
)
|
|
||||||
.subscribe(
|
|
||||||
msg => console.log('Received message:', msg),
|
|
||||||
err => console.error('Received error:', err),
|
|
||||||
() => console.log('Connection closed')
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
sendMessage(message) {
|
|
||||||
if (!this.socket$) {
|
|
||||||
console.error('Must connect to WebSocket server before sending a message');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.socket$.next({ type: 'message', content: message });
|
|
||||||
}
|
|
||||||
|
|
||||||
disconnect() {
|
|
||||||
if (!this.socket$) {
|
|
||||||
console.error('Must connect to WebSocket server before disconnecting');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.socket$.complete();
|
|
||||||
this.socket$ = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default WebSocketLib;
|
|
||||||
@ -1,334 +0,0 @@
|
|||||||
import { createContext, useContext, useState, useEffect, useRef } from 'react';
|
|
||||||
import { receivedMsgTypeMapped, sentMsgTypeMapped } from '@/lib/msgUtils';
|
|
||||||
import { groupBy, isEmpty, pick } from '@/utils/utils';
|
|
||||||
import { v4 as uuid } from 'uuid';
|
|
||||||
|
|
||||||
export const ConversationContext = createContext();
|
|
||||||
export const useConversationContext = () => useContext(ConversationContext);
|
|
||||||
export async function fetchJSON(url, data) {
|
|
||||||
let params = '';
|
|
||||||
let ifp = '';
|
|
||||||
if (data) {
|
|
||||||
params = new URLSearchParams(data).toString();
|
|
||||||
ifp = params ? '?' : ifp;
|
|
||||||
}
|
|
||||||
ifp = url.includes('?') ? '' : ifp;
|
|
||||||
const host = /^https?:\/\//i.test(url) ? '' : ''; // HT_HOST;
|
|
||||||
const response = await fetch(`${host}${url}${ifp}${params}`);
|
|
||||||
return await response.json();
|
|
||||||
}
|
|
||||||
export async function postJSON(url, obj) {
|
|
||||||
try {
|
|
||||||
const response = await fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
body: JSON.stringify(obj),
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Network response was not ok');
|
|
||||||
}
|
|
||||||
return await response.json();
|
|
||||||
} catch (error) {
|
|
||||||
console.error('fetch error:', error);
|
|
||||||
throw error;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// const API_HOST = 'http://202.103.68.144:8888';
|
|
||||||
const API_HOST = 'https://p9axztuwd7x8a7.mycht.cn/whatsapp_server';
|
|
||||||
|
|
||||||
export const useConversations = ({loginUser, realtimeAPI}) => {
|
|
||||||
const { userId } = loginUser;
|
|
||||||
|
|
||||||
const [errors, setErrors] = useState([]);
|
|
||||||
const [messages, setMessages] = useState([]); // active conversation
|
|
||||||
const [activeConversations, setActiveConversations] = useState({}); // all active conversation
|
|
||||||
const [currentID, setCurrentID] = useState();
|
|
||||||
const [conversationsList, setConversationsList] = useState([]); // open conversations
|
|
||||||
const [currentConversation, setCurrentConversation] = useState({ sn: '', customer_name: '', coli_sn: '' });
|
|
||||||
const currentConversationRef = useRef(currentConversation);
|
|
||||||
useEffect(() => {
|
|
||||||
currentConversationRef.current = currentConversation;
|
|
||||||
}, [currentConversation]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(errors, 'eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee');
|
|
||||||
|
|
||||||
return () => {};
|
|
||||||
}, [errors])
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
realtimeAPI.onError(addError.bind(null, 'Error'));
|
|
||||||
realtimeAPI.onMessage(handleMessage);
|
|
||||||
realtimeAPI.onCompletion(addError.bind(null, 'Not Connected to Server'));
|
|
||||||
realtimeAPI.keepAlive(); // Ping Server
|
|
||||||
|
|
||||||
// Cleanup function to remove the event listeners when the component is unmounted
|
|
||||||
return () => {
|
|
||||||
realtimeAPI.disconnect();
|
|
||||||
};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getConversationsList(); // todo: 和刷新订单会话页面有冲突
|
|
||||||
getTemplates();
|
|
||||||
return () => {};
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// if (!currentConversation.id && conversationsList.length > 0) {
|
|
||||||
// switchConversation(conversationsList[0]);
|
|
||||||
// }
|
|
||||||
// return () => {};
|
|
||||||
// }, [conversationsList]);
|
|
||||||
|
|
||||||
const poseConversationItemClose = async (item) => {
|
|
||||||
const res = await postJSON(`${API_HOST}/closeconversation`, { opisn: userId, conversationid: item.sn });
|
|
||||||
}
|
|
||||||
|
|
||||||
const getConversationsList = async () => {
|
|
||||||
const { result: data } = await fetchJSON(`${API_HOST}/getconversations`, { opisn: userId });
|
|
||||||
// const _data = [];
|
|
||||||
const _data = testConversations;
|
|
||||||
const list = [..._data, ...data.map(ele => ({...ele, customer_name: ele.whatsapp_name.trim()}))];
|
|
||||||
const dataMapped = list.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
|
|
||||||
setConversationsList(list);
|
|
||||||
setActiveConversations({...dataMapped, ...activeConversations});
|
|
||||||
console.log(list, dataMapped);
|
|
||||||
if (list && list.length) {
|
|
||||||
switchConversation(list[0]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const [templatesList, setTemplatesList] = useState([]);
|
|
||||||
const getTemplates = async () => {
|
|
||||||
const data = await fetchJSON(`${API_HOST}/listtemplates`);
|
|
||||||
const canUseTemplates = (data?.result?.items || []).filter((_t) => _t.status !== 'REJECTED').map((ele) => ({ ...ele, components: groupBy(ele.components, (_c) => _c.type.toLowerCase()) }));
|
|
||||||
setTemplatesList(canUseTemplates);
|
|
||||||
};
|
|
||||||
|
|
||||||
const [customerOrderProfile, setCustomerProfile] = useState({});
|
|
||||||
const getCustomerProfile = async (colisn) => {
|
|
||||||
const { result } = await fetchJSON(`${API_HOST}/getorderinfo`, { colisn });
|
|
||||||
const data = result?.[0] || {};
|
|
||||||
setCustomerProfile(data);
|
|
||||||
|
|
||||||
if (!isEmpty(data.conversation)) {
|
|
||||||
setConversationsList((pre) => [...data.conversations, ...pre]);
|
|
||||||
setCurrentConversation(data.conversation[0]);
|
|
||||||
const thisCMapped = data.conversation.reduce((r, v) => ({ ...r, [`${v.sn}`]: [] }), {});
|
|
||||||
setActiveConversations((pre) => ({ ...pre, ...thisCMapped }));
|
|
||||||
setMessages([]); // todo: 获取当前会话的历史消息
|
|
||||||
} else {
|
|
||||||
// reset chat window
|
|
||||||
setMessages([]);
|
|
||||||
if (isEmpty(data.contact?.[0]?.whatsapp_phone_number)) {
|
|
||||||
setCurrentConversation({ sn: '', customer_name: '', coli_sn: '' });
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
// 加入新会话
|
|
||||||
const newChat = {
|
|
||||||
'sn': uuid(),
|
|
||||||
// 'opi_sn': 354,
|
|
||||||
'coli_sn': colisn,
|
|
||||||
'whatsapp_phone_number': data.contact[0].whatsapp_phone_number,
|
|
||||||
"last_received_time": '',
|
|
||||||
"last_send_time": '',
|
|
||||||
'unread_msg_count': 0,
|
|
||||||
'whatsapp_name': data.contact[0].name,
|
|
||||||
'customer_name': data.contact[0].name,
|
|
||||||
};
|
|
||||||
setConversationsList((pre) => [...pre, newChat]);
|
|
||||||
setActiveConversations((pre) => ({ ...pre, [`${newChat.sn}`]: [] }));
|
|
||||||
setCurrentConversation(pick(newChat, ['sn', 'coli_sn', 'whatsapp_phone_number', 'whatsapp_name', 'customer_name']));
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const switchConversation = (cc) => {
|
|
||||||
setCurrentID(`${cc.sn}`);
|
|
||||||
setCurrentConversation({...cc, id: cc.sn, customer_name: cc.whatsapp_name.trim()});
|
|
||||||
|
|
||||||
if (isEmpty(cc.coli_sn) || cc.coli_sn === '0') {
|
|
||||||
setCustomerProfile({});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Get customer profile when switching conversation
|
|
||||||
useEffect(() => {
|
|
||||||
console.log('currentConversation', currentConversation);
|
|
||||||
setCurrentID(currentConversation.sn);
|
|
||||||
setMessages([...(activeConversations[currentConversation.sn] || [])]);
|
|
||||||
return () => {};
|
|
||||||
}, [currentConversation]);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* *****************************************************************************************************
|
|
||||||
* websocket --------------------------------------------------------------------------------------------
|
|
||||||
* *****************************************************************************************************
|
|
||||||
*/
|
|
||||||
const addError = (reason) => {
|
|
||||||
setErrors((prevErrors) => [...prevErrors, { reason }]);
|
|
||||||
};
|
|
||||||
|
|
||||||
const addMessageToConversations = (targetId, message) => {
|
|
||||||
setActiveConversations((prevList) => ({
|
|
||||||
...prevList,
|
|
||||||
[targetId]: [...(prevList[targetId] || []), message],
|
|
||||||
}));
|
|
||||||
// console.log('activeConversations', activeConversations);
|
|
||||||
if (targetId !== currentID) {
|
|
||||||
setConversationsList((prevList) => {
|
|
||||||
return prevList.map((ele) => {
|
|
||||||
if (ele.sn === targetId) {
|
|
||||||
return { ...ele, new_msgs: ele.new_msgs + 1, last_received_time: message.date };
|
|
||||||
}
|
|
||||||
return ele;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log(messages, 'messages');
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
|
|
||||||
}
|
|
||||||
}, [messages])
|
|
||||||
|
|
||||||
|
|
||||||
const addMessage = (message) => {
|
|
||||||
addMessageToConversations(message.conversationid, message);
|
|
||||||
if (message.conversationid === currentID) {
|
|
||||||
setMessages((prevMessages) => [...prevMessages, message]);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateMessage = (message) => {
|
|
||||||
let targetMsgs;
|
|
||||||
setMessages((prevMessages) => {
|
|
||||||
targetMsgs = prevMessages.map(ele => {
|
|
||||||
if (ele.id === ele.actionId && ele.actionId === message.actionId) {
|
|
||||||
return {...ele, id: message.id, status: message.status, dateString: message.dateString};
|
|
||||||
}
|
|
||||||
else if (ele.id === message.id) {
|
|
||||||
return {...ele, id: message.id, status: message.status, dateString: message.dateString};
|
|
||||||
}
|
|
||||||
return ele;
|
|
||||||
});
|
|
||||||
return targetMsgs;
|
|
||||||
});
|
|
||||||
// 更新会话中的消息
|
|
||||||
const targetId = message.conversationid; // currentConversationRef.current.sn;
|
|
||||||
setActiveConversations((prevList) => ({
|
|
||||||
...prevList,
|
|
||||||
[targetId]: targetMsgs,
|
|
||||||
}));
|
|
||||||
// 更新列表的时间
|
|
||||||
setConversationsList((prevList) => {
|
|
||||||
return prevList.map((ele) => {
|
|
||||||
if (ele.sn === targetId) {
|
|
||||||
return { ...ele, new_msgs: ele.new_msgs + 1, last_received_time: message.date };
|
|
||||||
}
|
|
||||||
return ele;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleMessage = (data) => {
|
|
||||||
console.log('handleMessage------------------', );
|
|
||||||
/**
|
|
||||||
* ! event handlers in JavaScript capture the environment (including variables) at the time they are defined, not when they are executed.
|
|
||||||
*/
|
|
||||||
const { errcode, errmsg, result } = data;
|
|
||||||
|
|
||||||
if (!result) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
let resultType = result?.action || result.type;
|
|
||||||
if (errcode !== 0) {
|
|
||||||
// addError('Error Connecting to Server');
|
|
||||||
resultType = 'error';
|
|
||||||
}
|
|
||||||
console.log(resultType, 'result.type');
|
|
||||||
const msgObj = receivedMsgTypeMapped[resultType].getMsg(result);
|
|
||||||
const msgRender = receivedMsgTypeMapped[resultType].contentToRender(msgObj);
|
|
||||||
const msgUpdate = receivedMsgTypeMapped[resultType].contentToUpdate(msgObj);
|
|
||||||
console.log('msgRender msgUpdate', msgRender, msgUpdate);
|
|
||||||
if ( ['whatsapp.message.updated', 'message', 'error'].includes(resultType)) {
|
|
||||||
updateMessage(msgUpdate);
|
|
||||||
// return false;
|
|
||||||
}
|
|
||||||
if ( ! isEmpty(msgRender)) {
|
|
||||||
addMessage(msgRender);
|
|
||||||
}
|
|
||||||
console.log('handleMessage*******************', );
|
|
||||||
};
|
|
||||||
|
|
||||||
const sendMessage = (msgObj) => {
|
|
||||||
const contentToSend = sentMsgTypeMapped[msgObj.type].contentToSend(msgObj);
|
|
||||||
realtimeAPI.sendMessage({ ...contentToSend, opi_sn: userId });
|
|
||||||
const contentToRender = sentMsgTypeMapped[msgObj.type].contentToRender(msgObj);
|
|
||||||
console.log(contentToRender, 'contentToRender sendMessage------------------');
|
|
||||||
addMessage(contentToRender);
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
errors,
|
|
||||||
messages,
|
|
||||||
conversationsList,
|
|
||||||
currentConversation,
|
|
||||||
sendMessage,
|
|
||||||
getConversationsList,
|
|
||||||
switchConversation,
|
|
||||||
templates: templatesList, // setTemplates, getTemplates,
|
|
||||||
customerOrderProfile, getCustomerProfile,
|
|
||||||
poseConversationItemClose
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// test:
|
|
||||||
const testConversations = [
|
|
||||||
{
|
|
||||||
'sn': 3001,
|
|
||||||
'opi_sn': 354,
|
|
||||||
'coli_sn': 0,
|
|
||||||
'whatsapp_phone_number': '+8618777396951',
|
|
||||||
"last_received_time": new Date().toDateString(),
|
|
||||||
"last_send_time": new Date().toDateString(),
|
|
||||||
'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2),
|
|
||||||
'whatsapp_name': 'LiaoYijun',
|
|
||||||
'customer_name': 'LiaoYijun',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'sn': 3002,
|
|
||||||
'opi_sn': 354,
|
|
||||||
'coli_sn': 0,
|
|
||||||
'whatsapp_phone_number': '+8613317835586',
|
|
||||||
"last_received_time": new Date().toDateString(),
|
|
||||||
"last_send_time": new Date().toDateString(),
|
|
||||||
'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2),
|
|
||||||
'whatsapp_name': 'QinQianSheng',
|
|
||||||
'customer_name': 'QinQianSheng',
|
|
||||||
},
|
|
||||||
// {
|
|
||||||
// 'sn': 3003,
|
|
||||||
// 'opi_sn': 354,
|
|
||||||
// 'coli_sn': 240129003,
|
|
||||||
// 'whatsapp_phone_number': '+8618777396951',
|
|
||||||
// "last_received_time": new Date().toDateString(),
|
|
||||||
// "last_send_time": new Date().toDateString(),
|
|
||||||
// 'unread_msg_count': Math.floor(Math.random() * (100 - 2 + 1) + 2),
|
|
||||||
// 'whatsapp_name': 'LeiYuanTing',
|
|
||||||
// },
|
|
||||||
];
|
|
||||||
Loading…
Reference in New Issue