前端增加websocket断连判断

src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx

@@ -206,7 +206,8 @@ const ChatInput = ((props) => {
     }
     API.sendToCs(params).then(res => {
       if (res && !res.data) {
-        console.log(res && res.message)
+      }else{
+        message.warn(res && res.message)
       }
   
     })

src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx

@@ -4,7 +4,7 @@ import MsgItem from '../MsgItem/MsgItem'
 import PropTypes  from 'prop-types';
 
 const ChatRecordList = (props) => {
-  let { data, me, showPic} = props
+  let { data, me, showPic, reConnect} = props
   return (
     <div className={style.customer_service_content_list_area}>
       {/*
@@ -15,7 +15,7 @@ const ChatRecordList = (props) => {
       </div>
       */}
       {data.map((bubble) => (
-        <MsgItem me={me} showPic={showPic} data={bubble} key={bubble._id} />
+        <MsgItem me={me} showPic={showPic} reConnect={reConnect} data={bubble} key={bubble._id} />
       ))}
     </div>
   )

src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx

@@ -8,7 +8,7 @@ import { message, Tooltip } from "antd";
 //import { downloadFile } from "@utils/utils";
 
 export default function MsgBubble(props) {
-  const { data, isMe, showPic} = props
+  const { data, isMe, showPic, reConnect} = props
 
   const onDownload = (fileId) => {
     API.getSecretKey({fileId: fileId}).then(res => {
@@ -43,6 +43,10 @@ export default function MsgBubble(props) {
   }
   const renderContent = (message) => {
     switch (message.type) {
+      case 'dom':
+        return(
+          <div>您的连接已超时，请<a href='#' onClick={reConnect}>点击这里</a>重新连接</div>
+        )
       case 'text':
         return(
         <div onDragOver={(e)=>{e.preventDefault()}} dangerouslySetInnerHTML={{ __html: message.content }} />

src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx

@@ -7,7 +7,7 @@ import moment from 'moment';
 
 
 export default function MsgItem(props) {
-  const { data, me ,showPic } = props
+  const { data, me ,showPic, reConnect } = props
   const isMe = data.user.id === me.id
 
   const  isValidDate= (date)=>{
@@ -31,7 +31,7 @@ export default function MsgItem(props) {
             {isValidDate(new Date(data.date))?moment(data.date).format('MM-DD HH:mm:ss'):data.date}
           </span>
         </div>
-        {<MsgBubble isMe={isMe} data={data.message} showPic={showPic}/>}
+        {<MsgBubble isMe={isMe} data={data.message} showPic={showPic} reConnect={reConnect}/>}
       </div>
     </div>
   )

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

@@ -8,6 +8,8 @@ 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'
 
 const conversation = (props) => {
     const [msgList, setMsgList] = useState([])
@@ -26,7 +28,7 @@ const conversation = (props) => {
     const [isSend, setIsSend] = useState(false)
     const [sendMsg, setSendMsg] = useState([])
     const [agentNumber, setAgentNumber] = useState('')
-    //const [angle, setAngle] = useState(0)
+    const [serverNo, setServerNo] = useState('')
     const [pagination, setPagination] = useState({
       showQuickJumper: true,
       showSizeChanger: false,
@@ -48,7 +50,7 @@ const conversation = (props) => {
     let serverAvatar = user
     let data = wsMsg
     if(data &&  data.clientNo!=undefined){
-      console.log('监听渲染')
+      setServerNo(data.serverNo) //保存客服编码
       let type = data.contentType==1?'text':data.contentType==2?'image':data.contentType==3?'file':'text'
       let content={}
       setConversationId(data.conversationId)
@@ -90,6 +92,20 @@ const conversation = (props) => {
       setMsgList([...msgList, msgData])
       msgAlert && msgAlert()
     }
+  }
+  const connect = () =>{
+    let serverAvatar = user
+    const msg = {
+    _id: Math.floor(Math.random() * 1000)+new Date(),
+    date: new Date(),
+    user: {
+      id: serverNo,
+      avatar: serverAvatar,
+      name: '供应链客服',
+    },
+    message: { type: 'dom', content: '' },
+    }
+    setMsgList([...msgList, msg])
   }
     /*websocket*/
   const websocketInit = (id)=>{
@@ -102,7 +118,7 @@ const conversation = (props) => {
       console.log("Connection open ..."); 
       //记录ws
       setShow(true)  //连接建立后，才可以显示弹窗、收发消息
-      if(sendMsg && sendMsg.length>0) setIsSend(true) //连接建立后，sendMsg有值才可以发及时消息
+      if(sendMsg && sendMsg.length>0) setIsSend(true) //连接建立后，sendMsg有值才可以发即时消息（用户不点击发送，打开窗口即发送）
       setWsObj(ws)
     };
 
@@ -110,8 +126,6 @@ const conversation = (props) => {
     ws.onmessage = function (res) {
       if(res.data){
         let data = JSON.parse(res.data)
-        console.log('onmessage')
-        console.log(data)
         setWsMsg(data)
       }
   };
@@ -181,11 +195,20 @@ const getProject = (params)=>{
       record.style.height = listHeight + "px"
       chatInput.style.height = textHeight + "px"
     }else{
-      if(isCloseWs) setMsgList([])
+      if(isCloseWs) {
+        setMsgList([])
+      }
     }
     //获取当前用户token
-    if(isModalVisible && !isCloseWs && wsObj==null) getToken()
+    if(!show && isModalVisible && !isCloseWs && wsObj==null) {
-  }, [isModalVisible])
+      //校验并创建websocket
+      console.log('创建websocket')
+      getToken()
+    }else if(show && isModalVisible && !isCloseWs && wsObj==null){ //websocket已经创建过了
+      console.log('websocket断开，重新连接')
+      connect()
+    }
+  }, [isModalVisible, wsObj])
 
   useEffect(() => {
     if(projectModal && supplierNumber!='EMPTY'){
@@ -199,21 +222,13 @@ const getProject = (params)=>{
   }, [projectModal])
 
   useEffect(() => {
-    //关闭弹窗，清空消息列表
+    //主动关闭弹窗，清空消息列表
     if(isCloseWs && wsObj!=null) {
       setShow(false)
       wsObj.close()
     }
   }, [isCloseWs])
 
-  useEffect(() => {
-    //关闭弹窗，断开ws连接
-    //防止ws还没open，就关闭弹窗了。加一次判断：建立好连接后，只要弹窗已关闭，就断开。
-    if(isCloseWs && wsObj!=null) {
-       wsObj.close()
-    }
-  }, [wsObj])
-
   useEffect(() => {
     //onmessage时，触发，必须放到useEffect，直接写到onmessage里不渲染
     if(wsMsg && wsMsg.clientNo!=undefined) onMsgRender()
@@ -294,6 +309,7 @@ const getProject = (params)=>{
             setImageParams(imageParams)
             setIsImgPreviewVisible(true)
           }}
+          reConnect={()=>websocketInit(staffId)}
           style={{
             width: wid,
             height: hei,