bug: fix chat

src/app.js

@@ -26,10 +26,10 @@ import {
 } from '@constants/user'
 import ready from '@utils/ready'
 import login from '@utils/login'
-import configStore from './store'
+import store  from './store'
 import socket from '@utils/im'
 
-const store = configStore()
+// const store = configStore()
 
 class App extends Component {
   config = {

src/pages/im/index.js

@@ -18,8 +18,9 @@ import { dispatchCardInfo } from '@actions/card'
 // import { dispatchUserPhone } from '@actions/user'
 import getUserPhone from '@utils/getUserPhone'
 
-import socket from '@utils/im'
+import socket, { MESSAGETYPE } from '@utils/im'
 import ready from '@utils/ready'
+import store from '../../store'
 
 @connect(state => (
   { ...state.card, ...state.user, ...state.login }),
@@ -33,8 +34,7 @@ export default class Chat extends Component {
   state = {
     msgList: [],
     inputText: '',
-    imageFile: '',
-    messageType: 'text',
+    messageType: MESSAGETYPE.TEXT,
     // chatInputHeight: 120,
     marginTop: 0,
     visExtra: false,
@@ -52,10 +52,9 @@ export default class Chat extends Component {
     prompts: ['现在在售的户型有哪些？', '现在项目均价多少钱一平？', '项目周边的配套有哪些？', '未来周边规划的配套有哪些？'],
     recordId: null,
 
-    sendPersonId: null,
-    sendPersonName: null,
-    receivePersonId: null,
-    receivePersonName: null
+    noChatting: false,  // 异常
+    chatting: null, // 当前聊天对象
+    me: null, // 自己
   }
 
   originList = []
@@ -76,43 +75,62 @@ export default class Chat extends Component {
   componentDidMount() {
     ready.queue(() => {
       const { sendId, sendName, receiverId, receiverName } = this.$router.params
-      const { scene } = Taro.getStorageSync('router')
-
-
-      /**
-       * 当 scene ==1014 时，是从服务消息直接进入聊天页面，
-       * 则id为 sendId,反之是为receiverId
-       */
-      const fromTempleteMsg = scene == 1014
-      let sendPersonId = fromTempleteMsg ? receiverId : sendId
-      let sendPersonName = fromTempleteMsg ? receiverName : sendName
-      let receivePersonId = fromTempleteMsg ? sendPersonId : receiverId
-      let receivePersonName = fromTempleteMsg ? sendName : receiverName
-
-      // debugger
-      // if (!receivePersonId) {
-      //   Taro.showToast({ title: 'receivePersonId不存在' })
-      //   this.redirectTo()
-      //   return
-      // }
-
-      // if (receivePersonId === personId) {
-      //   Taro.showToast({ title: '你不能自己跟自己聊天~' })
-      //   this.redirectTo()
-      //   return
-      // }
-
-      Taro.setNavigationBarTitle({
-        title: decodeURIComponent(receivePersonName) || '聊天'
-      })
+      const me = this.props.userInfo.person
+      const { personId: mineId } = me
+            
+      // 系统异常
+      if (!sendId || !receiverId) {
+        Taro.showToast({
+          title: '无聊天对象, 请退出重试',
+          icon: 'none',
+          duration: 5000
+        })
+
+        this.setState({ noChatting: true })
+        return;
+      }
+
+      // 自己跟自己聊
+      if (sendId === mineId && receiverId === mineId) {
+        Taro.showToast({
+          title: '暂不支持自我聊天',
+          icon: 'none',
+          duration: 5000
+        })
+
+        this.setState({ noChatting: true })
+        return;
+      }
+
+      // 非当前人员页面
+      if (sendId != mineId && receiverId != mineId) {
+        Taro.showToast({
+          title: '数据获取错误, 请退出重试',
+          icon: 'none',
+          duration: 5000
+        })
+
+        this.setState({ noChatting: true })
+        return;
+      }
 
-      this.setState({ sendPersonId, sendPersonName, receivePersonId, receivePersonName }, () => {
+      const chatting = {
+        personId: sendId === mineId ? receiverId : sendId,
+        nickname: sendId === mineId ? decodeURIComponent(receiverName) : decodeURIComponent(sendName),
+        avatarurl: null,
+        personType: null,
+      }
+
+      // 设置页面 title
+      Taro.setNavigationBarTitle({ title: chatting.nickname || '聊天' })
+
+      this.setState({ chatting, me }, () => {
         this.loadList(res => {
           this.toBottom()
 
           const { records } = res
           const newMsg = records[0]
-          const isCardMsg = newMsg && newMsg.messageType === 'card'
+          const isCardMsg = newMsg && newMsg.messageType === MESSAGETYPE.CARD
 
           // 如果最新一条消息不是卡片类型 则自动发送卡片信息
           if (!isCardMsg) {
@@ -123,45 +141,61 @@ export default class Chat extends Component {
         });
       });
 
-      socket.wss.onMessage(res => {
+      socket.wss.onMessage(res => {    
         const data = JSON.parse(res.data)
-        // debugger
-        this.handlerRecive(data)
+
+        console.log('receive message ==>', data)
+
+        if (data.sendPerson != chatting.personId) {
+          // store.dispatch({ type: INCREASE_UNREADNUM })
+        } else {
+          this.handlerRecive(data)
+        }
       })
     })
   }
 
-  sendCardMsg() {
-    // const { userInfo: { person: { personId, personType } } } = this.props
-    // const isConsultant = (personType === ROLE_CODE['CONSULTANT'])
-    // const { receivePerson } = this.state
-    // const cardId = isConsultant ? personId : receivePerson
-    const { userInfo: { person: { personType: sendPersonType } } } = this.props
-    const { receivePersonId, receivePersonName, sendPersonId } = this.state
-    this.props.dispatchCardInfo(receivePersonId).then(res => {
-      // debugger
-      // 本人不是置业顾问且对方是置业顾问 则对方向我发送消息
-      const { personType: receivePersonType } = res
-      const hasSend = (sendPersonType != ROLE_CODE['CONSULTANT'] && receivePersonType == ROLE_CODE['CONSULTANT'])
-      if (hasSend) {
-        let payload = {
-          sendPerson: receivePersonId,
-          receivePerson: sendPersonId,
-          message: `您好，我是${receivePersonName},有什么可以帮助您的吗?您可以在这里跟我实时沟通哦~`,
-          messageType: 'card',
-          createDate: new Date().valueOf(),
-        }
-        // 发送消息
-        socket.sendNotice(payload)
-      }
+  componentWillUnmount() {
+    // socket.closeSocket()
+    const { recordId } = this.state
+    recordId && updatePoint(recordId)
+  }
+
+  sendCardMsg = () => {
+    const { me, chatting } = this.state
+
+    // 本人是置业顾问, 不做卡片发送操作
+    if (me.personType === ROLE_CODE['CONSULTANT']) {
+      return;
+    }
+
+    // 本人不是置业, 对方必然是置业
+    this.props.dispatchCardInfo(chatting.personId).then(res => {
+      const chattingName = res.name || chatting.nickname
+
+      // 发送 卡片 消息
+      socket.sendNotice({
+        sendPerson: chatting.personId,
+        receivePerson: me.personId,
+        message: `您好，我是${chattingName},有什么可以帮助您的吗?您可以在这里跟我实时沟通哦~`,
+        messageType: MESSAGETYPE.CARD,
+        createDate: new Date().valueOf(),
+      }, res => {
+        console.log('发送成功')
+        this.appendData(payload)
+      })
+
+      this.setState({
+        nickname: chattingName,
+        avatarurl: res.picture || res.avatar,
+        personType: res.personType,
+      })
     })
   }
 
   getPhoneNumber = (e) => {
-    const { userInfo: { person: { phone, sendPersonId, receivePersonId } } } = this.props
-    // const { receivePerson } = this.state
     getUserPhone(e, (phoneNumber) => {
-      const selfPhone = phone || phoneNumber
+      const selfPhone = tel || phone || phoneNumber
       if (!selfPhone) {
         Taro.showToast({
           icon: 'none',
@@ -170,23 +204,11 @@ export default class Chat extends Component {
         return
       }
 
-      let payload = {
-        sendPerson: sendPersonId,
-        receivePerson: receivePersonId,
-        message: `我的手机号是${selfPhone}，请来电联系我哦~`,
-        messageType: 'text',
-        createDate: new Date().valueOf()
-      }
-
-      // 发送消息
-      socket.sendNotice(payload, res => {
-        console.log('发送成功')
-        this.appendData(payload)
-      })
+      this.sendMessage(`我的手机号是${selfPhone}，请来电联系我哦~`)
     })
   }
 
-  redirectTo() {
+  redirectTo = () => {
     const length = getCurrentPages().length
     setTimeout(() => {
       if (length > 1) {
@@ -197,42 +219,16 @@ export default class Chat extends Component {
     }, 500)
   }
 
-  componentWillUnmount() {
-    // socket.closeSocket()
-    const { recordId } = this.state
-    recordId && updatePoint(recordId)
-  }
-  // createSocket() {
-  //   const { userInfo: { person: { personId } } } = this.props
-  //   socket.createSocket({
-  //     id: personId,
-  //     success: (res) => {
-  //       console.log('success', res)
-  //     },
-  //     close: (res) => {
-  //       console.log('close', res)
-  //     },
-  //     receive: (res) => {
-  //       console.log('receive', res)
-  //       let data = JSON.parse(res.data)
-  //       this.handlerRecive(data)
-  //     },
-  //     fail: (res) => {
-  //       console.log('fail', res)
-  //     }
-  //   })
-  // }
-
-  handlerRecive(data) {
+  handlerRecive = (data) => {
     // debugger
     this.appendData(data)
   }
 
-  loadList(cb) {
+  loadList = (cb) => {
     if (this.loading) return
     this.loading = true
-    const { pagination, receivePersonId } = this.state
-    const payload = Object.assign(pagination, { chatWith: receivePersonId })
+    const { pagination, chatting } = this.state
+    const payload = Object.assign(pagination, { chatWith: chatting.personId })
 
     Taro.showLoading({ title: '正在加载' })
     queryChatHistory(payload).then(res => {
@@ -265,7 +261,7 @@ export default class Chat extends Component {
     })
   }
 
-  formatData(data) {
+  formatData = (data) => {
     let _map = {}
     let _rows = deepClone(data)
     let _time = null
@@ -308,7 +304,7 @@ export default class Chat extends Component {
     return newArr.reverse()
   }
 
-  dealChatData(data, type) {
+  dealChatData = (data, type) => {
     let list = null
     if (type == 'new') {
       list = [...(data || []), ...this.originList]
@@ -331,8 +327,7 @@ export default class Chat extends Component {
     }).exec()
   }
 
-  bindAlbumClick(e) {
-    debugger
+  bindAlbumClick = (e) => {
     e.stopPropagation()
     Taro.chooseImage({
       count: 1,
@@ -340,54 +335,35 @@ export default class Chat extends Component {
       sourceType: ['album', 'camera'],
       success: res => {
         uploadFiles(res.tempFilePaths).then(data => {
+          this.sendMessage(data[0], MESSAGETYPE.IMAGE)
+
           this.setState({
             marginTop: 0,
-            messageType: 'image',
             visExtra: false,
-            imageFile: data[0]
-          }, this.onSendMsg)
+          })
         })
       }
     })
   }
 
-  onSendMsg() {
-    const { inputText, imageFile, messageType, sendPersonId, receivePersonId } = this.state
+  sendMessage = (message, messageType = MESSAGETYPE.TEXT) => {
+    const { me, chatting } = this.state
 
-    if (!inputText && !imageFile) return
-
-    let message = ''
-    if (messageType === 'text') {
-      message = inputText
-    } else if (messageType === 'image') {
-      message = imageFile
-    }
-
-    let payload = {
-      sendPerson: sendPersonId,
-      receivePerson: receivePersonId,
+    const payload = {
+      sendPerson: me.personId,
+      receivePerson: chatting.personId,
       message,
       messageType,
       createDate: new Date().valueOf(),
     }
 
-    payload.chatId = payload.createDate
-
-    // 发送消息
     socket.sendNotice(payload, res => {
       console.log('发送成功')
-
       this.appendData(payload)
-      // this.setState({
-      //   inputText: '',
-      //   imageFile: '',
-      //   msgList: list
-      // }, this.toBottom)
     })
   }
 
-
-  appendData(data) {
+  appendData = (data) => {
     const { msgList } = this.state
 
     this.originList.unshift(data)
@@ -408,34 +384,17 @@ export default class Chat extends Component {
  
     this.setState({
       inputText: '',
-      imageFile: '',
       msgList: list
     }, this.toBottom)
   }
 
-  handleIssueClick(message, e) {
-    // e.stopPropagation()
-    const { sendPersonId, receivePersonId } = this.state
-    let payload = {
-      sendPerson: sendPersonId,
-      receivePerson: receivePersonId,
-      message,
-      messageType: 'text',
-      createDate: new Date().valueOf()
-    }
-
-    payload.chatId = payload.createDate
-    socket.sendNotice(payload, res => {
-      console.log('发送成功')
-      this.appendData(payload)
-    })
+  handleIssueClick = (message, e) => {
+    this.sendMessage(message)
   }
 
-  bindSendBtn(e) {
+  bindSendBtn = (e) => {
     // e.stopPropagation()
-    this.setState({
-      messageType: 'text'
-    }, this.onSendMsg)
+    this.sendMessage(this.state.inputText, MESSAGETYPE.TEXT)
     this.hideExtraArea()
     savePoint({
       event: 'essential',
@@ -447,18 +406,19 @@ export default class Chat extends Component {
     })
   }
 
-  bindTextInput(e) {
+  bindTextInput = (e) => {
+    console.log('--------->', e)
     this.setState({
       inputText: e.detail.value
     })
   }
 
-  bindInputConfirm(e) {
+  bindInputConfirm = (e) => {
     e.stopPropagation()
-    this.onSendMsg()
+    this.sendMessage(this.state.inputText, MESSAGETYPE.TEXT)
   }
 
-  showExtraArea(e) {
+  showExtraArea = (e) => {
     e.stopPropagation()
     this.setState({
       visExtra: true,
@@ -466,7 +426,7 @@ export default class Chat extends Component {
     })
   }
 
-  hideExtraArea(e) {
+  hideExtraArea = (e) => {
     e && e.stopPropagation()
     if (!this.state.visExtra) {
       return
@@ -478,7 +438,7 @@ export default class Chat extends Component {
     })
   }
 
-  onScrolltoupper() {
+  onScrolltoupper = () => {
     const { pagination } = this.state
     const { pageNumber, pages } = pagination
 
@@ -499,7 +459,7 @@ export default class Chat extends Component {
     })
   }
 
-  togglePromptVisible(flag) {
+  togglePromptVisible = (flag) => {
     this.setState({
       visiblePrompt: !!flag
     })
@@ -514,7 +474,11 @@ export default class Chat extends Component {
   }
 
   render() {
-    const { marginTop, visiblePrompt, prompts, msgList } = this.state
+    const { marginTop, visiblePrompt, prompts, msgList, noChatting } = this.state
+
+    // 如果有错误, 不显示内容
+    if (noChatting) return null;
+
     const extraWrap = (
       <View className="import-bottom">
         <View className="extra-item" onClick={this.bindAlbumClick}>
@@ -539,7 +503,7 @@ export default class Chat extends Component {
                 {/* <View className="prompt__title">常见问题咨询</View> */}
                 {prompts.map((text, index) => (
                   <View
-                    key={index+'im'}
+                    key={index}
                     className="prompt__item"
                     onClick={this.handleIssueClick.bind(this, text)}>
                     <Text>{text}</Text>
@@ -594,4 +558,4 @@ export default class Chat extends Component {
       </View>
     );
   }
-}
+}

src/pages/im/msgItem/index.js

@@ -62,7 +62,7 @@ export default class MsgItem extends Component {
       )
     }
     if (row.messageType === 'image') {
-      return (<Image className="item__content-img" mode="aspectFill" src={row.message} onClick={this.onPreviewImg.bind(this, row)} />)
+      return (<Image className="item__content-img" mode="widthFix" src={row.message} onClick={this.onPreviewImg.bind(this, row)} />)
     }
 
     return (<View className="item__content-txt">{row.message}</View>)
@@ -87,4 +87,4 @@ export default class MsgItem extends Component {
       </View>
     );
   }
-}
+}

src/store/index.js

@@ -21,7 +21,8 @@ const enhancer = composeEnhancers(
   // other store enhancers if any
 )
 
-export default function configStore () {
-  const store = createStore(rootReducer, enhancer)
-  return store
-}
+// export default function configStore () {
+//   const store = createStore(rootReducer, enhancer)
+//   return store
+// }
+export default createStore(rootReducer, enhancer)

src/utils/im.js

@@ -68,39 +68,8 @@ class IMManager {
         this.reconnect()
       }
     })
-
-    //接收新消息必须做点什么（判断类型，订阅DOM更新）
-    // this.wss.onMessage(res => {
-    //   // let message = {};
-    //   // try {
-    //   //   message = JSON.parse(res.data)
-    //   // } catch (err) {
-    //   //   message = res.data
-    //   // }
-    //   // this.onReceiveMessage(res)
-    //   // receive && receive(res)
-    //   // if (message.type) {
-    //   //   switch (message.type) {
-    //   //     case 'notice': //拿到了新消息
-    //   //       //更新消息列表
-    //   //       console.log('收到了一条消息', message)
-    //   //       //监听到消息 
-    //   //       //筛选本房间消息                           
-    //   //       //推入视图消息队列
-
-    //   //       break;
-    //   //     case 'join':
-
-    //   //       break;
-    //   //     case 'leave':
-
-    //   //       break;
-    //   //   }
-    //   // } else {
-    //   //   console.log(message)
-    //   // }
-    // })
   };
+
   //组装消息
   makeUpNotice(send_id, consult_id, room_id, type, content, duration) {
     return {
@@ -152,4 +121,14 @@ class IMManager {
   }
 }
 
-export default new IMManager()
+export default new IMManager()
+
+const MESSAGETYPE = {
+  IMAGE: 'image',
+  TEXT: 'text',
+  CARD: 'card',
+}
+
+export {
+  MESSAGETYPE
+}