Install and Initial

1
2
$ npx create-react-app rxdbdemo
$ npm install --save concurrently moment pouchdb-adapter-http pouchdb-adapter-idb pouchdb-server react-toastify rxdb rxjs serve

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
{
  "name": "rxdbdemo",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "concurrently": "^5.3.0",
    "moment": "^2.29.1",
    "pouchdb-adapter-http": "^7.2.2",
    "pouchdb-adapter-idb": "^7.2.2",
    "pouchdb-server": "^4.2.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3",
    "react-toastify": "^6.0.9",
    "rxdb": "^9.6.0",
    "rxjs": "^6.6.3",
    "serve": "^11.3.2"
  },
  "scripts": {
    "start": "concurrently \"npm run server\" \"react-scripts start\"",
    "server": "pouchdb-server -d ./db",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}
1
$ yarn start

會開啟一個本地的 db

可以透過 pounch-db

Create Schema

src/Schema.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const schema = {
  title: 'Anonymous chat schema',
  description: 'Database schema for an anonymous chat',
  version: 0,
  type: 'object',
  properties: {
    id: {
      type: 'string',
      primary: true
    },
    message: {
      type: 'string'
    }
  },
  required: ['message']
}

export default schema;

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
import React, { useEffect, useRef, useState } from "react";
import logo from "./logo.svg";
import "./App.css";
import 'react-toastify/dist/ReactToastify.css';
import { ToastContainer, toast } from "react-toastify";
import * as moment from "moment";
import * as RxDB from "rxdb";
import schema from "./Schema";

let localdb = null;
const dbName = "test";
const syncURL = "http://localhost:5984/";

RxDB.addRxPlugin(require("pouchdb-adapter-idb"));
RxDB.addRxPlugin(require("pouchdb-adapter-http"));

const createDatabase = async () => {
  try {
    const db = await RxDB.createRxDatabase({
      name: dbName,
      adapter: "idb",
      password: "12345678",
    });

    db.waitForLeadership().then(() => {
      document.title = "♛ " + document.title;
    });

    const messagesCollection = await db.collection({
      name: "messages",
      schema: schema,
    });

    messagesCollection.sync({ remote: syncURL + dbName + "/" });
    console.log("createDatabase -> messagesCollection", messagesCollection);

    return db;
  } catch (error) {
    console.log("createDatabase -> error", error);
  }
};

const addMessage = async (message, setNewMessage) => {
  console.log("addMessage -> localdb", localdb)
  const id = Date.now().toString();
  const newMessage = { id, message };

  await localdb.messages.insert(newMessage);

  setNewMessage("");
};

const renderMessages = (messages) =>
  messages.map(({ id, message }) => {
    const date = moment(id, 'x').fromNow();
    return (
      <div key={id}>
        <p>{date}</p>
        <p>{message}</p>
        <hr />
      </div>
    )
  });
function App() {
  let dbRef = useRef(null);
  const [messages, setMessages] = useState([]);
  const [subs, setSubs] = useState([]);
  const [newMessage, setNewMessage] = useState("");

  useEffect(() => {
    createDatabase().then((db) => {
      localdb = db;

      const sub = db.messages
        .find()
        .sort({ id: 1 })
        .$.subscribe((msgs) => {
          if (!msgs) return;
          toast("Reloading messages");
          setMessages(msgs);
        });
      setSubs([...subs, sub]);
    });

    return () => {
      subs.forEach((sub) => sub.unsubscribe());
    };
  }, []);
  return (
    <div className="App">
      <ToastContainer autoClose={3000} />
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>

      <div>{renderMessages(messages)}</div>

      <div id="add-message-div">
        <h3>Add Message</h3>
        <input
          type="text"
          placeholder="Message"
          value={newMessage}
          onChange={(env) => setNewMessage(env.target.value)}
        />
        <button onClick={() => addMessage(newMessage, setNewMessage)}>
          Add message
        </button>
      </div>
    </div>
  );
}

export default App;
License

本文採用 署名-非商業性使用-相同方式共享 4.0 國際 許可協議，轉載請註明出處。