每当我发送消息时，它都会在反应中多次显示相同的消息

Question

上面的 img 显示了这个问题。你也可以检查右下角的控制台我正在使用 socket io react node 在一对一聊天网站上工作，表示我正面临这个问题，例如：当我第一次输入 hi 然后 hi 显示 1 次当我输入 hii 它在我第 3 次输入 jo 时显示 2 次显示 jo 3 次我该如何解决这是我的反应代码另外我的消息在另一端没有收到它只显示在发件人页面上

import React, { Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import UserService from "../services/userservice";
import {getUsersFriend} from "../services/messageservice";
import io from "socket.io-client";
const SOCKET_IO_URL = "http://localhost:4000/";

export default class Messages extends Component {
    constructor(props){
        super(props)
        this.socket = io(SOCKET_IO_URL)
        this.state = {
            currentUser: UserService.getCurrentUser(),
            isLoading:false,
            userdetails:[],
            show:false,
            username:'',
            message:'',
            socketConnected:false,
            messages:[]
        };
        this.onTextboxChangeMessage = this.onTextboxChangeMessage.bind(this)
    }

    componentDidMount(){
        const {currentUser}=this.state
        this.fetchUser()
        this.socket.on('connect',()=> {
            this.setState({ socketConnected : true})
            // console.log("connection")
        })
    }

    async fetchUser(){
        try{
            const {currentUser} = this.state
            console.log(currentUser)
            const data = { userid : currentUser.user._id }
            console.log(data)
            let user = await getUsersFriend(data)
            this.setState({ userdetails: user });
            // console.log(user)
        }catch(err){
            console.log(err)
        }
    }

    showMessageSpace(elementusername){
        this.setState({
            show: true,
            username:elementusername
        });
    }

    onTextboxChangeMessage(e){
        this.setState({ message:e.target.value})
    }

    SendMessage(e,senderid,receiverusername,message,senderusername){
        e.preventDefault();
        e.stopPropagation()
        console.log('event', e)
        const {messages} =this.state
        if(this.state.socketConnected){
            console.log('if condition test',senderid,receiverusername,message,senderusername )
            this.socket.emit('send',{senderid,receiverusername,message,senderusername});
            this.socket.on(`${receiverusername}`, (d)=>{
                if(this.state[`${receiverusername}`]?.length >= 1 ){
                    let messageList = this.state[`${receiverusername}`]
                    this.setState({[`${receiverusername}`]:[...messageList,d]})
                }
                else{
                    this.setState({[`${receiverusername}`]:[d]})
                    console.log('else Condition store individual messages', this.state[`${receiverusername}`])
                }
        }
        this.setState( { message:'' })
    }

    

    render(){
        const { currentUser ,isLoading,userdetails,message,messages} = this.state;
        // console.log(messages)
        if (isLoading) {
            return (<div><p>Loading...</p></div>);
        }

        if(!currentUser){
            return(
                <div>
                    <Redirect  to='/login' />
                </div>
            )
        }
        else{
        return(
            <div>
                <h1>Messages</h1>
                <div>
                    <p>Users</p>
                    {' '}
                    <ul className="collection">
                        {userdetails.map((element) => {
                            return(
                                <div key={element._id}>
                                    <li><Link to={`/dashboard/profile/:${element._id}`}>{element.username}</Link>{' '}<input 
                                    type="button" 
                                    id={element._id}
                                    value="Message"
                                    onClick={this.showMessageSpace.bind(this,element.username)} ></input></li>
                                </div>
                            );
                        })
                        }
                    </ul>
                    {' '}
                </div>
                {' '}
                    <Link to="/dashboard">Dashboard</Link>
                {' '}
                <div>
                {
                    this.state.show &&
                    (<div>
                        <h2>Username : {' '}{this.state.username}</h2>
                        {' '}
                        <div>
                            <h3>Body</h3>
                            <div>
                                <ul>
                                {/* { this.state[`${this.state.username}`]?.map((msg,key) =>{ */}
                                {this.state.username?.length > 0 && this.state[`${this.state.username}`]?.map((msg,key) =>{
                                    return(<li key={key}>{msg.senderusername}<span>{' '}{msg.message}</span></li>);
                                })
                                }
                                </ul>
                            </div>
                        </div>
                        {' '}
                        <div>
                            {' '}
                            <input 
                            type="text"
                            name="message"
                            value={message}
                            onChange={this.onTextboxChangeMessage}
                            ></input>
                            <button className='btn btn-info' onClick={(e)=> {this.SendMessage(e,currentUser.user._id,this.state.username,this.state.message,currentUser.user.username)}}>Send</button>
                        </div>
                        {' '}
                    </div>)
                    }
                </div>
            </div>
        )
        }
    }
}

服务器代码：

io.on('connection', (socket) => { /* socket object may be used to send specific messages to the new connected client */
  console.log('connection established',socket.id);
  socket.on('send', (data)=>{
    console.log("Receive data from single username",data)
     io.emit('message',data)
     socket.on('message',data => {
        console.log("private")
        io.to(data.receiverid).emit('message',data)
     })
  });
  
  socket.on('disconnected',()=>{
    console.log("disconnect")
  })
});

Answer 1

这是因为您每次发送消息时都会为套接字分配另一个新的回调。

移动这部分：

this.socket.on(`${receiverusername}`, (d)=>{
  if(this.state[`${receiverusername}`]?.length >= 1 ){
    let messageList = this.state[`${receiverusername}`]
    this.setState({[`${receiverusername}`]:[...messageList,d]})
} else {
    this.setState({[`${receiverusername}`]:[d]})
    console.log('else Condition store individual messages', 
    this.state[`${receiverusername}`])
}

进入 onconnect 回调：

this.socket.on('connect',()=> {
  this.setState({ socketConnected : true})

  this.socket.on("message", (d)=>{
    if(this.state[`${d.receiverusername}`]?.length >= 1 ){
      let messageList = this.state[`${d.receiverusername}`]
      this.setState({[`${receiverusername}`]:[...messageList,d.content]})
  } else {
      this.setState({[`${d.receiverusername}`]:[d.content]})
      console.log('else Condition store individual messages', 
      this.state[`${receiverusername}`])
  }
})

但在此变体中，您没有接收者用户名。所以你应该从你的服务器发送一般的“消息”事件作为包含接收者用户名的对象。

on 方法在 socket.io 文档中有准确的解释：https://socket.io/docs/v3/listening-to-events/

此处记录了在 onconnect 处理程序中分配 onmessage 回调的模式：

https://socket.io/get-started/chat/#Broadcasting

每当我发送消息时，它都会在反应中多次显示相同的消息

Whenever i send msg it is showing same message multiple times in react

chat

node.js

express

socket.io

reactjs