问题描述
我正在尝试创建一个聊天应用程序,该应用程序使用带有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=3&transport=websocket&sid=33wU6D8PnqclT3iZAAAB' Failed: Error during WebSocket handshake: Unexpected response code: 400
我正在使用Chrome,并且正在MacOS上工作。
非常感谢您提出的可能有助于解决我的问题的建议。
我希望我的问题发表方式对愿意帮助我的人有所帮助。如果没有,请随时给我建议下一次更好的方法!这是我在这里的第一篇文章。
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)