ReactJS和WebSockets的：听服务器广播发出的前端事件

Question

我使用ReactJS, Socket.io, and NodeJS编码聊天应用。我已经完成了基本的插座连接部分，当我输入信息，然后按回车消息被发射到后端。现在我想，一旦有人添加一条消息（多个标签）的消息被广播到除了谁发起并应显示在消息列表中的一个的所有其他客户端。我广播消息从当从一个特定的客户端接收消息的服务器的所有客户端，但不知道到哪里赶它在我的前端反应中的应用。

让我通过代码：

App.js - 我的应用程序有3个主要组成部分，即用户（用户列表），邮件（邮件列表将显示所有的消息对所有在线用户）和方法addMessage（包含和文本框和按钮添加一个消息）

class App extends Component {
  render() {
    const { classes } = this.props;
    return (
      <div className="App">
        {/* <UserNameInp /> */}
        <section className={classes.usersSection}>
          <Users />
        </section>
        <section className={classes.messagesSection}>
          <section className={classes.messagesStyle}>
            <Messages />
          </section>
          <section className={classes.addMessageStyle}>
            <AddMessage />
          </section>
        </section>
      </div>
    );
  }
} 

actions.js：存储addMessageToList行动。当添加新的消息我使用socket.emit它发射到服务器

export var addMessageToList = messageText => {
  let messageDtls = {};
  messageDtls.messageText = messageText;
  messageDtls.messageAuthor = "You";  //just for testing
  messageDtls.messageID = "You" + messageText;  //just for testing
  socket.emit("addmessage", messageDtls);

  return {
    type: actionTypes.ADD_MESSAGE_TO_LIST,
    payLoad: { messageDtls: messageDtls }
  };
};

reducer.js - 减速器包含messagesList为包含来自所有用户，包括当前的消息的状态值。

var initState = {
  messagesList: []
};

var addMessageToList = (state, action) => {
  return {
    ...state,
    messagesList: [...state.messagesList, action.payLoad.messageDtls]
  };
};

var reducer = (state = initState, action) => {
  switch (action.type) {
    case actionTypes.ADD_MESSAGE_TO_LIST:
      return addMessageToList(state, action);
    default:
      return state;
  }
};
export default reducer;

Messages.js - 该组件呈现使用图作为列表中的每个消息的组件。该messagesList来自终极版店。

class Messages extends Component {
  render() {
    let messages = null;
    messages =
      this.props.messagesList &&
      this.props.messagesList.map((ele, index) => {
        return (
          <Message
            key={index}
            messageAuthor={ele.messageAuthor}
            messageText={ele.messageText}
          />
        );
      });

    const { classes } = this.props;
    return (
      <Card className={classes.card} raised={true}>
        <span>Messages</span>
        <CardContent className={classes.cardContent}>{messages}</CardContent>
      </Card>
    );
  }
}

var mapStateToProps = state => {
  return {
    messagesList: state.messagesList
  };
};

var mapDispatchToProps = dispatch => {
  return {
    addMessageToList: messageText =>
      dispatch(actions.addMessageToList(messageText))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(withStyles(styles)(Messages));

AddMessage.js - 在行动addMessageToList是按键点击发送，所以该消息可以messagesList状态添加的组件。

class AddMessage extends Component {
  state = {
    value: ""
  };
  handleChange = event => {
    this.setState({
      value: event.target.value
    });
  };

  onEnterKeyPress = event => {
    this.props.addMessageToList(this.state.value);
    this.setState({
      value: ""
    });
  };
  render() {
    const { classes } = this.props;
    return (
      <Paper className={classes.root} elevation={1}>
        <InputBase
          className={classes.input}
          placeholder="Message"
          onChange={this.handleChange}
          value={this.state.value}
          // onKeyPress={this.onEnterKeyPress}
        />
        <IconButton
          className={classes.iconButton}
          aria-label="Enter"
          onClick={this.onEnterKeyPress}
          disabled={this.state.value === "" ? true : false}
        >
          <ChatIcon />
        </IconButton>
      </Paper>
    );
  }
}

var mapDispatchToProps = dispatch => {
  return {
    addMessageToList: messageText =>
      dispatch(actions.addMessageToList(messageText))
  };
};

export default connect(
  null,
  mapDispatchToProps
)(withStyles(styles)(AddMessage));

后端App.js - 从App.js文件的部分内容，其中与插座连接我听“方法addMessage”事件和广播发出“messagesadded”事件。

io.on("connection", socket => {
  console.log("User connected");
  socket.on("addmessage", message => {
    // messagesRecieved = message.messageText;
    console.log("Message received : " + message.messageText);
    socket.broadcast.emit("messagesadded", message);
  });
});

现在，我不知道在哪里我的阵营代码，我应该倾听来自服务器的广播“messagesadded”事件。它应该像连续收听这样无论何时被发送的消息，我可以再次指派addMessageToList行动，它会更新messagesList状态，并再次渲染消息组件。

谢谢。

Answer 1

你应该听听在componentDidMount()插座事件。

componentDidMount(){
 socket.on("messagesadded", message => {
  //dispatch action
});
}