如何使用具有2个不同React应用程序的相同DB

时间:2017-08-22 08:38:29

标签: javascript reactjs web pouchdb

我必须制作一个与其他在线应用同步的离线应用程序。

我使用PouchDB开发了离线应用。由于github repo create-react-app,我创建了这个应用程序。这个应用程序在localhost:3000上运行。在这个应用程序中,我创建并管理了一个名为" patientDB"。

的小数据库

我使用经典的put方法管理数据库,就像我们在文档中看到的那样:

var db = new PouchDB('patientDB')
db.put({
_id: 'dave@gmail.com',
name: 'David',
age: 69
});

使用PouchDB提供的chrome开发工具,我可以看到数据库工作正常(文档已创建):

Db overview

其他应用程序是另一个带有节点服务器的React应用程序。在开发过程中,此应用程序在localhost:8080上运行。 在这个应用程序中,我尝试获取" patientDB"中包含的所有文档。使用以下代码:

const db = new PouchDB('patientDB', { skip_setup: true });
    db.info()
    .then(() => {
    console.log("DBFOUND")
    db.allDocs({include_docs: true})
    .then(function (result) {
      console.log("RESULT" , result)
    }).catch(function (err) {
      console.log("NOPE")
      console.log(err);
    });
    })

我的问题是我无法获得" patientDB"使用在线应用中的离线应用创建。当我执行var db = new PouchDB ('patientDB')时,它会创建一个新的空数据库,因为它无法找到已经存在的数据库。

我使用谷歌浏览器运行我的所有应用程序,所以我认为可以共享dbs。

然而,我使用两个html文件进行了一些非常简单的测试:

First.html ,用文档初始化新数据库 Second.html ,用于读取First.html中的数据库 在这种情况下,我可以获取在Second.hmtl中使用First.html创建的文档,即使它们是两个分开的"网站"。

我认为在本地主机上运行的应用程序就像隔离了应用程序的其余部分一样,即使像我之前说过的那样,我使用相同的浏览器来处理所有应用程序...

我不知道该怎么做,或者我不知道是否有可能做我想做的事。如果有人对我有所了解,我会很高兴。

<小时/> 的修改

我可以看到为什么我的数据库不共享:
当我在运行html文件后查看所有本地数据库时,我可以看到以下内容:
local db

我们可以看到,数据库来自文件_pouch_DB_NAME - file://

当我从运行localy(localhost)的应用程序检查我的数据库时,我可以看到:
db from localhost

数据库不是来自档案,而是来自localhost:8080
如果你知道我如何从服务器上运行的应用程序中的本地数据库中获取文档,那对我来说真的很有帮助!

1 个答案:

答案 0 :(得分:1)

PouchDB在浏览器中使用IndexedDB,它遵循同源策略。 MDN says this:

  

IndexedDB遵循同源策略。源是正在执行脚本的文档的URL,应用程序层协议和端口。每个来源都有自己的相关数据库集。每个数据库都有一个名称,用于在原点内标识它。

因此,您必须将本地数据库复制到中央服务器才能共享数据。这可能是您的节点应用程序PouchDB Server。您也可以直接从浏览器访问PouchDB服务器:

var db = new PouchDB('http://localhost:5984/patientDB')

作为替代方案,您可以使用CouchDB或IBM Cloudant(基本上托管CouchDB)。