如何在2个不同的React应用程序中使用同一个数据库 [英] How to use a same DB with 2 different React applications

问题描述

我必须制作一个脱机应用程序，以便能够与另一个在线应用程序同步。

我使用PouchDB开发了脱机应用程序。我感谢github repo

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

  const db = new PouchDB（'PatientDB'，{skip_setup：true}）; 
 db.info（）
 .then（（）=> {
 console.log（ DBFOUND）
 db.allDocs（{include_docs：true}）
 .then（函数（结果）{
 console.log（ RESULT，结果）
}）。catch（函数（err）{
 console.log（ NOPE） 
 console.log（err）; 
}）; 
}）
  

我的问题是我无法在在线应用程序中获得使用离线应用程序创建的 PatientDB。当我执行 var db = new PouchDB（'PatientDB'）时，它会创建一个新的空数据库，因为它找不到已经存在的数据库。

我使用Google chrome来运行我的所有应用程序，因此我认为可以共享数据库。

但是我却很少做并使用两个HTML文件进行非常简单的测试：

First.html ，该操作会使用doc

<读取在First.html

中创建的数据库的strong> Second.html 。在这种情况下，即使两个是分开的，我也可以在Second.hmtl中获取用First.html创建的文档。网站。

我认为，在本地主机上运行的应用程序与其他应用程序类似，即使我之前说过，我使用的是同一浏览器对于我所有的应用程序...

我不知道该怎么办，或者我甚至不知道是否有可能做我想做的事。如果有人对我有个主意，我会很高兴。

---

编辑

我可以看到为什么不共享数据库的原因：

当我在运行html文件后查看所有本地数据库时，可以看到以下内容：

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

当我从运行localy（localhost）的应用程序中检查数据库时，可以看到以下内容：

数据库不是来自文件，而是来自 localhost：8080


如果您知道如何在服务器上运行的应用程序中从本地数据库中获取文档，那对我真的很有帮助！

解决方案

PouchDB在浏览器中使用IndexedDB，该浏览器遵循同源策略。 MDN这样说：

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

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

  var db = new PouchDB（'http：// localhost：5984 / PatientDB'）
  

作为替代方案，您可以使用CouchDB或IBM Cloudant（基本上是托管的CouchDB）

I have to make an offline application that sync with another online app when it can.

I developed the offline app using PouchDB. I create this app thanks to the github repo create-react-app. This app is running at localhost:3000. In this app, I create and manage a little DB named "patientDB".

I manage the db with the classical put method like we can see in the documentation:

var db = new PouchDB('patientDB')
db.put({
_id: '[e-mail]',
name: 'David',
age: 69
});

With the development tool for chrome given by PouchDB, I can see that the DB is working like I want (the documents are created):

The other application is another React application with a node server. During the development, this app is running at localhost:8080. In this app I try to fetch all the docs contained in the "patientDB" with the following code:

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

My problem is that I can't get the "patientDB" created with the offline app in the online app. When I do a var db = new PouchDB ('patientDB') it create a new and empty db because it can't find a db which is already present.

I use google chrome to run all my application so I thought that the dbs could be shared.

However I did little and very simple tests with two html files:

First.html which initialize a new db with a doc
Second.html which read the db create in First.html
In this case, I can fetch the doc created with First.html in Second.hmtl even if the are two separated "website".

I think that the application which run at a localhost are like isolated of the rest of the application even if, like I said before, I use the same browser for all my applications...

I don't know what to do or I don't know if it's even possible to do what I want to do. If someone has an idea for me, I would be pleased.

---

EDIT

I can see why my DBs are not shared:
When I look at all my local DBs after running an html file I can see the following thing :

As we can see, the DBs come from the files _pouch_DB_NAME - file://

When I check my DB from the application running localy (localhost), I can see this :

The DB don't come from file but from localhost:8080
If you know how I can fetch doc from a local db in an app running in a server, it could be really helpful for me!

解决方案

PouchDB is using IndexedDB in the browser, which adheres to a same-origin policy. MDN says this:

IndexedDB adheres to a same-origin policy. An origin is the domain, application layer protocol, and port of a URL of the document where the script is being executed. Each origin has its own associated set of databases. Every database has a name that identifies it within an origin.

So you have to replicate your local database to a central server in order to share the data. This could be a PouchDB Server together with your node app. You can also access PouchDB Server directly from the browser:

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

As an alternative, you can use CouchDB or IBM Cloudant (which is basically hosted CouchDB).

这篇关于如何在2个不同的React应用程序中使用同一个数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！