socketio& ReactJS:消息从服务器到前端多次发射

发布于 2025-01-25 20:13:25 字数 1002 浏览 4 评论 0原文

我正在使用ReactJ(socketio)和Nodejs进行聊天室应用程序。当我从前端到服务器发出消息时,它只会发出一次,但是当我从服务器回到frontend时,它会发出多次。

前端代码:

function handleChat(event) {
    event.preventDefault();
    socket.emit("newMessage", { message: msg, user: props.user.name });
    setMsg("");
  }
    socket.on("messageList", (list) => {
      console.log(list.message);
      var allMsg = messages
      allMsg.push({message: list.message.message, name: list.message.user})
      setMessages(allMsg);
  })

在上面的代码newMessage是将消息从前端发射到服务器的处理程序,而Messagelist是服务器消息的处理程序(这是问题)。

后端代码:

namespace.forEach((ns) => {
    io.of(`/${ns.name}`).on("connect", (socket1) => {
      // console.log(ns.name, socket1.id);
      socket1.on("name",(name)=>{
        console.log(name);
      })
      socket1.on("newMessage", (message) => {
        console.log(message);
        io.of(`/${ns.name}`).emit("messageList",{message})
      });
    });
  });

I am making a chatroom application using reactjs(socketIo) and nodeJs. When I emit the message from frontend to server, it gets emitted only once, but when I emit it back from server to frontend, It gets emitted multiple times.

Frontend Code:

function handleChat(event) {
    event.preventDefault();
    socket.emit("newMessage", { message: msg, user: props.user.name });
    setMsg("");
  }
    socket.on("messageList", (list) => {
      console.log(list.message);
      var allMsg = messages
      allMsg.push({message: list.message.message, name: list.message.user})
      setMessages(allMsg);
  })

In the code above newMessage is the handler for emitting the message from frontend to server and messageList is the handler for message from the server(which is the issue).

Backend Code:

namespace.forEach((ns) => {
    io.of(`/${ns.name}`).on("connect", (socket1) => {
      // console.log(ns.name, socket1.id);
      socket1.on("name",(name)=>{
        console.log(name);
      })
      socket1.on("newMessage", (message) => {
        console.log(message);
        io.of(`/${ns.name}`).emit("messageList",{message})
      });
    });
  });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文