liuchang/fe_service_ebtp_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端增加websocket断连判断

Browse Source
This commit is contained in:
unknown
2022-05-10 16:00:41 +08:00
parent 99a9d63d72
commit 5884ac7299
5 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/customerservice/support/conversation/components/ChatInput/ChatInput.jsx
View File

@ -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)
}
})

4
src/pages/customerservice/support/conversation/components/ChatRecordList/ChatRecordList.jsx
View File

@ -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>
)

6
src/pages/customerservice/support/conversation/components/MsgBubble/MsgBubble.jsx
View File

@ -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 }} />

4
src/pages/customerservice/support/conversation/components/MsgItem/MsgItem.jsx
View File

@ -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>
)

50
src/pages/customerservice/support/conversation/index.jsx
View File

@ -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()
}, [isModalVisible])
if(!show && isModalVisible && !isCloseWs && wsObj==null) {
//校验并创建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,