使用 React、React Router、Horizon.io 和 OAuth 构建实时应用程序
介绍
在本教程中，我们将构建一个应用程序，从头到尾展示如何将 React、React Router 和 Horizon.io 与 OAuth 身份验证集成。
该应用程序很简单。它只是实时存储和显示消息：
整个源代码可以在Github上找到。非常感谢Bartek Kus帮助我将代码更新到 Horizon 2.0。
要求
Horizon.io是一个基于RethinkDB构建的 Javascript 应用实时后端。如果你不了解这个 NoSQL 数据库，这里有一个教程可以了解它的工作原理。
首先，您需要安装 RethinkDB。它有适用于所有主要操作系统的软件包，以下是说明。
Horizon 是一个Node.js应用程序，因此您还需要安装 4.4 或更高版本的 Node.js 和 NPM。您可以在此处下载适合您平台的安装程序。
然后，通过执行以下命令安装 Horizon（全局）：
npm install -g horizon
我们将使用 Horizon 的 2.0.0 版本，如果您需要/想要指定此版本，请执行此命令：
npm install -g horizon@2.0.0
关于React，您不需要成为一名专家即可学习本教程，但您需要具备一些有关组件以及该库如何工作的基本知识。
现在我们已经准备好一切，让我们开始吧。
创建 Horizon 应用
首先，执行以下命令：
hz init react-horizon
这将在目录react-horizon中创建一个具有以下结构的 Horizon 应用程序：
.hz
|- config.toml
|- schema.toml
|- secret.toml
dist
|- index.html
src
.gitignore
.hz/config.toml是Horizon 服务器的TOML主配置文件。
.hz/schema.toml可选用于数据库模式和权限。
.hz/secret.toml指定身份验证信息和令牌秘密。
您可以在此处了解有关这些配置文件的更多信息。
dist是存储公共文件和静态文件的目录。
src是存储客户端代码的目录。
.gitignore包含以下内容：
rethinkdb_data
**/*.log
.hz/secrets.toml
对于身份验证，Horizon 要求我们使用https，因此我们需要 SSL 证书。幸运的是，Horizon 附带了一个创建自签名证书的工具（你只需要安装OpenSSL），因此cd进入此目录
cd react-horizon
为了保持井然有序，让我们创建一个目录来存储应用程序的所有配置文件并将cd放入其中：
mkdir config && cd config
现在创建一个目录来存储证书：
mkdir tls && cd tls
并执行命令：
hz create-cert
这将创建一个horizon-cert.pem和一个horizon-key.pem 。默认情况下，Horizon 将在启动安全服务器时在应用程序的根目录中查找这些文件。如果要更改这些文件的名称或位置（如我们的示例），请取消注释并更改.hz/config.toml文件的以下部分：
###############################################################################
# HTTPS Options
# 'secure' will disable HTTPS and use HTTP instead when set to 'false'
# 'key_file' and 'cert_file' are required for serving HTTPS
#------------------------------------------------------------------------------
# secure = true
# key_file = "horizon-key.pem"
# cert_file = "horizon-cert.pem"
到：
###############################################################################
# HTTPS Options
# 'secure' will disable HTTPS and use HTTP instead when set to 'false'
# 'key_file' and 'cert_file' are required for serving HTTPS
#------------------------------------------------------------------------------
secure = true
key_file = "config/tls/horizon-key.pem"
cert_file = "config/tls/horizon-cert.pem"
现在，在开发环境中启动服务器的命令是：
hz serve --dev
--dev选项将设置以下标志：
- --start-rethinkdb将自动启动 RethinkDB 服务器
- --secure no将启动不安全的服务器（无 SSL）
- --permissions no将禁用权限系统
- ----auto-create-collection和--auto-create-index如果表和索引不存在，则创建它们
- --server-static ./dist将dist配置为提供静态内容的目录
但是，由于我们将使用 HTTPS，我们需要重新定义安全选项，因此转到应用程序的根目录（cd ../..）并使用以下命令启动服务器：
hz serve --dev --secure yes
此命令的输出应类似于以下内容：
App available at https://127.0.0.1:8181
RethinkDB
├── Admin interface: http://localhost:46398
└── Drivers can connect to port 35109
Starting Horizon...
🌄 Horizon ready for connections
如果你访问 https://localhost:8181，你应该会看到以下内容（接受自签名证书的警告后）：
此外，RethinkDB 服务器将自动启动，并创建rethinkdb-data目录。当您转到 https://localhost:46398（或 Horizon 在控制台中提供的任何地址）时，然后转到Tables部分，您应该会看到以下内容：
如您所见，Horizon 创建了一个以项目名称命名的数据库，并存储有关集合、用户和组的元数据。此外，它还将存储应用程序中集合使用的数据。
设置 React
我们将使用 ECMAScript 2015，因此让我们通过创建配置文件来设置Babel将此语法转换为大多数浏览器可以理解的语法：
echo '{ "presets": ["react", "es2015", "stage-0"] }' > .babelrc
Babel 6.x 未启用任何转换，因此您需要使用预设明确告诉它要运行哪些转换。
前两个非常具有自我描述性。stage-x 预设是对语言的更改，尚未被批准作为 Javascript 发布的一部分。
TC39将提案分为 4 个阶段：
- stage-0 - Strawman：只是一个想法，可能的 Babel 插件。
- 第一阶段 – 提案：这是值得努力的。
- stage-2 – 草稿：初始规范。
- 第三阶段 – 候选：完整规范和初始浏览器实现。
- stage-4-已完成：将会添加到下一个年度版本中。
stage-0包括所有级别的预设的所有插件。stage -1包括从预设 1 到 4 的所有插件，依此类推。
要执行 Babel 并将我们的脚本与其依赖项捆绑在一起，我们将使用Webpack和 npm。让我们使用以下命令安装 Webpack（全局）：
npm install -g webpack
<font st
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~