使用 React 和 GunDB 设置去中心化数据库

本周早些时候，我们讨论了去中心化应用程序及其对网络未来可能产生的影响。我不确定 Codesphere 的同事是否意外地被赋予了预言的力量，但就在我们发表文章几个小时后，Facebook 就向全世界发出了关于中心化基础设施危险的强烈警告：DNS 错误导致其所有服务关闭了近 24 小时。

去中心化应用的一大优势在于，这类基础设施故障的发生率会大幅降低。虽然构建 dApp 可能感觉像是一项艰巨的任务，但实际上并非难事。

在本教程中，我们将使用 React 和 GunDB 构建一个去中心化的 Google Docs 克隆。

GunDB 是一款易于使用的点对点去中心化数据库，它允许您将数据存储在单个用户网络上，而不是单个服务器上。应用网络中的每个对等节点都会存储一定量的 Web 应用数据，但总体而言，整个网络将包含所有必要的信息。

虽然这种去中心化数据存储方法与区块链有很多相似之处，但需要注意的是，它是一项独立的技术。事实上，与区块链一样，去中心化数据库也是计算机科学研究的热门话题。您可以在此处了解更多关于 GunDB 的信息：

虽然我们的数据库理论上可以在没有任何额外服务器的情况下运行，但这需要足够数量的用户来确保您始终可以访问网络中的足够节点。

为了解决这个问题，我们将托管我们自己的中继点，即使没有其他人使用该应用程序，用户也可以连接到该中继点。

在数据格式方面，我们数据库中的每个节点都会有一个“灵魂”，即其唯一标识符，然后数据以标准 JSON 格式存储。

对于我们的中继节点，我们将创建一个使用 GunDB npm 包的简单快速服务器。

使用以下命令在新的 npm 项目中安装它们：

npm install express gun

对于我们的节点，我们只需要一个包含以下代码的文件：

	const express = require('express')
	const Gun = require('gun')

	const app = express()
	const port = 8000
	app.use(Gun.serve)

	const server = app.listen(port, () => {
	console.log("Listening at: http://localhost://" + port)
	})

	Gun({web: server})

view raw server.js hosted with ❤ by GitHub

	const express = require('express')
	const Gun = require('gun')

	const app = express()
	const port = 8000
	app.use(Gun.serve)

	const server = app.listen(port, () => {
	console.log("Listening at: http://localhost://" + port)
	})

	Gun({web: server})

view raw server.js hosted with ❤ by GitHub

这将创建我们的快速服务器并使用 Gun 进行设置。

请记住，在本例中，我们所有操作都在本地运行，但对于生产级应用，您需要将其部署到云端。我们推荐使用Codesphere来轻松部署和配置您的中继节点。

接下来，我们将创建一个 React App，用于与文本框以及网络中的其他节点进行交互。再次确保安装了 Gun，然后我们可以在相关组件中执行以下操作：

	import './App.css';
	import Gun from 'gun'
	import {useEffect, useState} from 'react'

	const gun = Gun({
	peers: ['http:localhost:8000/gun'] // Put the relay node that you want here
	})

	function App() {

	const [txt, setTxt] = useState()

	useEffect(() => {

	gun.get('text').once((node) => { // Retrieve the text value on startup
	console.log(node)
	if(node == undefined) {
	gun.get('text').put({text: "Write the text here"})
	} else {
	console.log("Found Node")
	setTxt(node.text)
	}
	})

	gun.get('text').on((node) => { // Is called whenever text is updated
	console.log("Receiving Update")
	console.log(node)
	setTxt(node.text)
	})
	}, [])

	const updateText = (event) => {
	console.log("Updating Text")
	console.log(event.target.value)
	gun.get('text').put({text: event.target.value}) // Edit the value in our db
	setTxt(event.target.value)
	}

	return (
	<div className="App">
	<h1>Collaborative Document With GunJS</h1>
	<textarea value = {txt} onChange = {updateText}/>
	</div>

	);
	}

	export default App;

view raw App.js hosted with ❤ by GitHub

	import './App.css';
	import Gun from 'gun'
	import {useEffect, useState} from 'react'

	const gun = Gun({
	peers: ['http:localhost:8000/gun'] // Put the relay node that you want here
	})

	function App() {

	const [txt, setTxt] = useState()

	useEffect(() => {

	gun.get('text').once((node) => { // Retrieve the text value on startup
	console.log(node)
	if(node == undefined) {
	gun.get('text').put({text: "Write the text here"})
	} else {
	console.log("Found Node")
	setTxt(node.text)
	}
	})

	gun.get('text').on((node) => { // Is called whenever text is updated
	console.log("Receiving Update")
	console.log(node)
	setTxt(node.text)
	})
	}, [])

	const updateText = (event) => {
	console.log("Updating Text")
	console.log(event.target.value)
	gun.get('text').put({text: event.target.value}) // Edit the value in our db
	setTxt(event.target.value)
	}

	return (
	<div className="App">
	<h1>Collaborative Document With GunJS</h1>
	<textarea value = {txt} onChange = {updateText}/>
	</div>

	);
	}

	export default App;

view raw App.js hosted with ❤ by GitHub

就这么简单，我们有一个可以运行的应用程序！

然后我们可以使用以下命令运行我们的 React 应用程序：
npm start

我们的节点中继脚本
node server.js

现在我们可以实时编辑这些内容。

完整的项目 repo 可以在这里访问。

这只是 GunDB 和去中心化 Web 技术所能实现的冰山一角。GunDB 在游戏、通信和 DeFi 等领域有着无数的应用。我们甚至还没有触及 Gun 所包含的数据存储、加密和 P2P 功能的表面。我建议您在此处查看完整文档：

与普遍的看法相反，去中心化和云技术并非互相排斥。当 dApp 刚刚起步发展时，利用云技术来最大化应用效率至关重要。

现在，当您选择提供商时，请抛弃大型科技公司，来看看我们在Codesphere上构建的内容，它是一个一体化代码编辑器、DevOps 工具包和云提供商！

祝您编码愉快！