использовать сокет, чтобы обновлять мои сообщения в реальном времени - PullRequest
Новая
       19

использовать сокет, чтобы обновлять мои сообщения в реальном времени

0 голосов
/ 07 апреля 2020

в моем веб-приложении есть опция создания поста, но у другого пользователя не может быть обновления для поста из моей базы данных, пока они не обновят sh страницу, но я не хочу делать это так, как хочу, когда пользователь другие пользователи получают это обновление в режиме реального времени, поэтому я пытаюсь использовать сокет для этого, но я использую его впервые, поэтому я не знаю, как это сделать, так что если кто-нибудь может мне помочь

=> это мой код реагирования, и, как вы видите при использованииEffect, функция, которая получает все мои сообщения из базы данных, - это getposts () 

import React, { Fragment, useEffect } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getPosts } from '../../action/post';
import { Spinner } from '../spinner/Spinner';
import PostItem from './PostItem';
import Alert from '../layout/Alert';
import PostfForm from './PostfForm';
import io from 'socket.io-client';

let socket;

const TimeLine = ({ getPosts, posts: { loading, posts } }) => {
  const ENDPOINT = 'localhost:3000';
  useEffect(() => {
    socket = io('localhost:3000');
    getPosts();
    socket.emit('get post', () => {
      getPosts();

    });
  }, [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);

=> это мой express сервер 

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);

// Connect Database
connectDB();

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

const PORT = process.env.PORT;

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

// socket connection
io.on('connection', (socket) => {
  console.log('New client connection');
  socket.on('get post', (callback) => {
    console.log(callback);
  });
  socket.on('disconnect', () => {
    console.log('Client disconnected');
  });
});

// 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}`));

=> это функция getposts () в моем файле действий, я использую redux 

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: err.response.statusText, status: err.response.status },
    });
  }
};
...