node.js - How to connect a socket correctly to an app

Question

I tried many ways but nothing worked, I want to get my post from my database so when a user adds a post to my post list gets updated dynamically so I want it to be a real-time app with socket

I have set socket in my server file like this

    const http = require('http');
    const express = require('express');
    const socketio = require('socket.io');
    const connectDB = require('./config/db');
    const app = express();
    const server = http.createServer(app);
    const io = socketio(server);
    const PORT = process.env.PORT;
    // Connect Database
    connectDB();

    // Init Middelware
    app.use(express.json({ extended: false }));

    // app.get('/', (req, res) => {
    //   res.send('Api running');
    // });

    // connect to socket
    io.on('connection', (socket) => {});

    // set io as const to be able to use it in another route
    app.use(function (req, res, next) {
      req.io = io;
      next();
    });
    // Define Route
    app.use('/api/users', require('./routes/api/user'));
    app.use('/api/auth', require('./routes/api/auth'));
    app.use('/api/posts', require('./routes/api/post'));
    app.use('/api/profile', require('./routes/api/profile'));
    app.use('/api/friend', require('./routes/api/friends'));

    server.listen(PORT, () => console.log(`Server listen on port ${PORT}`));

I have my route in another file

    router.get('/', auth, async (req, res) => {
      try {
        let friendList = await Friends.findOne({ user: req.user.id });

        let postitem = await Post.find({ user: req.user.id }).sort({
          date: -1,
        });

        if (!postitem) {
          return res.status(400).json({ msg: 'No post Found! Start now' });
        }

        if (friendList) {
          if (friendList.friends.map((item) => item.posts).length > 0) {
            friendList.friends.forEach(async (friend) => {
              const friendPost = await Post.find({
                user: friend.user,
              });

              if (friendPost.length > 0) {
                friendPost.map((item) => {
                  postitem.unshift(item).sort({
                    date: -1,
                  });
                });
                // socket.emit('postArray', console.log('this is my data one'));
                res.json(postitem);
              }
              // socket.emit('postArray', console.log('this is my data two'));
              res.json(postitem);
            });
          }
        } else {
          // const myData = res.json(postitem);
          // socket.emit('postArray', postitem);
          res.json(postitem);
        }
        // await update.save();
      } catch (err) {
        console.error(err.message);
        res.status(400).send('Server Error');
      }
    });

and this is my action that gets fired when I open my app

    // Get posts
    export const getPosts = () => async (dispatch) => {
      try {
        const res = await axios.get('/api/posts');

        dispatch({
          type: GET_POSTS,
          payload: res.data,
        });
      } catch (err) {
        dispatch({
          type: POST_ERROR,
          payload: { msg: 'No Posts found' },
          // payload: { msg: err.response.statusText, status: err.response.status },
        });
      }
    };

and this is the component that I use to show my post

    const TimeLine = ({ getPosts, posts: { loading, posts } }) => {
      useEffect(() => {
        getPosts();
      }, []);
      return loading ? (
        <Spinner />
      ) : (
        <section className='container'>
          <h1 className='larget text-primary'>Time line</h1>
          <p className='lead'>
            <i className='fas fa-user'></i> Welecome to the community
          </p>
          <PostfForm />

          <div className='posts'>
            <Alert />
            {posts.map((post) => (
              <PostItem key={post._id} post={post} />
            ))}
          </div>
        </section>
      );
    };

    TimeLine.propTypes = {
      getPosts: PropTypes.func.isRequired,
      posts: PropTypes.object.isRequired,
    };

    const mapStateToProps = (state) => ({
      posts: state.posts,
    });

    export default connect(mapStateToProps, { getPosts })(TimeLine);

标签： node.jsreactjsecmascript-6socket.ioreact-redux