diff --git a/src/pages/customerservice/support/conversation/components/EmojiPopover/EmojiPopover.jsx b/src/pages/customerservice/support/conversation/components/EmojiPopover/EmojiPopover.jsx index 7d96983..a5898e8 100644 --- a/src/pages/customerservice/support/conversation/components/EmojiPopover/EmojiPopover.jsx +++ b/src/pages/customerservice/support/conversation/components/EmojiPopover/EmojiPopover.jsx @@ -3,94 +3,6 @@ import PropTypes from 'prop-types' import style from './style.module.css' import { cns } from '../../utils/toClass' -// const emojiList = [ -// '😀', -// '😃', -// '😄', -// '😁', -// '😆', -// '😅', -// '😂', -// '🤣', -// '😊', -// '😇', -// '🙂', -// '🙃', -// '😉', -// '😌', -// '😍', -// '🥰', -// '😘', -// '😗', -// '😙', -// '😚', -// '😋', -// '😛', -// '😝', -// '😜', -// '🤪', -// '🤨', -// '🧐', -// '🤓', -// '😎', -// '🤩', -// '🥳', -// '😏', -// '😒', -// '😞', -// '😔', -// '😟', -// '😕', -// '🙁', -// '😣', -// '😖', -// '😫', -// '😩', -// '🥺', -// '😢', -// '😭', -// '😤', -// '😠', -// '😡', -// '🤬', -// '🤯', -// '😳', -// '🥵', -// '🥶', -// '😱', -// '😨', -// '😰', -// '😥', -// '😓', -// '🤗', -// '🤔', -// '🤭', -// '🤫', -// '🤥', -// '😶', -// '😐', -// '😑', -// '😬', -// '🙄', -// '😯', -// '😦', -// '😧', -// '😮', -// '😲', -// '🥱', -// '😴', -// '🤤', -// '😪', -// '😵', -// '🤐', -// '🥴', -// '🤢', -// '🤮', -// '🤧', -// '😷', -// '🤒', -// '🤕', -// ] const emojiList = [ '😃', '😄', @@ -132,17 +44,20 @@ export default function EmojiPopover(props) { const iconClickHandle = (emoji) => { onSelect(emoji) } - + const emojiFn = (e)=>{ + if (e.target.getAttribute('datatype') === 'emoji') { + switchEmojiModal(true) + } else { + switchEmojiModal(false) + } + } useEffect(() => { - addEventListener('click', (e) => { - if (e.target.getAttribute('datatype') === 'emoji') { - switchEmojiModal(true) - } else { - switchEmojiModal(false) - } - }) + addEventListener('click', emojiFn) + return () => { + removeEventListener('click',emojiFn) + } }, []) - + return (
{ const [msgList, setMsgList] = useState([]) const [scrollToBottom, setScrollToBottom] = useState(true) @@ -84,11 +59,12 @@ const conversation = (props) => { document.addEventListener('visibilitychange',()=>{ //监听网页是否失焦 var isHidden = document.hidden - window.isBlurForCustomerService = isHidden - if(!isHidden && (window.isConversationURLChanged==undefined || !window.isConversationURLChanged)){ + sessionStorage.setItem('CUSTOMERSERVICE_isBlur', isHidden? 1: 0) + if(!isHidden && sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged')==0){ stopMsg() } }) + //项目信息 const onChange = () => { setShowLoading(true) @@ -264,20 +240,14 @@ const disconnectedAlert = () =>{ } //检验连接websocket const checkDisconnected = ()=>{ - if(window.isCloseChatUIModal!=undefined){ //弹窗没有关闭(弹窗开着或者隐藏,ws不应该断) + if(sessionStorage.getItem('CUSTOMERSERVICE_isCloseChatUIModal')==0){ //弹窗没有关闭(弹窗开着或者隐藏,ws不应该断) console.log('websocket断开,重新连接') - console.log(window.isModalVisibleForCustomerService) setConversationId('') - if(window.isModalVisibleForCustomerService){ //断连后,用户打开弹窗再发提醒 + if(sessionStorage.getItem('CUSTOMERSERVICE_isModalVisible')==1){ //断连后,用户打开弹窗再发提醒 disconnectedAlert() } }else{ - setConversationId('') setMsgPage(0) - if(window.webSocketForCustomerService!=undefined) delete window.webSocketForCustomerService //释放websocket对象 - if(window.isModalVisibleForCustomerService!=undefined) delete window.isModalVisibleForCustomerService - if(window.isConversationURLChanged!=undefined) delete window.isConversationURLChanged - if(window.msgAlertForCustomerService!=undefined) delete window.msgAlertForCustomerService } } @@ -292,17 +262,16 @@ const getToken = ()=>{ setLoading(true) getMoreMessage(1) }else{ - console.log(window.webSocketForCustomerService) - if(window.webSocketForCustomerService!=undefined){ + if(CUSTOMERSERVICE_WEBSOCKET && CUSTOMERSERVICE_WEBSOCKET.length>0){ //别的路由切过来,ws没断,重新监听 console.log('ws没断,重新监听') setShow(true) - monitorWebSocket(window.webSocketForCustomerService) + monitorWebSocket(CUSTOMERSERVICE_WEBSOCKET[0]) setLoading(true) getMoreMessage(1) }else{ closeWin && closeWin() - delete window.isCloseChatUIModal + sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal') message.warn(res && '您已在别的终端建立会话') } } @@ -314,19 +283,19 @@ const monitorWebSocket = (ws)=>{ ws.onopen = function () { console.log("Connection open ..."); //记录ws - window.webSocketForCustomerService = ws + CUSTOMERSERVICE_WEBSOCKET.push(ws) setShow(true) //连接建立后,才可以显示弹窗、收发消息 } // 接收服务端数据时触发事件 ws.onmessage = function (res) { if(res.data){ let data = JSON.parse(res.data) - if(window.isConversationURLChanged){//路由变化 - window.msgAlertForCustomerService = true + if(sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged')==1){//路由变化 + sessionStorage.setItem('CUSTOMERSERVICE_msgFlash',1) showMsg() }else { - if(window.isBlurForCustomerService){//失焦 - window.msgAlertForCustomerService = true + if(sessionStorage.getItem('CUSTOMERSERVICE_isBlur')==1){//失焦 + sessionStorage.setItem('CUSTOMERSERVICE_msgFlash',1) showMsg() } setWsMsg(data) @@ -337,6 +306,8 @@ const monitorWebSocket = (ws)=>{ // 断开 web socket 连接成功触发事件 ws.onclose = function () { console.log("连接已关闭..."); + if(CUSTOMERSERVICE_WEBSOCKET && CUSTOMERSERVICE_WEBSOCKET.length>0) + CUSTOMERSERVICE_WEBSOCKET.splice(0,CUSTOMERSERVICE_WEBSOCKET.length); checkDisconnected() }; } @@ -350,38 +321,31 @@ const websocketInit = (id)=>{ //消息闪烁提醒 const showMsg = ()=>{ - messageAlert.showMessage('新消息'); + CUSTOMERSERVICE_messageAlert.showMessage('新消息'); } - +//取消消息闪烁提醒 const stopMsg = ()=>{ - messageAlert.stopMessage('新消息'); + CUSTOMERSERVICE_messageAlert.stopMessage('新消息'); } useEffect(()=>{ history.listen(location => { // 最新路由的 location 对象,可以通过比较 pathname 是否相同来判断路由的变化情况 let isChanged = location.pathname.indexOf('/Dashboard')==-1 - if(isChanged){ - window.isConversationURLChanged = isChanged - }else{ - if(window.isConversationURLChanged != undefined){ //路由切换回来 - window.isConversationURLChanged = isChanged - } - } + sessionStorage.setItem("CUSTOMERSERVICE_isConversationURLChanged", isChanged? 1: 0) }) - if(window.msgAlertForCustomerService){ + if(sessionStorage.getItem('CUSTOMERSERVICE_msgFlash')==1){ msgAlert && msgAlert() //侧边栏提醒 } },[]) useEffect(()=>{ if(!isCloseWs){ - if(window.isCloseChatUIModal==undefined){ - window.isCloseChatUIModal = isCloseWs //false - } + sessionStorage.setItem("CUSTOMERSERVICE_isCloseChatUIModal", 0) } },[isCloseWs]) + useEffect(() => { - window.isModalVisibleForCustomerService = isModalVisible + sessionStorage.setItem("CUSTOMERSERVICE_isModalVisible", isModalVisible? 1: 0) if(isModalVisible){ stopMsg() //登录人的信息的关键字 顺序是固定的。 @@ -400,9 +364,8 @@ useEffect(() => { record.style.height = listHeight + "px" chatInput.style.height = textHeight + "px" - //清空全局变量 - if(window.isConversationURLChanged!=undefined) delete window.isConversationURLChanged - if(window.msgAlertForCustomerService!=undefined) delete window.msgAlertForCustomerService + //清空alert + sessionStorage.removeItem('CUSTOMERSERVICE_msgFlash'); //校验登录 getToken() }else{ @@ -422,7 +385,7 @@ useEffect(() => { useEffect(() => { //实时渲染消息 - if((!window.isConversationURLChanged || window.isConversationURLChanged== undefined) && wsMsg && wsMsg.clientNo!=undefined){ + if(sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged') == 0 && wsMsg && wsMsg.clientNo!=undefined){ if(isModalVisible){ //弹窗开着才渲染 onMsgRender() }else{ @@ -483,8 +446,8 @@ useEffect(() => { setIsRateModalVisible(true) } setShow(false) - delete window.isCloseChatUIModal - let ws = window.webSocketForCustomerService + sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal') + let ws = CUSTOMERSERVICE_WEBSOCKET.pop() ws && ws.close() closeWin && closeWin() }}