Javascript 聊天应用程序如何知道用户何时发送要重新呈现的消息？

我需要使用WebSocket吗？我正在使用MySQL创建一个react应用程序，我希望它基本上是一个聊天应用程序。我可以让它在我使用的浏览器中重新渲染，但如果我打开另一个选项卡并键入消息，我的应用程序将不会重新渲染。有没有简单的方法来解决这个问题，或者我应该使用WebSocket？这是我的密码

app.js

 useEffect(() => {
    console.log('use effect is in use.');
    fetch(`http://localhost:4000/getallmessages`)
      .then((data) => data.json())
      .then((messages) => {
        setGetAllMessages(messages);
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  return (
    <div className={classes.AppContainer}>
      {loggedIn ? (
        <>
          {loginMessage ? setIntervalMessage() : null}
          {loginMessage ? (
            <h3 className={classes.SuccessMessage}>
              {loginMessage.successMessage}
            </h3>
          ) : null}

          <Chatroom
            user={user}
            getAllMessages={getAllMessages}
            setGetAllMessages={setGetAllMessages}
          />
        </>
      ) : (
        <>
          <Login
            setSignInPassword={setSignInPassword}
            setSignInUsername={setSignInUsername}
            login={login}
            signInPassword={signInPassword}
            signInUsername={signInUsername}
          />

          {loginErrorMessage ? (
            <p className={classes.ErrorMessage}>
              {loginErrorMessage.errorMessage}
            </p>
          ) : null}

          <Signup
            setUsername={setUsername}
            setPassword={setPassword}
            createUsername={createUsername}
            username={username}
            password={password}
          />
          {signup ? <p>{signup.message}</p> : null}
          {signupError ? <p>{signupError.errors[0].msg}</p> : <p></p>}
        </>
      )}
    </div>
  );
};

和控制器

exports.getAllUsers = async (req, res, next) => {
  User.findAll()
    .then((user) => {
      if (!user) {
        res.json({ message: 'oops no users' });
        return next();
      }
      res.json({ messages: user });
      console.log(user);
    })
    .catch((err) => {
      console.log(err);
    });
};

exports.getAllMesssages = (req, res, next) => {
  Message.findAll()
    .then((messages) => {
      if (!messages) {
        console.log('oops no messages');
        res.json({ message: 'oops no messages' });
        return next();
      }
      console.log(messages);
      res.json({ message: messages });
    })
    .catch((err) => {
      console.log(err);
    });
};

exports.getUser = (req, res, next) => {
  Message.findAll({ where: { userId: req.params.userid } })
    .then((userAndMessage) => {
      if (!userAndMessage) {
        res.json({ message: 'oops something went wrong.' });
        return next();
      }
      console.log(userAndMessage);
      res.json({ message: userAndMessage, user: userAndMessage });
    })
    .catch((err) => {
      console.log(err);
      return err;
    });
};

exports.postSendMessage = (req, res, next) => {
  const message = req.body.userMessage;
  const userId = req.params.userid;
  console.log(req.params);
  Message.create({
    message: message,
    userId: userId,
  })
    .then((message) => {
      console.log(message);
      res.json({ message: 'success!', message: message });
    })
    .catch((err) => {
      console.log(err);
      res.json({ message: 'something went wrong.' });
    });
};

---

我建议使用web套接字或MQTT，使用MQTT时，您需要连接到诸如Mosquito或CloudMQTT之类的代理才能订阅主题。然后，您可以在React应用程序中实现逻辑，在消息到达时更新状态，这将导致页面重新呈现。如果你采用这种方法并建立一个客户机，我也会这样做

下面是一个片段，让您了解一下：

const[message，setMessage]=useState（“”）；
const client=new Paho.MQTT.client（location.hostname，Number（location.port），“clientId”）；
//设置回调处理程序
client.onMessageArrived=onMessageArrived；
//消息到达时调用
const onMessageArrived=（消息）=>{
setMessage（message.payloadstring）；
}

router.get('/getallusers', chatroomController.getAllUsers);
router.get('/getallmessages', chatroomController.getAllMesssages);
router.get('/getuser/:user/:userid', chatroomController.getUser);

router.post(
  '/createuser',
  body('username')
    .isLength({ min: 3 })
    .withMessage('oops username must be at least 3 characters in length'),
  body('password')
    .isLength({ min: 5 })
    .withMessage('oops password must have 5 characters'),
  authController.createUser
);

router.post(
  '/signin',
  body('signInUsername')
    .isLength({ min: 3 })
    .withMessage('oops username needs at least 5 characters'),
  body('signInPassword')
    .isLength({ min: 5 })
    .withMessage('oops password needs to be at least 5 characters'),
  authController.postSignin
);

router.post('/sendmessage/:userid', chatroomController.postSendMessage);

exports.getAllUsers = async (req, res, next) => {
  User.findAll()
    .then((user) => {
      if (!user) {
        res.json({ message: 'oops no users' });
        return next();
      }
      res.json({ messages: user });
      console.log(user);
    })
    .catch((err) => {
      console.log(err);
    });
};

exports.getAllMesssages = (req, res, next) => {
  Message.findAll()
    .then((messages) => {
      if (!messages) {
        console.log('oops no messages');
        res.json({ message: 'oops no messages' });
        return next();
      }
      console.log(messages);
      res.json({ message: messages });
    })
    .catch((err) => {
      console.log(err);
    });
};

exports.getUser = (req, res, next) => {
  Message.findAll({ where: { userId: req.params.userid } })
    .then((userAndMessage) => {
      if (!userAndMessage) {
        res.json({ message: 'oops something went wrong.' });
        return next();
      }
      console.log(userAndMessage);
      res.json({ message: userAndMessage, user: userAndMessage });
    })
    .catch((err) => {
      console.log(err);
      return err;
    });
};

exports.postSendMessage = (req, res, next) => {
  const message = req.body.userMessage;
  const userId = req.params.userid;
  console.log(req.params);
  Message.create({
    message: message,
    userId: userId,
  })
    .then((message) => {
      console.log(message);
      res.json({ message: 'success!', message: message });
    })
    .catch((err) => {
      console.log(err);
      res.json({ message: 'something went wrong.' });
    });
};