koa+React实现在线聊天室

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

koa+React实现在线聊天室_第1张图片 koa+React实现在线聊天室_第2张图片

聊天室介绍:

        整体的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

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

koa+React实现在线聊天室_第3张图片

 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的字段配置(信息存储、好友信息存储

koa+React实现在线聊天室_第4张图片

 

你可能感兴趣的:(react.js,javascript,前端)