node.js - 每当我发送消息时，它都会在 react 中多次显示相同的消息

Question

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

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