用户聊天消息处理(消息分组、未读消息、已读清除等)

绝地灬酷狼 2021-07-25 00:55 689阅读 0赞

每条消息都要设置一个是否已读的属性
    
    消息分组:
    	后台返回和当前用户相关的所有消息,根据当前用户和不同用户直接的聊天标识,
    	返回对应的分组消息列表
    	
    未读消息:
    	后台返回所有的消息后,根据和不同用户的聊天标识,获取相应的聊天内容,
    	遍历每一条聊天内容,读取每一条的是否已读属性,来确定未读的总消息
    
    已读消息:
    	当进入聊天界面后,就通过后台修改所有的读取状态属性为已读的消息,
    	然后返回修改的条数,前台根据修改的条数和总条数来计算剩余未读的总消息

代码示例:  
reducer.js:

//聊天状态
    const initChat={ 
        users:{ },
        chatMsgs:[],
        unReadCount:0 //总未读数量
    }
    function chat(state=initChat,action)
    { 
        switch(action.type)
        { 
            case RECEIVE_MSG_LIST:  // data: {users, chatMsgs}
            const { users, chatMsgs, userid} = action.data
            console.log(userid)
            return { 
              users,
              chatMsgs,
              unReadCount: chatMsgs.reduce((preTotal, msg) => preTotal+(!msg.read&&msg.to===userid?1:0),0)
            }
          case RECEIVE_MSG: // data: chatMsg
            const { chatMsg} = action.data
            return { 
              users: state.users,
              chatMsgs: [...state.chatMsgs, chatMsg],
              unReadCount: state.unReadCount + (!chatMsg.read&&chatMsg.to===action.data.userid?1:0)
            }
    
            default:
                return state
        }
    }

actions.js:

import { reqRegister,reqLogin,reqUpdateUser,reqUser,reqUserList,reqChatMsgList,reqReadMsg} from '../api/index'
    import { AUTH_SUCCESS,ERROR_MSG,RECEIVE_USER,RESET_USER,RECEIVE_USERLIST,RECEIVE_MSG_LIST,RECEIVE_MSG,MSG_READ} from './action-types'
    import io from 'socket.io-client'
    
    
    //授权成功更改状态
    const authSuccess=(user)=>({ type:AUTH_SUCCESS,data:user})
    //失败更改状态
    const errorMsg=(msg)=>({ type:ERROR_MSG,data:msg})
    //完善信息后更新
    const receiveUser=(user)=>({ type:RECEIVE_USER,data:user})
    //重置用户信息
    export const resetUser=(msg)=>({ type:RESET_USER,data:msg})
    
    //接收用户列表
    const receiveUserList=(userlist)=>({ type:RECEIVE_USERLIST,data:userlist})
    
    //接收消息列表
    const receiveMsgList=({ users,chatMsgs,userid})=>({ type:RECEIVE_MSG_LIST,data:{ users,chatMsgs,userid}})
    
    //接收单个消息
    const  receiveMsg=(chatMsg,userid)=>({ type:RECEIVE_MSG,data:{ chatMsg,userid}})
    
    //注册
    export const register=(user)=>{  
       const { username,password,password2,type} =user; 
    
       //表单前台验证,返回对应的同步action
       if(!username||!password||!password2)
       { 
            return errorMsg('用户名或密码不为空');
       }
       if(password!==password2)
       { 
            return errorMsg('两次密码不一致');
       }
         
       return async (dispatch)=>{ 
        
    
         const response=await reqRegister({ username,password,type})
         const res=response.data;
         if(res.code===0) //成功
         { 
              getMsgList(dispatch,res.data._id);
              dispatch(authSuccess(res.data));
         }else{ 
              dispatch(errorMsg(res.msg));
         }
     }
    }
    
    //登录
    export const login=(user)=>{ 
         const{ username,password}=user
    
         //表单前台验证,返回对应的action
         if(!username||!password)
         { 
              return errorMsg('用户名或密码不为空');
         }
    
         return async (dispatch)=>{ 
              const response=await reqLogin(user)
              const res=response.data;
    
              if(res.code===0) //成功
              { 
                   getMsgList(dispatch,res.data.user._id);
                   dispatch(authSuccess(res.data.user));
              }else{ 
                   dispatch(errorMsg(res.msg));
              }
      }
     }
    
     //用户完善头像等信息后更新用户
     export const updateUser=(user)=>{ 
          
          return async (dispatch)=>{ 
    
              const response=await reqUpdateUser(user)
              const res=response.data;
              if(res.code===0)
              { 
                   dispatch(receiveUser(res.data));
              }else{ 
                   dispatch(resetUser(res.msg));
              }
          }
     }
    
     //获取用户异步action
     export const getUser=()=>{ 
          return async(dispatch)=>{ 
               const response =await reqUser();
               const res=response.data;
               if(res.code===0){ 
                   getMsgList(dispatch,res.data._id);
                   dispatch(receiveUser(res.data))
               }else{ 
                   dispatch(resetUser(res.msg));
               }
          }
     }
    
     //获取用户列表
     export const getUserList=(type)=>{ 
          return async dispatch=>{ 
              const response =await reqUserList(type);
              const res=response.data;
              if(res.code===0)
              { 
                   dispatch(receiveUserList(res.data))
              }
          }
     }
     /** * 单例模式创建一个socket,利用全局对象io新增属性来实现 */
    
     function initIO(dispatch,userid)
     { 
          if(!io.socket){ 
              io.socket=io('ws://localhost:4000')
              io.socket.on('receiveMsg', function (chatMsg) { 
                   console.log('浏览器端接收到消息:', chatMsg)
                   //只有当前会话才分发action保存
                   if(userid==chatMsg.from||userid==chatMsg.to)
                   { 
                        dispatch(receiveMsg(chatMsg,userid))
                   }
              })
          }
     
     }
    
     //异步发送消息
     export const sendMsg=({ from,to,content})=>{ 
          return dispatch=>{ 
              initIO();
              console.log('浏览器发送消息',{ from,to,content})
              io.socket.emit('sendMsg',{ from,to,content})
          }
     }
    //异步获取消息函数
     async function getMsgList(dispatch,userid)
     { 
         initIO(dispatch,userid);
         const response =await reqChatMsgList();
         const res=response.data
    
         if(res.code===0)
         { 
              const{ users,chatMsgs}=res.data
              dispatch(receiveMsgList({ users,chatMsgs,userid}))
    
         }
     }

action-type.js:

//注册/登录成功
    export const AUTH_SUCCESS='auth_success'
    
    //错误提示信息
    export const ERROR_MSG='error_msg'
    
    //用户信息完善
    export const RECEIVE_USER='receive_user'
    
    //重置用户
    export const RESET_USER='reset_user'
    
    //接收用户列表
    export const RECEIVE_USERLIST='receive_userlist'
    
    //接收消息列表
    export const RECEIVE_MSG_LIST='receive_msg_list'
    
    //接收到新的一条消息
    export const RECEIVE_MSG='receive_msg'
    
    //读取消息
    export const MSG_READ='msg_read'

api接口:

/* 包含n个接口请求的函数 */
    import ajax from './ajax'
    
    //注册接口
    export const reqRegister=(user)=>ajax('/register',user,'POST');
    
    //登录接口
    export const reqLogin=({ username,password})=>ajax('/login',{ username,password},'POST');
    
    //更新用户接口
    export const reqUpdateUser=(user)=>ajax('/update',user,'POST');
    
    //获取用户信息
    export const reqUser=()=>ajax('/user')
    
    //获取用户列表
    export const reqUserList=(type)=>ajax('/userlist',{ type:type})
    
    //获取聊天消息
    export const reqChatMsgList=()=>ajax('/msglist')
    
    //修改消息为已读
    export const reqReadMsg=(from)=>ajax('/readMsg',{ from},'POST')

api封装:

/** ajax模块,返回值为promise对象 */
    import axios from 'axios'
    import qs from 'qs'
    
     export default function ajax(url,data={ },type='GET')
     { 
        // url='http://127.0.0.1:4000'+url;
         if(type==='GET')
         { 
             let str=''
            //将对象拼成url参数对
            Object.keys(data).forEach(function(item,index){ 
                str+=item+'='+data[item]+'&'
            })
    
            //去掉最后一个&或根本无参数
            if(str)
            { 
                str=str.substring(0,str.length-1)
                str='?'+str;
            }
            return axios.get(url+str)
    
         }else{ 
            return axios.post(url,qs.stringify(data))
         }
        
     }

后台消息有关路由:

socket.io后台模块:

const { ChatModel}=require('../db/models')
    
    module.exports = function (server) { 
        // 得到 IO 对象
        const io = require('socket.io')(server)
    
        //监视连接(当有一个客户连接上时回调)
        io.on('connection', function (socket) { 
            console.log('soketio connected')
    
            // 绑定 sendMsg 监听, 接收客户端发送的消息
            socket.on('sendMsg', function ({ from,to,content}) { 
                console.log('服务器接收客户端发送',{ from,to,content})
                //保存消息进数据库,再将保存信息返回给前台
                const chat_id=[from,to].sort().join('-');
                const create_time=Date.now();
                new ChatModel({ from,to,content,chat_id,create_time}).save(function(err,chatMsg){ 
                    //向客户端发送数据
                    io.emit('receiveMsg',chatMsg);
                })
            })
        })
    }