利用Twilio Sync查看用户在线状态 Twilio API强大功能实现

方石剑
519 阅读6分钟

Twilio Sync是Twilio API的底层技术，如Twilio Conversations。

Twilio Sync是Twilio API的底层技术，例如Twilio Conversations，它允许你将存储在云端的状态添加到你的应用程序中，为实时协作创造新的机会。Twilio Sync.

在这篇文章中，我们将告诉你如何使用Twilio Sync在你的应用程序中显示用户的在线状态。

你将需要的工具

  • 一个已安装的Node.js的副本
  • 一个Twilio账户

设置你的应用程序和环境

这个应用程序由两部分组成：前端和后端。前端是用户真正与之互动的应用部分。对于前端，我们将使用Twilio Sync JavaScript SDK。该SDK需要一个访问令牌，以便被允许与Sync API进行交互。我们将在后端生成这个访问令牌。

首先，我们来设置文件结构和应用程序的环境。

打开一个终端或命令提示符，运行以下命令创建一个新的目录，作为前台和后台的父目录。

mkdir react-sync

导航到你已经创建的目录。

cd react-sync

接下来我们需要配置后端。我们将用Express构建后端。

mkdir token-service
cd token-service
npm init -y
npm install express twilio dotenv cors

上述命令将创建一个新的Node.js应用程序并安装以下4个依赖项

  • 用于建立服务器express
  • 用于使用Twilio Node Helper Library来生成访问令牌。twilio
  • 用来加载环境变量dotenv
  • React.js前台向Express应用程序发送请求cors

在_token-service_目录下，用以下命令创建两个新文件：.env_和_index.js。你也可以直接在文本编辑器中创建它们。

touch .env index.js

_.env_文件是我们要添加环境变量的地方，而_index.js_文件是我们要写后台代码的地方。

获取你的Twilio凭证

在你的文本编辑器中打开_.env_文件。

复制并粘贴以下变量及其值到文件中。

TWILIO_ACCOUNT_SID=XXXXX
TWILIO_API_KEY=XXXXX
TWILIO_API_SECRET=XXXXX
SYNC_SERVICE_SID=XXXXX

字符串XXXXX代表你的Twilio凭证的占位符。下面是如何获得这些凭证并将其添加到你的_.env_文件中。

账户SID

进入Twilio控制台，检查账户SID；复制账户SID值并将其粘贴到你的_.env_文件中的TWILIO_ACCOUNT_SID。

API密钥和API秘密

接下来，访问Twilio控制台的API密钥部分。点击红色加号，创建一个新的API密钥，在_FRIENDLY NAME_文本字段中输入密钥的名称，并将_密钥类型_设置为Standard。点击创建API密钥。

屏幕将显示包括SID和SECRET的数据，其中SID是你的API密钥。

将SID粘贴到你的_.env_文件中，作为TWILIO_API_KEY的值，将SECRET作为TWILIO_API_SECRET的值。

一旦你离开这个屏幕，你将永远无法再访问你的秘密。建议你保留一份你的价值观的备份。

同步你的服务SID

进入Twilio控制台的同步部分，点击创建新的同步服务来创建一个新的同步服务。当弹出窗口时，输入一个可识别的名称，如 "react-sync"，点击_"创建_"，在下一个屏幕上复制屏幕右上方的服务SID。

Screenshot of sync service configuration page with red rectangle blurring out a service SID

将服务SID的值粘贴到你的_.env_文件中的SYNC_SERVICE_SID。

保存并关闭该文件以完成你的应用程序的配置。

构建代币服务

在你的文本编辑器中打开_index.js_文件，添加以下代码。

const express = require('express');
const cors = require('cors');
require('dotenv').config();

const app = express();
app.use(express.urlencoded({ extended: false }));
app.use(cors());

const port = 3000;

app.get('/token', cors({origin:'http://localhost:3001'}), (req, res) => {
  // generate access token here
});

app.listen(port, () => {
  console.log(`Token Service listening at http://localhost:${port}`)
});

这段代码将创建一个Express应用程序，并为原点_http://localhost:3001から/tokenエンドポイントへの_`GET`请求的发送建立一个路由。每当前端需要连接到Twilio Sync API时，它将向这个端点发出请求。目前，_/token_路线中还没有代码，只有一个注释generate access token here。我们将在下一步骤中添加代码。 在
_/token_根部，在注释下，添加以下代码

const AccessToken = require('twilio').jwt.AccessToken;
const SyncGrant = AccessToken.SyncGrant;

const token = new AccessToken(
  process.env.TWILIO_ACCOUNT_SID,
  process.env.TWILIO_API_KEY,
  process.env.TWILIO_API_SECRET
);

const syncGrant = new SyncGrant({
  serviceSid: process.env.SYNC_SERVICE_SID,
});

token.addGrant(syncGrant);
token.identity = req.query.identity;

res.send({
  accessToken: token.toJwt()
});

本文所描述的生成访问的方法仅用于演示目的，并不具有内在的安全性。在向生产应用的客户端授予访问令牌之前，请先验证和认证你的用户；请参阅在发布使用Sync的应用之前如何保护你的Twilio Sync应用。

保存该文件，你的后台就可以开始使用了。

在继续前进之前，通过在终端的_token-service_目录中运行以下命令来启动Express服务器。

node index.js

一旦服务器启动，你将看到一个类似于以下的信息

Token Service listening at http://localhost:3000

请让该进程继续运行，并进入下一步骤。

为构建React前台打下基础

打开一个新的终端或命令提示符窗口，导航到_react-sync_目录，使用以下命令为前端创建框架。

npx create-react-app client
npm install twilio-sync

执行上述命令后，react-sync/client_目录将被创建。在这个新文件夹中，你会发现一些文件和子文件夹，其中一个是_src。

在这个项目中，我们将创建两个组件，一个叫App，一个叫OnlineUsers的子组件。 App 组件将是主要组件。该组件控制本地用户的登录。 OnlineUsers 组件显示所有在线用户的列表，并对远程用户签入和注销等事件作出反应。

应用程序组件

打开_src_文件夹，找到_App.js_文件。

删除_App.js_中的所有代码，并将其替换为以下内容

import {useState} from 'react';
import OnlineUsers from './OnlineUsers.js';
var SyncClient = require('twilio-sync');

这段代码从React导入了useState()，导入了前面提到的子组件OnlineUsers，还导入了Twilio Sync客户端对象。我们还没有创建OnlineUsers，所以如果你的React服务器已经在运行，你会看到一个错误。

创建组件结构

下一步是创建一个功能组件。将以下代码粘贴在我们刚刚添加的代码下面。

function App() {
  const [identity, setIdentity] = useState('');
  const [localUser, setLocalUser] = useState(null);
  const [onlineUsersSyncList, setOnlineUsersSyncList] = useState(null);
}

export default App;

这段代码创建了App组件的框架，并在其中使用上一步导入的useState()钩子设置了以下三个状态变量。

  • identity，用于在本地用户填写表单字段时检索用户的名字。
  • localUser代表ListItem资源。 ListItem 是一个Twilio Sync对象，包含一个处于Sync共享状态的本地用户。
  • onlineUsersSyncList代表一个List资源。 List 是一个ListItem资源的有序列表，代表所有处于同步共享状态的在线用户。

为一个组件添加条件性渲染

在App函数的状态变量下添加以下返回方法。

return (
  <div className="app">
  {
    localUser && onlineUsersSyncList
    ? <OnlineUsers localUser={localUser} onlineUsersSyncList={onlineUsersSyncList} />
    : <div>
        <input 
          type="text" 
          value={identity} 
          onChange={(event) => setIdentity(event.target.value)}
          placeholder="Enter your name"></input>
        <button onClick={getAccessToken}>Connect to App and show you're online!</button>
      </div>
  }
  </div>
);

这段代码负责确定当App组件被加载时将被呈现的项目。首先，它确定localUser和onlineUsersSyncList的状态值是否为 "Truthy"，即null, , , , , , , , , , , false ,empty和undefined。

当组件最初加载时，在用户登录之前，上述所有变量的值都是 "Falsy"。在这种情况下，该组件为用户的名字渲染一个文本输入字段，并为用户点击一个按钮来登录。

当用户点击该按钮时，客户端会得到一个访问令牌。当客户端获得访问令牌时，同步资源被初始化，状态值被设置。所有这些都是在一个叫做getAccessToken()的函数中完成的，这个函数在按钮被点击时被调用。我们将在下一步添加这个功能。

当状态值被更新时，该组件被重新渲染，状态值被设置为 "Truthy"。这将呈现OnlineUsers组件，而不是输入字段和按钮。

这个流程不包括任何认证或验证用户的机制，所以它不能确保安全登录。即使是匿名用户也可以获得一个访问令牌。由于本文旨在介绍Twilio Sync的功能，这些设置的细节已经被省略了。请不要将其部署在生产环境中，并实施安全的登录方法。

在组件中添加getAccessToken()函数

现在已经添加了return()方法，添加前面提到的getAccessToken()方法来完成 App组件。

在App组件中，在状态变量声明下和return()前添加以下代码。

const getAccessToken = async () => {
  const res = await fetch(`http://localhost:3000/token?identity=${identity}`);
  const data = await res.json();
  const syncClient = new SyncClient(data.accessToken);

  const SyncList = await syncClient.list('online-users');
  const localUser = await SyncList.push({name: identity})

  await setLocalUser(localUser);
  await setOnlineUsersSyncList(SyncList);
}

这段代码向在后台运行的Express服务器的 /token 根部发出了一个GET请求。

一旦在响应中获得访问令牌，就会创建一个SyncClient的实例，并用于创建两个同步对象，SyncList和localUser。然后，这些对象被用来创建两个同步对象，并且。这些对象中的每一个都被分配了组件的状态变量的值。

关于App组件的描述到此为止。接下来将介绍OnlineUsers组件。

OnlineUsers组件

在_/client/src_文件夹下创建一个名为OnlineUsers.js的新文件。

在_OnlineUsers.js_文件中添加以下代码。

import {useState, useEffect} from 'react';

这段代码将从React导入useState()和useEffect()钩子。

在导入的下面添加以下代码，以创建OnlineUsers组件的框架。

构建该组件

function OnlineUsers({localUser, onlineUsersSyncList}) {

}

export default OnlineUsers;

这段代码创建并导出了一个空的组件，从父级App组件中分割并分配（Destructuring）了Props对象，并创建了两个变量我们将其转换为localUser和onlineUsersSyncList。

接下来，以下代码在OnlineUsers函数中设置初始状态。

function OnlineUsers({localUser, onlineUsersSyncList}) {
  const [onlineUsers, setOnlineUsers] = useState([]);
}

export default OnlineUsers;

当组件被安装时运行该进程

在组件安装后，使用useEffect()钩子来执行以下操作

  • 从Sync获取所有在线用户的当前列表并将其分配给状态变量onlineUsers。
  • 为onlineUsersSyncList对象设置一个事件监听器，当用户上网时进行监控。
  • 在onlineUsersSyncList对象上设置一个事件监听器，以监测用户何时下线。

复制以下代码并粘贴在你的函数的状态声明下。

useEffect(() => {
  getSetOnlineUsers();

  onlineUsersSyncList.on('itemAdded', event => {
    if (!event.isLocal) {
      getSetOnlineUsers();
    }
  });

  onlineUsersSyncList.on('itemRemoved', getSetOnlineUsers);

  window.addEventListener("beforeunload", removeParticipant);
}, []);

添加一个辅助函数

这段代码调用了两个我们还没有定义的函数，getSetOnlineUsers()和removeParticipant()。我们现在将添加这些功能。 将以下代码粘贴在useEffect()的钩子下面。

// Gets current list of online users from Sync
const getSetOnlineUsers = async() => {
  const items = await onlineUsersSyncList.getItems();
  setOnlineUsers(items.items);
}

// Removes local user from Sync list
const removeParticipant = async () => {
  const list = await onlineUsersSyncList.remove(localUser.index)
  list.close();
}

渲染组件

为了渲染存储在OnlineUsers组件的状态中的用户列表，我们将添加return()方法。将以下代码粘贴在OnlineUsers函数的闭合括号 (}) 之前。

return (
  <div className="participants">
    <h2>Online users:</h2>
    {
      onlineUsers.map(p => <div key={p.index}>{p.data.name}</div>)
    }
  </div>
);

保存并关闭这个文件，你就完成了组件的创建。

试用Sync应用程序

回到你的终端或命令提示符，在第一个窗口中确保后端Express服务器在3000端口运行。

在第二个终端窗口中，导航到_客户_目录并运行以下命令。

npm start

这将启动本地React服务器，它通常在3000端口启动，但由于后端已经在这个端口运行，你将被要求确认它可以在3001端口运行。按y来确认。

服务器将启动，你将在你的浏览器中看到_http://localhost:3001に自分のアプリが表示されるようになります_。

在你的浏览器中以两个标签或窗口打开应用程序。

在一个标签中，在文本字段中输入你的名字并点击按钮，你的名字就会出现在在线用户列表中。

Screenshot showing online users list

在第二个选项卡中，输入一个不同的名称，然后点击按钮。现在这两个用户将出现在列表中。

Screenshot showing both users in list

如果你关闭这两个标签，你会看到在打开的标签中现在有一个用户在线。

干得好！Express，你已经在React中完成了Twilio Sync应用程序的开发。

avatar
文章
阅读
粉丝