Reactjs和Socket.io有没有的NodeJS发送数据到其他客户端
与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');
});
回答如下:
使用socket.io cheatsheet了解谁有权看到这些消息。 “广播”中明确指出将消息发送到所有客户端,除了发送者。如果您需要发送一个消息对于许多用户,包括发送者,然后更好地利用房间的方法。也照顾您正在使用什么实例是否插座或IO(连接的实例)。
io.in('roomName').emit('acknowledge', 'Acknowledged')