会话回放是每个产品团队和开发团队在应用程序上线生产后都需要的工具。 这些工具使他们能够了解最终用户如何与产品交互，而不会受到受控用户测试组可能带来的偏差影响。借助这些信息，他们可以了解诸如用户体验上的缺口、由于用户的错误交互而导致的业务逻辑问题、需要复杂操作序列才能触发的边缘情况，以及许多其他情况。

然而，有一种使用场景是传统的会话回放工具无法真正应对的：实时会话支持。

能够 实时 查看您的用户正在做什么并直接做出响应，甚至接管他们的鼠标，或者快速发起一次通话来 向 他们展示问题，这是无价的。而这正是 OpenReplay 实现 Assist 功能 的原因。

在通常的场景中，当您设置应用程序来记录用户会话时，您会在关闭标签页几分钟后（毕竟应用程序需要确认您不是意外关闭的），将应用程序的常规事件、错误和问题传送到您的 OpenReplay 实例（或 SaaS 版本）。您将能够逐步分析用户做了什么，但如果您 确实 发现了问题，您将无法直接与该用户一起复查它。

然而，借助 Assist，您现在将能够：

• 直接实时检查用户正在做什么，从他们打开页面的那一刻起。
• 借助 WebRTC，在客户端和操作员之间创建了一个一对一的通道。这使您能够 直接从应用程序中发起通话，而无需在涉及的任何一台计算机上安装第三方通信软件。
• 接管用户的鼠标（当然要经过他们的许可），并向他们准确展示该点击哪里。

来看看从操作员视角看到的 Assist 功能界面，操作员可以随时查看用户正在做什么：

鉴于这是一个实时显示更新的功能，关键要点在于“email”和“手机号码”字段。前者被混淆处理以保护用户的隐私，后者则被追踪器完全忽略，以防止收集个人数据。 而且考虑到数据的转换是在客户端完成的，作为操作员的您没有任何办法看到这些值。

这反过来使您能够完美地为任何类型的系统提供支持，同时向您的用户保证不会对其个人数据进行任何处理。

此功能在所有最新版本的 OpenReplay 中都已可用，所以我们要做的只是启用它。 如果您使用的是 OpenReplay 的软件包版本，您只需直接从命令行安装以下插件：

npm install @openreplay/tracker-assist

然后，使用以下代码来启用它：

//...
import OpenReplay from '@openreplay/tracker';
import trackerAssist from '@openreplay/tracker-assist';
//...
const tracker = new OpenReplay({
  projectKey: "your project key"
});
tracker.use(trackerAssist({})); //add this line
tracker.start();

另一方面，如果您使用的是首次设置时从平台获取的 JS 代码片段，您只需更新一个路径。 您的原始代码片段应该类似于这个：

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay.js",1,0,initOpts,startOpts);
</script>

注意底部指向 openreplay.js 文件的路径。我们需要将其更改，改为放入openreplay-assist.js，使其看起来像这样：

<!-- OpenReplay Tracking Code for HOST -->
<script>
  var initOpts = {
    projectKey: "your project key",
    defaultInputMode: 0,
    obscureTextNumbers: false,
    obscureTextEmails: true,
  };
  var startOpts = { userID: "" };
  (function(A,s,a,y,e,r){
    r=window.OpenReplay=[e,r,y,[s-1, e]];
    s=document.createElement('script');s.src=A;s.async=!a;
    document.getElementsByTagName('head')[0].appendChild(s);
    r.start=function(v){r.push([0])};
    r.stop=function(v){r.push([1])};
    r.setUserID=function(id){r.push([2,id])};
    r.setUserAnonymousID=function(id){r.push([3,id])};
    r.setMetadata=function(k,v){r.push([4,k,v])};
    r.event=function(k,p,i){r.push([5,k,p,i])};
    r.issue=function(k,p){r.push([6,k,p])};
    r.isActive=function(){return false};
    r.getSessionToken=function(){};
  })("//static.openreplay.com/latest/openreplay-assist.js",1,0,initOpts,startOpts);
</script>

这应该就是您在基础设置中需要更改的全部内容，即可获得 Assist 功能的访问权限。

是不是很酷？！

请注意，如果您碰巧遇到以下错误消息（就像我遇到的那样），您应该按照 这些步骤 来修复它们。

“Critical dependency: the request of a dependency is an expression”

该 issue 中的修复方法应该足以让您继续。

现在您可以开始充分利用 OpenReplay 的 Assist 了，那么我们就来看看吧。

由于客户端从现在起不需要再做任何其他事情，是时候让您来看看操作员这一侧了。

直接在平台上，点击导航菜单中的 Assist 选项，如下所示：

点击之后，您将看到一个活跃 Assist 会话的列表。一旦您的用户打开应用程序，该会话就会自动出现在这里，您会看到它像这样被列出：

在那里，您可以看到以下信息：

• 用户 ID——那里的那个 email？您是使用追踪器上的 setUserID 方法设置的。
• 每个会话的开始时间和日期。
• 会话的持续时间（在截图中显示为“14 seconds”）。
• 最后，是关于用户的地理信息。您可以在那里看到我位于西班牙，此外我在我的桌面 macOS 上使用 Firefox。

仅此处就有很多信息，这对于您识别想要实时观看的会话非常重要。毕竟，在这个示例中我只向您展示了一个会话，但同时可能会有数百个（甚至更多）活跃的会话。 除此之外，您还可以使用搜索栏来帮助您执行复杂的查询，以找到正确的会话。

一旦您找到了正在寻找的会话，点击该会话的“Play”图标。这将带您进入客户端应用程序的实时视图。

您可以在下面的并排对比中看到 Assist 屏幕如何显示当前被观察用户的会话。

现在，正如您所见，用户看到的内容与操作员看到的内容之间存在一些差异。这是有充分理由的。 私密信息会被自动混淆或完全忽略。这是为了保护被观察的用户，毕竟作为操作员，您不一定需要看到电话号码或电子邮件地址。 需要注意的是，这是默认行为：安装在客户端应用程序上的追踪器会检测您正在输入的数据类型及其格式（例如在 email 字段中），并当场决定保护它。

然而，如果您想更改此行为，让追踪器忽略或混淆其他字段，您可以通过不同的粒度级别来清理数据。如果这正是您所需要的，官方文档中包含您需要的所有信息，所以 查看一下吧。

一个额外的功能（我得说是一个非常有趣的功能），是能够接管客户端鼠标指针的控制权。通过此功能，您将能够控制鼠标并点击应用程序的不同位置。 您将无法发送任何其他类型的输入信号，但这应该足以帮助您去帮助您的用户。

要访问此功能，您只需点击屏幕右上角区域的“Remote Control”链接即可。 当您这样做时，您的客户端将看到一个请求权限的模态窗口。

一旦确认，您将获得对其鼠标的控制权，或者更确切地说，您的指针将出现在他们的屏幕上，您将能够像直接使用他们的鼠标一样点击并与应用程序进行交互。 您可以在以下截图中看到，红点是您的 Assist 鼠标，而黑色指针是用户的鼠标。

当您的用户无法弄清楚如何与您的应用程序交互或究竟该点击哪里时，这是一个绝妙的功能。 您甚至可以通过与您的用户发起实时通话，并使用您的红色指针向他们展示该点击哪里，从而为他们提供支持。 以下截图显示了我，正在进行一次实时通话，对方是……嗯，是来自两台不同操作系统计算机的我自己。语音和视频都通过 WebRTC 传输。

如果您在项目中设置 Assist 插件时遇到任何问题，请通过我们的 Slack 社区 联系我们，直接向我们的开发人员提问！