最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

Reactjs和Socket.io有没有的NodeJS发送数据到其他客户端

运维笔记admin11浏览0评论

Reactjs和Socket.io有没有的NodeJS发送数据到其他客户端

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') 
发布评论

评论列表(0)

  1. 暂无评论