去掉全局变量

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) => {
+    addEventListener('click', emojiFn)
-      if (e.target.getAttribute('datatype') === 'emoji') {
+    return () => {
-        switchEmojiModal(true)
+      removeEventListener('click',emojiFn)
-      } else {
+    }
-        switchEmojiModal(false)
-      }
-    })
   }, [])
-
+  
   return (
     <div className={style.customer_service_content}>
       <div

src/pages/customerservice/support/conversation/constants.js

@@ -0,0 +1,31 @@
+//保存websocket对象
+export const CUSTOMERSERVICE_WEBSOCKET = []
+//消息提醒计时器
+export const CUSTOMERSERVICE_messageAlert = {
+    timeout: null,
+    oldTitle:'招投标系统',
+    time: 0,
+    num: 0,
+    showMessage(msg){
+        CUSTOMERSERVICE_messageAlert.num++;
+        if(CUSTOMERSERVICE_messageAlert.num==1){
+            CUSTOMERSERVICE_messageAlert.timeout = setInterval(function(){
+                CUSTOMERSERVICE_messageAlert.time ++;
+                let title = '';
+                if(CUSTOMERSERVICE_messageAlert.time % 2 === 0){
+                    title = '[　　　]我的咨询';
+                }else{
+                    title =  '['+msg+']我的咨询';
+                }
+            document.getElementsByTagName('title')[0].innerText = title;
+        },500);
+        }
+        
+
+    },
+    stopMessage(){
+        document.getElementsByTagName('title')[0].innerText = CUSTOMERSERVICE_messageAlert.oldTitle;
+        CUSTOMERSERVICE_messageAlert.num = 0;
+        clearInterval(CUSTOMERSERVICE_messageAlert.timeout);
+    }
+}

src/pages/customerservice/support/conversation/index.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react'
-import  Chat  from './components/Chat/Chat'
+import Chat  from './components/Chat/Chat'
 import ImgPreview  from './components/ImgPreview/ImgPreview'
 import SeactList  from './components/SeactList'
 import {entitiestoUtf16, handleElement, doEncrypt } from './utils/utils'
@@ -7,40 +7,15 @@ import user from '@/assets/img/cs_user.png'
 import client from '@/assets/img/cs_client.png'
 import { customerserviceAPI as API} from '@/services/customerservice';
 import { message, Modal, Table, Button, Popconfirm  } from 'antd';
-import { delCategory } from '@/pages/Bid/ReviewConfig/Config/components/service'
-import { connect } from 'dva'
-import { disconnect } from 'echarts'
 import { history } from 'umi' 
+import {CUSTOMERSERVICE_WEBSOCKET, CUSTOMERSERVICE_messageAlert} from './constants'
 
-//未读消息提醒
+//网页刷新时，清空sessionStorage
-window.messageAlert = {
+window.onbeforeunload = function(){
-  timeout: null,
+  sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal')
-  oldTitle:'招投标系统',
+  sessionStorage.removeItem('CUSTOMERSERVICE_msgFlash')
-  time: 0,
+}
-  num: 0,
-  showMessage(msg){
-    window.messageAlert.num++;
-    if(window.messageAlert.num==1){
-      window.messageAlert.timeout = setInterval(function(){
-        window.messageAlert.time ++;
-        let title = '';
-        if(messageAlert.time % 2 === 0){
-            title = '[　　　]我的咨询';
-        }else{
-            title =  '['+msg+']我的咨询';
-        }
-        document.getElementsByTagName('title')[0].innerText = title;
-      },500);
-    }
-     
 
-  },
-  stopMessage(){
-      document.getElementsByTagName('title')[0].innerText  = window.messageAlert.oldTitle;
-      window.messageAlert.num = 0;
-      clearInterval(window.messageAlert.timeout);
-  }
-};
 const conversation = (props) => {
     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
+    sessionStorage.setItem('CUSTOMERSERVICE_isBlur', isHidden? 1: 0)
-    if(!isHidden && (window.isConversationURLChanged==undefined || !window.isConversationURLChanged)){
+    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(CUSTOMERSERVICE_WEBSOCKET && CUSTOMERSERVICE_WEBSOCKET.length>0){
-      if(window.webSocketForCustomerService!=undefined){
         //别的路由切过来，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){//路由变化
+      if(sessionStorage.getItem('CUSTOMERSERVICE_isConversationURLChanged')==1){//路由变化
-        window.msgAlertForCustomerService = true
+        sessionStorage.setItem('CUSTOMERSERVICE_msgFlash',1)
         showMsg()
       }else {
-        if(window.isBlurForCustomerService){//失焦
+        if(sessionStorage.getItem('CUSTOMERSERVICE_isBlur')==1){//失焦
-          window.msgAlertForCustomerService = true
+          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){
+    sessionStorage.setItem("CUSTOMERSERVICE_isConversationURLChanged", isChanged? 1: 0)
-      window.isConversationURLChanged = isChanged
-    }else{
-      if(window.isConversationURLChanged != undefined){ //路由切换回来
-        window.isConversationURLChanged = isChanged
-      }
-    }
   })
-  if(window.msgAlertForCustomerService){
+  if(sessionStorage.getItem('CUSTOMERSERVICE_msgFlash')==1){
     msgAlert && msgAlert()  //侧边栏提醒
   }
 },[])
 useEffect(()=>{
   if(!isCloseWs){
-    if(window.isCloseChatUIModal==undefined){
+    sessionStorage.setItem("CUSTOMERSERVICE_isCloseChatUIModal", 0)
-      window.isCloseChatUIModal = isCloseWs  //false
-    }
   }
 },[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"
 
-    //清空全局变量
+    //清空alert
-    if(window.isConversationURLChanged!=undefined) delete window.isConversationURLChanged
+    sessionStorage.removeItem('CUSTOMERSERVICE_msgFlash');
-    if(window.msgAlertForCustomerService!=undefined) delete window.msgAlertForCustomerService
     //校验登录
     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
+            sessionStorage.removeItem('CUSTOMERSERVICE_isCloseChatUIModal')
-            let ws = window.webSocketForCustomerService
+            let ws = CUSTOMERSERVICE_WEBSOCKET.pop()
             ws && ws.close()
             closeWin && closeWin()
           }}