Web Session - 监控、录制和视频回放

引言

通过使用 JavaScript、少量 AJAX 和一个 HTTP 模块，我们可以通过小型 AJAX 数据包将客户端 DOM 事件发布到服务器，并将信息以 XML 格式存储以供以后检索。然后可以实时解析 XML，或者以其他方式提供用户会话的真实视觉表示（动态播放或带有时间轴），从而实现对访客整个会话的视频回放。

这个概念有许多应用

• 实时 Web 应用程序技术支持

可以通过查看用户的会话来识别问题，同时通过即时通讯/电话等方式与访客交谈。

• Web 应用程序培训

在您查看应用程序的实时运行情况时，指导用户完成操作。

• 高级 Web 统计

提供几乎相当于视频回放的网站每次访问情况。

• 可用性测试

通过处理捕获的会话信息来生成真实的可用性数据。

• 远程协助

只需稍作调整，即可将控制权传递给另一个会话并中继事件，从而允许管理员按需接管访客的网页，并执行点击、模拟鼠标移动等操作。

我认为，这仅受限于您的想象力。

概念概述

该概念是提供一个 HTTP 模块，该模块可以拦截 Web 请求并以 XML 格式记录会话信息。同时，它会注入一些客户端 JavaScript，通过 DOM 捕获页面上的所有事件。使用一个非常轻量级的 AJAX 脚本，它将有关每个事件的信息（如标签名称、事件类型和触发事件的日期（毫秒精度））发送到服务器。然后，这些信息会存储在服务器上的当前用户会话密钥下的 XML 结构中，以供以后检索。

然后，网站管理员将能够查看服务器上所有会话的列表，选择一个会话，然后选择回放整个会话或查看几乎实时进行中的会话。这可以通过加载一个包含 IFrame 的页面来显示访问的页面，并且包含的页面执行一个脚本来检索事件并相应地触发它们来实现。为了演示鼠标移动，可以在指定 X 和 Y 位置放置一个绝对定位的 Div。可以使用 .fireevent 或等效方法触发页面上的事件。

或者，可以创建一个类似 Flash 演示的应用程序；结合一些 C# 代码，它可以读取 XML，让 C# 将页面截图作为图像，加载图像，并使用鼠标指针等处理事件，以演示事件。由于每个事件都记录有毫秒级的时间，因此可以计算出整个会话的总时间并分配一个时间轴，从而使用户能够加速会话回放或跳过某些部分。当然，正如我所说，这也可以在用户使用网站时实时完成。

这个的应用程序非常广泛。既然可以获得整个会话的视频，又何必费心记录地理位置和页面访问次数呢？可以使用一个可用性工具来确定用户在浏览网站时遇到的困难程度。关键在于，一旦您理解了这个概念，可能性将是无限的。

您甚至可以将事件从一个会话传输到另一个会话，从而在浏览器中实现远程协助。这很智能，对吧？

所需元素

• HTTP 模块

捕获会话开始，并创建一个以会话密钥命名的应用程序变量。然后，它将一个 XML 文档作为字符串插入到变量中，该变量稍后将用于存储事件。它将一个脚本文件（链接）注入到页面中以加载监控事件。脚本文件由 HTTP 模块请求，并按需构建，可能使用嵌入式资源文件作为模板。这意味着我们可以在服务器上有一个 XML 配置文件，允许管理员定义他/她希望监控/记录的每个访问者的事件。例如，点击、鼠标移动、鼠标悬停、`onbeforeunload`、`keyup` 等。

• AJAX 层

一个轻量级的 AJAX 层，允许在不刷新页面的情况下发送事件。这必须是轻量级的，因为我非常讨厌那些臃肿的框架，它们只会削弱解决方案。AJAX 层会将事件收集到一个本地数组/堆栈中，并在可能时将其推送到服务器，以确保不会丢失任何事件。这里需要运用常识，因为我们只想发送必要且紧凑的信息（因此不发送完整的表单帖子）；找到另一种方法来做到这一点。每次只应发送几个字节。任何更多的数据都可能意味着实时会话查看因发送/处理事件所需的时间而受到影响。每个事件（包括 HTTP 标头）都应以字节为单位。

• 管理员界面

同样，将此嵌入 HTTP 模块中，这将使组件更具可移植性。在 `web.config` 或其他配置文件中存储用户名和密码。一旦 HTTP 模块收到对所述页面的请求，它将提示用户登录，如果验证通过，它将呈现一个包含按时间排序的会话列表的页面，也许还有一个漂亮的标志来显示每个访问者的来源。好的，您可以在这里疯狂一点，将它们渲染到 Google 地图上。实际上，那会令人印象深刻——一个显示您实时会话的 Google 全球地图。

• Playback

同样，使用嵌入式资源使 DLL 具有可移植性。提供一个包含 IFrame 标签的页面，同样，使用轻量级 AJAX 以片段形式检索会话 XML。使用 IFrame，在需要时加载相关页面。使用一个带有鼠标指针图像的 Div，来模拟鼠标移动。您也可以直接修改 IFrame 的 DOM 来触发相关事件。（也许可以根据原始元素在 DOM 中的索引来创建一个元素的 GID。）

• Flash 电影

XML 事件信息可以传递给 Flash 界面。也许可以使用 C# 返回所需 URL 的图像，然后使用 Flash 在图像上模拟指针来表示会话的动态过程。同样，这也可以近乎实时地完成。

要完整查看会话，可以解析 XML 事件文件并处理所有事件时间，以提供会话的第二个时间轴。这意味着用户可以跳过会话的某些部分，就像他们可能跳过 FLV 视频的某些部分一样。或者，他们可以加速会话的回放。

• 数据分析

鉴于我们拥有 XML 格式的详细事件信息，我们可以利用它来估算可用性趋势。例如，用户到达网站的最终目标（例如，订购产品）需要多长时间，然后结束会话。

事件记录示例 (JavaScript)

var oAJAX = new AJAX();

window.onload=function()
{
    //
    // global mouse move
    //
    document.mousemove = function(e)
    {
        // send event to server with X and Y
        oAJAX.send("send Mouse X & Y, tagName " + 
                   "and Current Date/Time to the millisecond")
    }
    
    //
    // global mouse down
    //
    document.onmousedown = function(e)
    {
        // send event to server with X and Y
        oAJAX.send("send Mouse X & Y, tagName and " + 
                   "Current Date/Time to the millisecond")
    }

    //
    // get a collection of all tags
    //
    var aTags = document.getElementById("*");
    
    //
    // the events to be captured could be configured in an XML config
    // file on the server and this script file build on the fly.
    // therefore allowing the site administrator
    // to decide the events/elements to monitor.
    //
    for (var i=0; i<aTags.length; i++)
    {
        var el = aTags[i];
        
        el.onclick = function(e)
        {
            // send event to server
            AJAX.send("send Mouse X & Y, tagName and Current " + 
                      "Date/Time to the millisecond");
        }

        el.onmouseover = function(e)
        {
            // send event to server
            oAJAX.send("send Mouse X & Y, tagName and " + 
                       "Current Date/Time to the millisecond");
        }

        el.onblur = function(e)
        {
            // send event to server
            oAJAX.send("send Mouse X & Y, tagName and " + 
                       "Current Date/Time to the millisecond");
        }

    }   
}

危险，危险

当然，这个概念有很多副作用。如果我们捕获屏幕上的所有事件，我们也将能够捕获您打算发布到新闻组但后来决定删除的消息，或者您在发布之前重新编辑的聊天室消息。我想，当我们达到这种监控级别时，您会意识到我们暴露的程度。

鉴于 JavaScript/AJAX 在当今的浏览器和应用程序中得到了广泛应用，这项技术可以在访客完全不知道自己正在被监控的情况下创建和实现。

关注点

我希望这有意义；我很乐意收到任何反馈。我是一个幕后开发者，因此从未发布过文章，所以请不要对我进行人身攻击！