Socket.io

Question

我正在使用 reactjs、nodejs、express 和 mongoDB 构建一个论坛应用程序，用户可以在其中创建帐户、登录，然后 post 一个 post 文本。我希望这个 post 立即显示给所有其他用户，因为我正在使用 socket.io 服务器。

如果您在 github 中检查我的整个项目，我将不胜感激：(https://github.com/darkpsinight/forum)

但是，每当用户登录或连接到应用程序时，我都会在套接字终端中得到此 null：

Connected user.✅
null

我试图调查此 null 消息，我发现 data 正在返回 null。

如何使 createdPostsocket 的数据 returns 数据代替 null ?

编辑：

createdPostsocket初始化为null，而我的catch语句returnsnull，所以要么我是 没有给 createdPostsocket 赋值 或者我在我的承诺中抛出了一个错误。

与此同时，我已经在已完成的案例中为 Slice 分配了一个值：

[createPost.fulfilled]: (state, action) => {
console.log(action.payload);
window.location.reload(false);
state.createdPostsocket= action.payload.data.data
}

也就是说createdPostsocket赋值为payload.data.data，对吧？

我的代码：

- 返回:

app.js（套接字服务器）

const io = require("socket.io")(4000, {
cors: {
    origin: "http://localhost:3000",
},
});


io.on('connection', (socket) => {
console.log('Connected user.✅');

socket.on('addPost', data => {
    console.log(data);     //returning null in terminal
    io.emit('newPost', data)
})

socket.on('disconnect', function (socket) {
    console.log('Disconnected user.⛔️');
});
});

- 前面:

postsSlice.js:

const initialState = {
posts: [],
createdPostsocket: null
};

const postsSlice = createSlice({
name: "posts",
initialState,

reducers: {},

extraReducers: {

    //Create http request 3 cases
    [createPost.pending]: (state, action) => {

    },

    [createPost.fulfilled]: (state, action) => {
        console.log(action.payload);
        window.location.reload(false);
        state.createdPostsocket= action.payload.data.data
    },

    [createPost.rejected]: (state, action) => {
        
    },
},
});
export const { } = postsSlice.actions;
export const selectPosts = (state) => state.posts
export default postsSlice.reducer;

index.jsx:

const posts = useSelector(selectPosts)
const socket = useRef()

useEffect(() => {
    socket.current = io("ws://localhost:4000")
}, [])

useEffect(() => {
    socket.current.emit("addPost", posts.createdPostsocket);
    console.log (posts.createdPostsocket)      //returning null in console developper
}, [posts.createdPostsocket])

postsAPI.js

import { axiosInstance } from "../../config/axios";
import { requests } from "../../config/requests";

//post service
export const PostsService = {

  // Create post request
  create: (data) => {
    console.log(data);
    return axiosInstance
      .post(requests.postapi.create, data, { credentials: "include" })
      .then((res) => {
        return res;
      })
      .catch((err) => {
        return err;
      });
  },
};

- 返回:

controller.js:

module.exports = {
create: (req, res) => {
    const data = {
        user: req.user.sub,
        text: req.body.text,
        /* image: req.file && req.file.filename */
    }

    console.log(data)    //returning user and text

    const t = new post(data)
    t.save().then(t => t
        .populate('user')
        .then(post => {
            res.status(200).json({
                message: 'post created',
                data: post
            })
        })
        .catch(err => {
            res.status(500).json({
                message: 'post not created',
                data: null
            })
        })
    )
},

}

Answer 1

删除 window.location.reload(false); 这样您就不会丢失数据。 window.location.reload(false); 将重新加载您的页面并删除所有数据。但是不建议使用 vanilla JavaScript 调用 reload 方法来告诉浏览器重新加载当前页面，你会丢失任何数据。

Socket.io - 终端返回数据为 "null"

Socket.io - Terminal returning data as "null"

reactjs

我正在使用 reactjs、nodejs、express 和 mongoDB 构建一个论坛应用程序，用户可以在其中创建帐户、登录，然后 post 一个 post 文本。我希望这个 post 立即显示给所有其他用户，因为我正在使用 socket.io 服务器。

编辑：