我该如何解决这个问题我可以发送和接收消息，但它不是一对一的消息传递套接字 io react [英] How can i solve this i am able to send msg and receive but it is not one to one messaging socket io react

问题描述

我尝试阅读文章，这就是我从中得到的结果我如何严格地进行一对一消息传递以及如何在我在私人消息中切换用户时也单独进行群组消息我想获得空的 showmessagespace 但它正在显示来自前一个用户的消息，当第三个用户发送消息时，两个用户都可以看到消息.

我如何制作一对一的消息并在单击特定用户消息按钮时更改用户(消息按钮工作正常，它正在切换用户).我的首要目标是私信.

服务器代码:

const io = require(socket.io")(server, {核心:{起源: '*'，}});//为每个请求分配套接字对象app.use(function (req, res, next) {req.io = io;下一个();});io.on('connection', (socket) => {console.log('连接建立',socket.id);//io.emit('新连接')socket.on('send', (data)=>{console.log("从单个用户名接收数据",data)socket.join(`${data.username}`)io.emit('发送',数据)socket.to(`${data.username}`).emit(`${data.username}`,data)});socket.on('断开',()=>{io.emit('message','用户离开')})});

反应代码:当我点击其他用户的消息按钮时，我发送的消息会同时发送到上一个和我点击的消息按钮，并且所有消息都在他们之间共享

import React, { Component } from 'react';从'react-router-dom'导入{链接，重定向}；从../services/userservice"导入 UserService；从../services/messageservice"导入{getUsersFriend}；从socket.io-client"导入io；const SOCKET_IO_URL = "http://localhost:4000/";导出默认类消息扩展组件{构造函数(道具){超级(道具)this.socket = io(SOCKET_IO_URL)this.state = {当前用户:UserService.getCurrentUser(),正在加载:假，用户详细信息:[]，显示:假，用户名:''，信息:''，套接字连接:假，消息:[]};this.onTextboxChangeMes​​sage = this.onTextboxChangeMes​​sage.bind(this)}componentDidMount(){this.fetchUser()this.socket.on('connect',()=>{this.setState({ socketConnected : true}) })this.socket.on('send',(data)=>{console.log('组件确实挂载了',data)this.setState({messages:[...this.state.messages,data]})})}异步 fetchUser(){尝试{const {currentUser} = this.state控制台日志(当前用户)const data = { userid : currentUser.user._id }控制台日志(数据)让用户 = 等待 getUsersFriend(data)this.setState({ userdetails: user });//控制台日志(用户)}抓住(错误){控制台日志(错误)}}showMessageSpace(elementusername){//用这个我点击另一个用户和那个特定用户的用户名const {currentUser} =this.statethis.setState({显示:真实，用户名:元素用户名});}onTextboxChangeMes​​sage(e){this.setState({消息:e.target.value})}发送消息(用户名，消息，发件人用户名){const {messages} =this.state如果(this.state.socketConnected){console.log('if condition test',username,message,senderusername)this.socket.emit('send',{username,message,senderusername});console.log('条件用户名',`${用户名}`, )this.socket.on(`${username}`, (d)=>{this.setState({messages:[...messages,d]})})}this.setState( { 消息:'' })}使成为(){const { currentUser ,isLoading,userdetails,message,messages} = this.state;控制台日志(消息)如果(正在加载){返回(<div><p>加载中...</p></div>)；}如果(！当前用户){返回(<div><重定向到='/登录'/>

)}别的{返回(<div><h1>消息</h1><div><p>用户</p>{' '}<ul className="集合">{userdetails.map((元素) => {返回(<div key={element._id}><li><Link to={`/dashboard/profile/:${element._id}`}>{element.username}</Link>{' '}

);})}{' '}

{' '}<Link to="/dashboard">Dashboard</Link>{' '}<div>{this.state.show &&(

<h2>用户名:{' '}{this.state.username}</h2>{' '}<div><h3>身体</h3><div><ul>{messages.map((msg,key) =>{return(<li key={key}><span>{msg?.message}</span></li>);})}

{' '}<div>{' '}<输入类型=文本"名称=消息"值={消息}onChange={this.onTextboxChangeMes​​sage}></输入><button className='btn btn-info' onClick={this.SendMessage.bind(this,this.state.username,this.state.message,currentUser.user.username)}>发送</button>

{' '}</div>)}