Question

我正在开发一个聊天应用程序，最终我必须使用socket.io实现websockets，以便在收到新消息后立即更新两个用户之间的聊天记录。

我想要的是每次将新消息发送到服务器时更新Chat.js中的。

聊天有效。每当我知道有新消息时，我都必须刷新它。

目前，通过简单的提取即可获取邮件。

我不知道从哪里开始。

先谢谢了。

我有一个server.js：

require('dotenv').config();
const express = require('express');
const mongoose = require('mongoose');

mongoose.connect(`mongodb://${process.env.MONGO_HOSTNAME}:${process.env.MONGO_PORT}/fiddle`, {
  useNewUrlParser: true,
  useUnifiedTopology: true
});
const db = mongoose.connection;
db.on('error', error => console.error(error));
db.once('open', () => console.log('Connected to DB'));

const app = express();

app.use(express.json());

const chatsRouter = require('./lib/chats');
app.use('/api', chatsRouter);

app.listen(8080, () => {
  console.log('Server ready on http://localhost:8080');
});

以及我的路线的chats.js，其中定义了一个聊天消息的路径

    const express = require('express');
const router = express.Router();
const mongoose = require('mongoose');

//Get messages of one chat
router.get('/:id/messages', getChat, async (request, response) => {
  response.send(response.chat.messages);
});


  } catch (error) {
    console.log(error);
    return response.status(500).json({ message: error.message });
  }
  response.chat = chat;
  next();
}
module.exports = router;

我的聊天看起来像这样：

    export default function Chat(props) {
  const chatId = props.match.params.id;
  const userName = localStorage.getItem('userName');
  const chatInformation = useGetChatInformation(chatId);
  const messages = useGetChatMessages(chatId);
  console.log(chatInformation);
  console.log(messages);

  function pickPartnerName(userName, user1, user2) {
    if (userName === user1) {
      return user2;
    } else {
      return user1;
    }
  }

  return (
    <ChatPage>
      <HeaderBar>
        <Link to={`/chatlist?userName=${localStorage.getItem('userName')}`}>
          <BackButton />
        </Link>
      </HeaderBar>
      <HeadlineBar>
        <PageHeadline
          headline={pickPartnerName(userName, chatInformation.user1, chatInformation.user2)}
        />
      </HeadlineBar>
      <ChatHistory>
       //HUGE_MAP_FUNCTION_NOT_NECESSARY_FOR_HERE
      </ChatHistory>
      <FooterBar>
        <MessageInput chatId={chatId} author={localStorage.getItem('userName')} />
        <FiddleButton />
      </FooterBar>
    </ChatPage>
  );
}

简单的socket.io在客户端更新聊天消息

0 个答案: