Question

使用Reactjs nodejs和socket.io构建聊天应用程序。

运行此代码时，它会连接到服务器。当我从Chrome浏览器发送消息时，我可以看到我发送的消息，但是另一个浏览器中的另一个客户端没有收到任何消息。

所有发送的消息都可以在控制台日志中看到。

如果我使用 socket.broadcast.emit()功能，我看不到我发送的消息，但其他客户端会看到它，反之亦然。

我该如何解决此问题，以便两个客户端都可以相互发送查看消息和接收消息。

import React, { Component, Fragment } from "react";
import { render } from "react-dom";

import axios from 'axios';
import io from "socket.io-client";


class ChatReact extends React.Component {
  constructor(props) {
    super(props);

 this.state = {

 username: '',
 message: '',
 messages: []

};

 this.sendMessage = this.sendMessage.bind(this);
}


componentDidMount(){
this.socket = io('http://localhost:9090');

this.socket.on('connect',(data) => {
    this.socket.emit('joined', 'Hello World from client...');
 });

this.socket.on('acknowledge', function(data) {
        alert(data);
    });




        this.socket.on('response message', function(data){
            addMessage(data);
        });

        const addMessage = data => {
            console.log(data);
            this.setState({messages: [...this.state.messages, data]});
            console.log(this.state.messages);
        };


}


 sendMessage = ev => {
            ev.preventDefault();
            this.socket.emit('chat message', {
                author: this.state.username,
                message: this.state.message
            })
            this.setState({message: ''});

        }

  render() {
    return (
      <div >
        <div>

 <div className="messages">
                                    {this.state.messages.map(message => {
                                        return (
                                            <div>{message.author}: {message.message}</div>
                                        )
                                    })}
                                </div>





<h1> Testing Socket Io with Reactjs</h1>

 <div className="card-footer">
                                <input type="text" placeholder="Username" value={this.state.username} onChange={ev => this.setState({username: ev.target.value})} className="form-control"/>
                                <br/>
                                <input type="text" placeholder="Message" className="form-control" value={this.state.message} onChange={ev => this.setState({message: ev.target.value})}/>
                                <br/>
                                <button onClick={this.sendMessage} className="btn btn-primary form-control">Send</button>
                            </div>




        </div>

      </div>
    );
  }
}

这是服务器响应

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendFile(__dirname + '/chat.html');
});

io.on('connection', function(socket){
    console.log('a user connected now..');
    socket.on('joined', function(data) {
        console.log(data);
        socket.emit('acknowledge', 'Acknowledged');
    });
    socket.on('chat message', function(data){
socket.emit('response message', data);
        //socket.broadcast.emit('response message', data);
console.log(JSON.stringify(data));


    });
});

http.listen(9090, function(){
    console.log('listening on *:9090');
});

Answer 1

使用socket.io cheatsheet了解必须看谁的消息。 “ 广播”明确指出要向发件人以外的所有客户端发送消息。如果您需要向包括发件人在内的许多用户发送消息，则最好使用room方法。还要注意您使用的是 socket 还是 io （连接实例）。

io.in('roomName').emit('acknowledge', 'Acknowledged')

ReactJS和Socket.io与Node.js不向其他客户端发送数据

1 个答案: