node.js - Socket.io - React : How to retrieve saved socket. io 数据(MongoDB)？

Question

在加入之前，我学习了一些关于如何显示在聊天室中发送的消息的教程，但我不知道如何在 React 中显示它们，并且我在服务器端有几个问题。

客户端，在构造函数中:

this.state = {
 msg: "",
 messages: []
};

客户端，我有一个表单，单击按钮将通过此函数将消息发送到服务器:

sendMessage(e) {
 e.preventDefault();
 let msg = this.state.msg;
 this.socket.emit("sendMessage", msg);
 this.setState({ msg: "" });
}

服务器端，我有一个消息的 Mongoose 模式，名为 Message ，数据库中的集合是消息。

const Message = new mongoose.Schema({
 sender: {
  type: "string"
 },
 message: {
  type: "string"
 }
});

var messages = [];

io.on("connection", (socket, user) => {
var user = socket.request.session.user;

Message.find({}).exec((err, messages) => {
 if (err) throw err;
 console.log(messages);
 io.emit("showingPastMessages", messages);
});

console.log(messages) 在 PowerShell 中显示 Mongo 中保存在 JavaScript 对象数组中的所有消息(条目)？[{id_:4qxxx，发件人:'user123'，消息:'你好!'}，{id_:5exxx，发件人:'user456'，消息:'嗨!'}]我想知道是否可以仅访问发送者和消息属性以将其发送到客户端？像 messages.sender + messages.message 这样的东西，因为当我 console.log(messages.message) 它显示未定义

这里是服务器接收发送的消息并将其保存在 Mongo 中的位置。

socket.on("sendMessage", function(msg) {
var newMsg = new Message({ message: msg, sender: user });
 newMsg.save(function(err) {
   if (err) {
     console.log(err);
   } else {
     messages.push(newMsg);
     console.log(newMsg);
     console.log(messages);
   }
 });
});

console.log(newMsg) 显示最新发送的消息，但 console.log(messages) 不显示之前的消息，只显示最新的消息，为什么？

那么在 React 中，我应该在构造函数中的 ComponentDidMount() 中有类似的东西？如果应该与 prevState 一起使用

this.socket.on("showingPastMessages", function(messages){
 this.setState({ ...this.state.messages, messages})
});

你能给我一些建议吗？

这是我用于检索数据的客户端代码:

class Chat extends Component {
 constructor(props) {
 super(props);

 this.state = {
  msg: "",
  messages: []
 };

 var socket = io('http://localhost:3000');
 this.socket.on("history", function(messages) {
  console.log(messages);
 });
}

Answer 1

这是一个好的开始。我建议做的是让这变得更加事件驱动。为此，您需要在连接时将 socket 添加到房间。有多少房间以及如何分割房间将取决于您的应用程序，但我将演示基本想法。

首先，当套接字连接到您的服务器时，将该套接字添加到房间并立即发出您的聊天历史记录。

io.on('connection', async (socket) => {
  socket.user = socket.request.session.user;

  socket.join('chat');

  try {
    const messages = await Message.find({});

    socket.emit('history', messages);
  } catch (err) {
    // Handle this error properly.
    console.error(err);
  }
});

然后，当您收到消息时，您将需要保存该消息并将其发送到聊天室中的所有套接字。

socket.on("sendMessage", (msg, callback) => {
  const message = new Message({ message: msg, sender: socket.user });

  message.save(function(err) {
    if (err) {
      return callback(err);
    }

    io.to('chat').emit('message', message);
  });
});

最后，在客户端，您需要监听历史事件。当您收到它时，您需要清除当前的聊天记录并将其替换为服务器告诉您的内容。也许这看起来像

socket.on('history', (messages) => {
  this.setState({ messages });
});

您还需要监听此 message 事件，但通过此事件，您只需将该消息附加到您的历史记录中。这可能看起来像

socket.on('message', (message) => {
  this.setState({ messages: [ ...messages, message ] });
});

警告一句，如果您告诉服务器有一条新消息，请不要将其添加到您的 messages 状态数组中，直到收到 message 事件。如果这样做，您会注意到双重消息。例如，这可能看起来像

onSendMessage(evnt) {
  evnt.preventDefault();

   socket.emit("sendMessage", msg);
   this.setState({ msg: "" });
}

注意:收到 OP 的一些反馈后，我想添加一个部分，说明将事件处理程序附加到套接字的位置(即所有 socket.ons)。我的建议是在 io.on('connection') 回调中的文件底部定义 Message 架构的文件中添加此代码。例如，

const Message = new mongoose.Schema({/*...*/});

io.on('connection', (socket) => {
  // Everything else I wrote above...

  socket.on('sendMessage', (msg, callback) => {
    // ...
  });
});

在客户端，事件处理程序可能会在安装聊天组件时注册。例如，

class ChatComponent extends React.Component {
  componentDidMount() {
    this.socket = io('https://your-server-or-localhost/');

    this.socket.on('history', (messages) => {
      // See above...
    });
  }
}