koa+React实现在线聊天室

通过一些简单的技巧，实现群聊与私聊效果！

 

聊天室介绍：

        整体的UI构建以及数据处理均个人设计，目前已经嵌入个人博客，后期将不定期的开放博客供大家使用测试。

        基于socket.io实现的实时数据响应，目前实现了群聊和私聊的功能，在此之上添加了用户添加好友、在线用户预览功能......（需要源码请私聊）

 socket.io参考文档：https://socket.gitbook.io/docs/2-wen-dang-docs

集成步骤：

后端Koa

Koa添加依赖：

const socket = require("socket.io");

将socket服务挂载在koa主服务上（切记端口不能冲突）：

const server=app.listen(3001,()=>{
    console.log('http://localhost:3001')
});

const io = socket(server, {
    cors: {
        origin: "http://localhost:3000",
        credentials: true,
    }
})

在socket内定义私聊和群聊事件：

io.on("connection", (socket) => {
       socket.on('online',data=>{
           socket.join(data.sessionID)
       })
      //群聊发送信息
      socket.on("sendGroupMessage",data=>{
          const date = getDate().createTime
         io.emit('groupReceive',{
             ...data,
             sendTime:date
         })
      })
    //单聊发送信息
    socket.on("sendSomeOneMessage",data=>{
        const date = getDate().createTime
        io.to(data.sessionID).emit('someOneReceive',{
            ...data,
            sendTime:date
        })
    })
});

至此，后端代码就集成完了，集成完之后，记得重启你的Koa项目

前端React

项目的目录结构（由于数据的响应冲突，建议将群聊和私聊分为两个组件）

 React添加依赖，在父类配置socket：

import {io} from "socket.io-client";

export default function ChatRoom(){

    const socket = io(config.socketURL);

} 

将socket向子组件分发（主要就是信息接收显示和信息数据发送）：

      

                   

                       closeChat()}/>
                       
 {headerData}

                   
                   

                       {messageShow==='block'?:
                           
                       }
                   
                     

                         
                     
      

输入框内向后台传递数据（通过messageShow字段判断群聊还是私聊）：

   const onFinish=(data)=>{
         const messageData=utf16toEntities(data.message)
        if(clickData===null){
            // message.warning('请勿违规操作');
        }else {
            sendMessage({
                userAvatar:user.userAvatar,
                username:user.username,
                nick:user.nick,//谁发的信息，由于数据加载问题，不得不用简短的字段
                toSomeone:clickData,//传的是唯一ID或all
                message:messageData
            }).then(()=>{
                form.current.resetFields()
                if(messageShow==='block'){
                    socket.emit('sendGroupMessage',{
                        ...user,
                        ...data,
                        sessionID
                    })
                }else {
                    socket.emit('sendSomeOneMessage',{
                        ...user,
                        ...data,
                        sessionID
                    })
                }
            })

        }
    }

信息框分别监听群聊和私聊事件（将获取的数据通过useState存入，实时刷新信息数据）：

   //好友之间信息传递
    socket.on('someOneReceive',datas=>{
            setArrivalMessage(datas)
    })

  //群聊信息传递
    socket.on('groupReceive',datas=>{
        setArrivalMessage(datas)
    })

信息数据渲染（支持实时滚动条底置，显示最新的数据）：

    //使得滚动条始终保持在最下方
    useEffect(()=>{
        const current = scrollEvent.current
        current.scrollTop=current.scrollHeight
    },[data])

 

            { data.map((item,index)=>{
                return(
                    

                        
                        

                            
{item.nick}
                            

                                {item.message}
                            
                        
                        

                            {item.sendTime}
                        
                    
                )
            })}
        

代码集成注意事项

群聊和私聊数据最好还是分开响应，在开发的过程中产生了各种数据冲突。最后向大家分享MySQL的字段配置（信息存储、好友信息存储）