Как я могу передать данные с экспресс-сервера для реагирования на просмотры?

4

У меня есть простой экспресс-сервер с подключением к базе данных orientdb. Мне нужно передать информацию из выражения, чтобы реагировать на мнения. Например, в выражении я:

router.get('/', function(req, res, next) {
  Vertex.getFromClass('Post').then(
    function (posts) {
      res.render('index', { title: 'express' });
    }
  );
});

Итак, в этом примере мне нужно иметь в моей компоненте компонента реакции переменную posts, чтобы установить состояние компонента. (Я использую реакцию только в интерфейсе, а не на стороне сервера)

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  render() {
    return (
      <div>
        <Posts posts={posts} />
      </div>
    );
  }
}

Как я могу получить сообщения в ответ от express?

Я обнаружил, что, возможно, я могу выполнить запрос ajax от ответа, но я думаю, что это не лучший способ.

Если мне нужно получить эти сообщения в режиме реального времени, например, используя socket.io, каковы различия?

PD: В express у меня есть возможность использовать какой-то механизм шаблонов, например, руля или hogan. Могут ли эти шаблонные механизмы помочь в этом вопросе?

Спасибо!!!

  • 0
    Нет реакции на стороне сервера, ее можно использовать только в веб-интерфейсе
Теги:
express
socket.io

1 ответ

6
Лучший ответ

Я думаю, что ваш лучший вариант - действительно сделать какой-то сетевой запрос от клиента. Если вы хотите, чтобы приложение было простым и вам не нужна библиотека управления государственным управлением (например, Redux), вы можете сделать что-то вроде

class IndexPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      posts: []
    };
  }

  componentDidMount() {
    fetch('/') // or whatever URL you want
      .then((response) => response.json())
      .then((posts) => this.setState({
        posts: posts,
      });
  }

  render() {
    return (
      <div>
        <Posts posts={this.state.posts} />
      </div>
    );
  }
}

В вашем response должно быть JSON-представление коллекции сообщений.

Также обратите внимание на метод render и доступ к posts.

Подробнее о API-интерфейсе Fetch см. MDN (также обратите внимание, что для него вам понадобится polyfill для старых браузеров).

РЕДАКТИРОВАТЬ: Для socket.io я бы где-то сохранил его экземпляр и передал его в качестве опоры для компонента. Тогда вы можете сделать что-то вроде

class IndexPage extends React.Component {
  ...
  componentDidMount() {
    this.props.socket.on('postReceived', this.handleNewPost);
  }
  handleNewPost = (post) => {
    this.setState({
      posts: [
        ...this.state.posts,
        post,
      ],
    });
  }
  ...
}

Части сервера похожи, см., например, пример Socket.io Chat.

Поделиться
  • 1
    Спасибо! И если мне нужно сделать это в режиме реального времени, есть некоторые функции, такие как fetch в socket.io? Или это совсем другой способ в реальном времени? Что насчет сервера, то же самое
  • 0
    Продолжая последний комментарий ...
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню