feat: 会话窗口
Lei OT
2 years ago
parent
11e4a44de2
commit
58198062ff
@ -1,5 +1,94 @@
|
||||
import { createContext, useContext } from 'react';
|
||||
import React, { createContext, useContext, useState, useEffect } from 'react';
|
||||
import { RealTimeAPI } from '@/lib/realTimeAPI';
|
||||
import { useGetJson } from '@/hooks/userFetch';
|
||||
|
||||
export const ConversationContext = createContext();
|
||||
|
||||
export const useConversations = () => useContext(ConversationContext);
|
||||
const URL = {
|
||||
conversationList: 'http://127.0.0.1:4523/m2/3888351-0-default/142426823',
|
||||
};
|
||||
const WS_URL = 'ws://202.103.68.144:8888/whatever/';
|
||||
// let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'aaa' });
|
||||
let realtimeAPI = new RealTimeAPI({ url: WS_URL, protocol: 'WhatsApp' });
|
||||
|
||||
export const useConversations = () => {
|
||||
const [errors, setErrors] = useState([]);
|
||||
const [messages, setMessages] = useState([]);
|
||||
const [conversations, setConversations] = useState({});
|
||||
const [currentID, setCurrentID] = useState();
|
||||
const [conversationsList, setConversationsList] = useState([]);
|
||||
const [currentConversation, setCurrentConversation] = useState({
|
||||
id: '', name: ''
|
||||
});
|
||||
|
||||
const [url, setUrl] = useState(URL.conversationList);
|
||||
const data = useGetJson(url);
|
||||
const fetchConversations = () => {
|
||||
setUrl(null); // reset url
|
||||
setUrl(URL.conversationList);
|
||||
}
|
||||
useEffect(() => {
|
||||
setConversationsList(data);
|
||||
if (data && data.length) {
|
||||
switchConversation(data[0]);
|
||||
}
|
||||
|
||||
return () => {};
|
||||
}, [data]);
|
||||
|
||||
const switchConversation = (cc) => {
|
||||
console.log('switch to ', cc.id, cc);
|
||||
setCurrentID(cc.id);
|
||||
setCurrentConversation(cc);
|
||||
};
|
||||
|
||||
const addError = (reason) => {
|
||||
setErrors(prevErrors => [...prevErrors, { reason }]);
|
||||
}
|
||||
|
||||
const addMessageToConversations = (customerId, message) => {
|
||||
setConversations((prevList) => ({
|
||||
...prevList,
|
||||
[customerId]: [...(prevList[customerId] || []), message],
|
||||
}));
|
||||
};
|
||||
|
||||
const addMessage = (message) => {
|
||||
setMessages((prevMessages) => [...prevMessages, message]);
|
||||
};
|
||||
|
||||
const handleMessage = (data) => {
|
||||
const msg = data.result;
|
||||
if (!msg) {
|
||||
return false;
|
||||
}
|
||||
if (typeof msg.type === 'string' && msg.type === 'error') {
|
||||
addError('Error Connecting to Server');
|
||||
}
|
||||
addMessage({ ...msg.message, sender: 'other', id: Date.now().toString(16) });
|
||||
};
|
||||
|
||||
const sendMessage = (msg) => {
|
||||
const msgObj = {
|
||||
type: 'message',
|
||||
message: msg,
|
||||
};
|
||||
realtimeAPI.sendMessage(msgObj);
|
||||
addMessage(msgObj.message);
|
||||
// debug:
|
||||
// const msgObjR = {
|
||||
// type: 'message',
|
||||
// message: { type: 'text', text: { body: 'Received: ' + msg.text.body,} },
|
||||
// };
|
||||
// addMessage({ ...msgObjR.message, sender: 'other', id: Date.now().toString(16) });
|
||||
};
|
||||
|
||||
realtimeAPI.onError(addError.bind(null, 'Error'));
|
||||
realtimeAPI.onMessage(handleMessage);
|
||||
realtimeAPI.onCompletion(addError.bind(null, 'Not Connected to Server'));
|
||||
realtimeAPI.keepAlive(); // Ping Server
|
||||
|
||||
return { errors, messages, conversationsList, currentConversation, sendMessage, fetchConversations, switchConversation };
|
||||
}
|
||||
|
||||
export const useConversationContext = () => useContext(ConversationContext);
|
||||
|
||||
@ -1,53 +0,0 @@
|
||||
import React, { createContext, useContext, useState } from 'react';
|
||||
import { ConversationContext } from '@/stores/ConversationContext';
|
||||
import { RealTimeAPI } from '@/lib/realTimeAPI';
|
||||
|
||||
const URL = 'ws://202.103.68.144:8888/whatever/';
|
||||
// let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'aaa' });
|
||||
let realtimeAPI = new RealTimeAPI({ url: URL, protocol: 'WhatsApp' });
|
||||
|
||||
export const ConversationProvider = ({ children }) => {
|
||||
const [errors, setErrors] = useState([]);
|
||||
const [messages, setMessages] = useState([]);
|
||||
|
||||
const addError = (reason) => {
|
||||
setErrors(prevErrors => [...prevErrors, { reason }]);
|
||||
}
|
||||
|
||||
const addMessage = (message) => {
|
||||
setMessages(prevMessages => [...prevMessages, message]);
|
||||
}
|
||||
|
||||
const handleMessage = (data) => {
|
||||
const msg = data.result;
|
||||
if (!msg) {
|
||||
return false;
|
||||
}
|
||||
if (typeof msg.type === 'string' && msg.type === 'error') {
|
||||
addError('Error Connecting to Server');
|
||||
}
|
||||
addMessage({ ...msg.message, sender: 'other', id: Date.now().toString(16) });
|
||||
}
|
||||
|
||||
const sendMessage = (msg) => {
|
||||
const msgObj = {
|
||||
type: 'message',
|
||||
message: msg,
|
||||
};
|
||||
realtimeAPI.sendMessage(msgObj);
|
||||
addMessage(msgObj.message);
|
||||
}
|
||||
|
||||
realtimeAPI.onError(addError.bind(null, 'Error'));
|
||||
realtimeAPI.onMessage(handleMessage);
|
||||
realtimeAPI.onCompletion(addError.bind(null, 'Not Connected to Server'));
|
||||
realtimeAPI.keepAlive(); // Ping Server
|
||||
|
||||
return (
|
||||
<ConversationContext.Provider value={{ errors, messages, sendMessage }}>
|
||||
{children}
|
||||
</ConversationContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConversationProvider;
|
||||
@ -0,0 +1,9 @@
|
||||
import { ConversationContext, useConversations } from '@/stores/ConversationContext';
|
||||
|
||||
export const ConversationProvider = ({ children }) => {
|
||||
|
||||
const conversations = useConversations();
|
||||
return <ConversationContext.Provider value={conversations}>{children}</ConversationContext.Provider>;
|
||||
};
|
||||
|
||||
export default ConversationProvider;
|
||||
Loading…
Reference in New Issue