How to use a same DB with 2 different React applications

问题

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: 'dave@gmail.com',
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!

回答1:

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).

来源：https://stackoverflow.com/questions/45812787/how-to-use-a-same-db-with-2-different-react-applications

标签

javascript

reactjs

web

pouchdb