如何建立視訊聊天應用程式

就在前几天，我看到了菲尔-纳什（Phil Nash）写的这篇很棒的 Twilio 教程，其中介绍了如何使用 React Hooks 制作视频聊天，因此我决定在Back4app上运行它，因为它是免费的，非常棒，而且可以与 Parse 集成，这样我就可以拥有免费的虚拟主机（包括免费的 back4app 子域），托管我的应用程序，并使用实时数据传输在将来加入聊天功能。
这篇文章将详细介绍我是如何实现这一功能的。

第一件事

我强烈建议您通读菲尔的文章，先在您的机器上运行，然后再在网上运行。

您需要具备 NodeJS、React 和 Express 的最低限度知识才能继续。我将解释我所采取的步骤及其原因，但如果你不熟悉这些技术，你可能无法确切理解为什么需要这些技术。

第一步 – 您需要什么

Phil 的文章指出，您需要安装并运行Node.js 和 NPM。我的系统中已经安装了这些，所以请确保你也安装了。

此外，您还需要一个 Twilio 账户，创建一个免费账户就可以了。

第二步 – 开始

第一步，克隆版本库，对我来说不起作用。命令 Phil 说

git clone -b twilio [email protected]:philnash/react-express-starter.git twilio-video-react-hooks

给了我一些错误，最后，这个方法对我很有效：

git clone https://github.com/philnash/twilio-video-react-hooks.git

有了这一点，其他命令都执行得很好：

cd twilio-video-react-hooks
npm 安装

结果

如果在本地运行，则必须按照 Phil 文章中的说明设置 env 文件，但由于这里的重点是在 Back4app 中运行，所以我暂时跳过这一步骤。
我们仍然需要 Twilio 账户中的 TWILIO_API_KEY、TWILIO_API_SECRET 和 TWILIO_ACCOUNT_SID 值，但我们将在不同的地方使用这些值。

稍微修改一下代码

由于我们的架构不同，我们需要改变一些关键的东西。

首先是 NPM 模块。上面的 npm install 命令会在你的电脑上安装这些模块，但在 Back4app 中，你需要告诉 Parse 帮你安装这些模块。

我们有一个很好的教程来解释如何操作，请点击这里查看。

最后，我的 package.json 文件变成了这样：

{ 
   "依赖"：{
           "express-pino-logger"："*",
           "twilio"："*"  
   } 
}

请注意，我安装的是 Twilio 模块的最新版本（”*”表示最新）。这时你可能会问我为什么要这么做，因为 Parse 已经在堆栈中内置了 Twilio 模块：

原因就在于版本控制。出于兼容性考虑，每个 Parse 版本都有特定版本的模块堆栈，这些模块可能适用于你的具体情况，也可能不适用。要使用堆栈中未列出的版本，我们可以在 package.json 文件中指定正确的版本，确保 Parse 安装正确的版本。

让我们建造它

为了进行部署，我们必须创建代码的运行优化版本。在 Phil 的文章中，他指出我们应该运行：

npm run dev

在本地环境下可以运行，但在我们的情况下，我们将从项目目录内运行：

npm run build

将生成一个名为 build 的新文件夹，其中包含我们的所有资产：

然后，我们将把构建文件夹中的所有内容上传到云代码部分的公共文件夹中。

有不同的上传方法。您可以通过浏览器手动上传，但我更喜欢使用Back4app CLI为我部署一切。这样速度更快，而且可以确保一切就绪。

最后，您的主要结构应该是这样的：

配置 App.js

您需要手动更改一个文件：项目服务器目录中的 index.js 文件。

Parse 的硬配置是运行名为 app.js 的文件，而不是 index.js，因此我们重命名该文件。

您可以创建一个名为 app.js 的副本，将原版重命名为 app.js，但最终它必须被命名为 app.js：

我们还需要对该文件进行一些修改。

第 7 行中写道

const app = express()；

Parse 已经加载并实例化了 Express，所以这将会产生冲突。我们把这行注释掉吧：

另外，第 41 至 43 行中说：

app.listen(3001, () =>
  console.log('Express 服务器在 localhost:3001 上运行')
);

出于安全考虑，Parse 无法打开该端口，所以我们也把它注释掉：

另外，我们最终也没有使用 express-pino-logger 模块，因此我们可以注释掉第 4 行和第 10 行：

const pino = require('express-pino-logger')()；
...
app.use(pino)；

因此，它看起来会是这样：

现在，在文件的最顶部，你会发现该文件调用了另外两个本地文件：config 和 tokens：

const config = require('./config')；
...
const { videoToken } = require('./tokens')；

我们需要将这些本地文件与 app.js 文件一起上传，因此让我们将这三个文件都上传到云文件夹中。

最终结构如下

编码部分已完成

现在，我们的代码已经部署完毕，一切正常。现在是进行一些配置的时候了。

还记得菲尔说过我们必须用 Twilio 的凭据设置 .env 文件吗？
在 Parse 中，我们在服务器设置面板中有一个相关部分。
打开环境变量面板：

然后像在 .env 文件中一样进行设置：

请记住，您可以从 Twilio 账户获取这些值：

配置虚拟主机

现在，在 “服务器设置 “窗格中，转到 “虚拟主机 “和 “实时查询 “部分：

启用虚拟主机并为应用程序设置 back4app.io 子域：

保存后就可以使用了。

测试

现在是测试应用程序的时候了。

使用浏览器访问在虚拟主机中设置的 URL。请记住使用 HTTPS 作为协议。
由于我们将要求访问您的摄像头，因此必须使用 HTTPS，否则会出现错误。所以请访问

https://Your_Domain_Name.back4app.io

浏览器会要求你允许使用摄像头和麦克风。如果你给了它这些权限，你就会在屏幕上看到自己：

结论

在 Back4app 中运行 React 项目非常简单、免费，而且非常棒。只需稍加修改，我们就能让 Phil 的项目运行起来。

我们还获得了 Parse 和 Back4app 的所有优势：它安全、可扩展、容错，并且已经为您设置了备份。

您甚至可以利用 Parse 的各种功能，如Google登录、Apple登录、LinkedIn 登录、实时数据交付，并将其与我们超棒的数据库中心连接起来。

它功能强大、特性丰富，而且最重要的是：它可以让你免费运行小型应用程序。