Как добавить реагент в Node JS API

У меня есть простое приложение Node JS, которое обслуживает API. Я могу node main.js запустить сервер и вызвать localhost:3000/api/names, чтобы успешно получить список имен. Я хочу развить это с помощью Reagent/Cljs.

Я могу запустить приложение Reagent на localhost:3030. Моя проблема в том, как мне сделать вызовы API к приложению Node из приложения Reagent? Или моя архитектура неверна? Должен ли я объединить два приложения, и если да, то как?

Я пытался их объединить, но Reagent хочет работать на кольце, а приложение Node — на сервере узла. Так что у меня до сих пор нет связи между ними. Я пытался просмотреть руководство по быстрому запуску, но это не совсем Такая же ситуация. Я также дал этому подходу отказ от воспользоваться. Как проще всего собрать эти части вместе, чтобы я мог передать данные ответа API из приложения Node в приложение Reagent? Или есть способ сделать вызовы API из приложения Reagent, которого мне не хватает?


reactjs node.js clojurescript reagent
person jmargolisvt    schedule 06.02.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Да, вам нужно обмениваться данными между кодом, работающим в браузере, и кодом, работающим на сервере.

Основной подход заключается в использовании XHR. Клиент должен сделать что-то вроде этого:

(ns foo
  (:require [goog.net.XhrIo :as xhr]))

(xhr/send "/api/names"
          (fn [e]
            (prn (.. e -target getResponseText))))

В качестве альтернативы есть очень широко используемая библиотека https://github.com/r0man/cljs-http.

 (ns foo
  (:require
    [cljs.core.async :refer [<!]]
    [cljs-http.client :as http])
  (:require-macros
    [cljs.core.async.macros :refer [go]]))

(go (let [response (<! (http/get "data.edn"))]
      (prn (:status response))
      (prn (:body response))))

Он использует core.async для возврата результатов вам по каналу. Вам действительно не нужно заботиться об этом, чтобы использовать его, за исключением того, что вещи в блоках go произойдут «позже».

Для расширенного использования вы можете создавать веб-сокеты с помощью sente.

Одним из важных соображений, касающихся веб-страниц, является то, что они могут выполнять XHR только с тем же хостом на том же порту, который обслуживал страницу. Поэтому, если вы размещаете свой API на локальном хосте: 3030, то страница должна обслуживаться с локального хоста: 3030, чтобы вы могли с ней общаться. (Это называется одинаковой политикой происхождения).

В своем вопросе вы указали, что у вас есть API на порту 3000, а приложение Reagent обслуживается с 3030. Это не будет работать из-за той же политики происхождения. Существует стандарт под названием CORS Cross Origin Resource Sharing, который технически вы можете использовать, но на практике просто не делайте этого. Вместо этого обслуживайте HTML/Javascript с того же сервера, что и API.

Для вас это означает, что вам нужно быть уверенным, что при создании приложения Reagent HTML-страница, содержащая окончательный код JavaScript, должна обслуживаться тем же сервером, который обслуживает ваш API. Обычно это вопрос размещения HTML и JavaScript в папке ресурсов на сервере.

person Timothy Pratley    schedule 06.02.2016