React+Django Channels聊天应用消息className归属错误问题求助

你的问题核心是接收消息时错误地用当前登录用户的用户名作为所有消息的className，不管消息是谁发的，都套上了当前页面用户的样式类，所以对方看到的消息也显示成自己的className。

解决步骤： #

1. 后端补充发送者信息
   在Django Channels的consumer处理消息时，要把发送该消息的用户用户名一起打包到返回的JSON数据里。比如你的consumer代码里，发送消息时应该包含username字段：

   # 示例Django Channels consumer代码片段
   async def send_message(self, event):
       message = event['message']
       username = event['username']  # 获取发送消息的用户用户名
       await self.send(text_data=json.dumps({
           'message': message,
           'username': username  # 把发送者用户名传给前端
       }))
   

2. 前端修改className来源
   前端接收WebSocket消息时，不要再用currentUser[0]?.username，而是用后端传过来的data.username来设置className和id：

   chatSocket.onmessage = function(e) {
        if (ran == true) {
          const data = JSON.parse(e.data);
          // 这里把currentUser换成data.username，用消息发送者的用户名作为类名
          setMessages(old => [...old, <p ref={oneRef} id={data.username} className={data.username}>{data.message}</p>])
                 
       }
   }
   

这样处理后，不管是first还是second发送的消息，两端都会用发送者的用户名作为className，就能正确区分不同用户的消息样式了。

内容的提问来源于stack exchange，提问作者zequuee1