Блог

Я пытаюсь создать приложение для чата, которое использует базу данных реального времени с MongoDB и Websocket. Это мой первый проект React, MongoDB и Websocket, поэтому, пожалуйста, извините за возможные мелочи. : D

В настоящее время я работаю над созданием нового пользователя, обновлением базы данных и, наконец, отображением созданного пользователя в интерфейсе каждого пользователя в режиме реального времени.

Создание и сохранение нового пользователя работает нормально, а также регистрация данных нового пользователя в режиме реального времени после изменения базы данных (через socket.io) также работает. Теперь я хотел бы получить доступ к информации, измененной базой данных во интерфейсе моего приложения, чтобы я мог обновить неупорядоченный список пользователей.
Теперь есть проблема, которую я хотел бы решить:
я пытаюсь подключить интерфейс к своему бэкэнду, используя этот код:

 //...

import socketIOClient from "socket.io-client";
const ENDPOINT = "localhost:5000";

const MainContentArea = () => {

   useEffect(()=>{
       const socket = socketIOClient(ENDPOINT);
       socket.on("changes", data => {
           console.log(data);
       })
   });

//...
  

Ниже приведен мой внутренний код:

 const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const index = require('./routes/index');
const port = process.env.PORT || 5000;
const app = express();
app.use(index);

const server = app.listen(port, () => {
    console.log(`Server ist running on port: ${port}`);
})
const io = socketIo(server).listen(server);

const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config({
    path: './.env'
});

const Users = require('./models/user.model');

app.use(cors());
app.use(express.json());

const usersRouter = require('./routes/users');

app.use('/users', usersRouter);

const uri = process.env.ATLAS_URI;
mongoose.connect(uri, {
    
    useNewUrlParser: true,
    useCreateIndex: true,
    useUnifiedTopology: true

}, 

function(err){
    if(err){
        console.log("server.js err line 44");
        throw err;
    }

    io.on('connection', (socket) => {
        console.log('user connected');
        socket.on('disconnect', (socket) => {
            console.log('user disconnected');
        })
    })
    Users.watch().on('change', (change) => {
        console.log('socket says: something changed in db');
        console.log('change: ', change.fullDocument);
        io.to(change.fullDocument).emit('changes',change.fullDocument)
    })
}
);

const connection = mongoose.connection;
connection.once('open', () => {
    console.log("MongoDB database connection established successfully");
})
  

Я продолжаю получать сообщение об ошибке:
WebSocket connection to 'ws://localhost:5000/socket.io/? EIO=3amp;transport=websocketamp;sid=33wU6D8PnqclT3iZAAAB' failed: Error during WebSocket handshake: Unexpected response code: 400

Я использую Chrome и работаю на macOS.
Я очень благодарен за любые предложения, которые могут помочь решить мою проблему.

Я надеюсь, что то, как я разместил свой вопрос, полезно для всех, кто готов помочь мне в этом. Если нет, не стесняйтесь давать мне предложения о том, что делать лучше в следующий раз! Это мой первый пост здесь.