如何将Reagent添加到Node JS API

时间:2016-02-06 15:06:40

标签: node.js reactjs clojurescript reagent

我有一个简单的Node JS应用程序,它提供API。我可以node main.js让服务器运行并调用localhost:3000/api/names来成功获取名称列表。我想用Reagent / Cljs来构建它。

我可以在localhost:3030上运行试剂应用程序。我的问题是,如何从Reagent应用程序对Node应用程序进行API调用?或者我的架构都错了?我应该合并这两个应用程序,如果是这样,怎么样?

我尝试过将它们组合在一起,但是Reagent希望在Ring上运行,而Node应用程序想要在节点服务器上运行。所以我两人之间仍然没有沟通。我试过通过the Quick Start指南,但情况并不完全相同。我也给了this approach一个无用的东西。将这些部分组合在一起的最简单方法是什么,以便我可以将Node响应数据从Node应用程序带到Reagent应用程序?或者有没有办法从我失踪的试剂应用程序中调用API调用?

1 个答案:

答案 0 :(得分:1)

是的,您需要在浏览器中运行的代码与服务器上运行的代码之间进行通信。

基本方法是使用XHR。客户应该做这样的事情:

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

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

或者,有一个非常广泛使用的库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

创建websockets

网页的一个重要考虑因素是它们只能在服务页面的同一端口上使用相同的主机执行XHR。因此,如果您在localhost:3030上托管您的API,则必须从localhost:3030提供该页面,以便您能够与其进行通信。 (这被称为相同的原始政策)。

您在问题中说明您的端口3000上有您的API,而且从3030开始提供Reagent应用程序。由于原始政策相同,这将无效。有一个名为CORS Cross Origin Resource Sharing的标准,从技术上讲你可以使用,但实际上不要这样做。而是从与API相同的服务器提供HTML / Javascript。

这对您来说意味着您需要确保在构建Reagent应用时,包含最终JavaScript的HTML页面需要由为您的API提供服务的同一服务器提供服务。通常,这是将HTML和JavaScript放入服务器上的资源文件夹中的问题。