创建浏览器脚本 - Amazon SDK for JavaScript
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异,请参阅中国的 Amazon Web Services 服务入门

帮助我们改进Amazon SDK for JavaScript版本 3 (V3) 文档,方法是使用反馈链接,或者在上创建议题或拉取请求GitHub.

这些区域有:Amazon SDK for JavaScriptV3 API 参考指南详细描述了Amazon SDK for JavaScript版本 3 (V3)。

本文属于机器翻译版本。若本译文内容与英语原文存在差异,则一律以英文原文为准。

创建浏览器脚本

配置开发工具包

创建libs并创建文件名为的 Node.js 模块。kinesisClient.js. 将下面的代码复制并粘贴到其中,这将创建 Kinesis 客户端对象。Replace领域与您的Amazon区域。ReplaceIDENTITY_POOL_ID使用您在中创建的 Amazon Cognito 身份池 ID创建Amazon资源 .

// Import the required Amazon SDK clients and commands for Node.js. const {CognitoIdentityClient} = require("@aws-sdk/client-cognito-identity"); const { fromCognitoIdentityPool, } = require("@aws-sdk/credential-provider-cognito-identity"); const { KinesisClient, PutRecordsCommand } = require("@aws-sdk/client-kinesis"); // Configure Credentials to use Cognito const REGION = "REGION"; const kinesisClient = new KinesisClient({ region: REGION, credentials: fromCognitoIdentityPool({ client: new CognitoIdentityClient({region: REGION}), identityPoolId: "IDENTITY_POOL_ID" // IDENTITY_POOL_ID }) }); export {kinesisClient}

您可以找到此代码这里在 GitHub 上.

创建滚动记录

滚动进度是使用包含博客帖子内容的 <div>scrollHeightscrollTop 属性计算的。每个滚动记录在事件侦听器函数中创建。scroll然后添加到记录数组中,以定期提交到 Kinesis。ReplacePARTITION_KEY使用分区键,该键必须是字符串。有关分区字符串的更多信息,请参阅PutRecord中的Amazon Kinesis Data Analytics 开发人员指南.

下面的代码段演示了此步骤。(有关完整示例,请参阅捆绑浏览器脚本。)

import { PutRecordsCommand } from "@aws-sdk/client-kinesis"; import { kinesisClient } from "./libs/kinesisClient.js"; // Get the ID of the web page element. var blogContent = document.getElementById('BlogContent'); // Get scrollable height. var scrollableHeight = blogContent.clientHeight; var recordData = []; var TID = null; blogContent.addEventListener('scroll', function(event) { console.log('scrolled'); clearTimeout(TID); // Prevent creating a record while a user is actively scrolling. TID = setTimeout(function() { // Calculate the percentage. var scrollableElement = event.target; var scrollHeight = scrollableElement.scrollHeight; var scrollTop = scrollableElement.scrollTop; var scrollTopPercentage = Math.round((scrollTop / scrollHeight) * 100); var scrollBottomPercentage = Math.round(((scrollTop + scrollableHeight) / scrollHeight) * 100); // Create the Amazon Kinesis record. var record = { Data: JSON.stringify({ blog: window.location.href, scrollTopPercentage: scrollTopPercentage, scrollBottomPercentage: scrollBottomPercentage, time: new Date() }), PartitionKey: 'PARTITION_KEY' // Must be a string. }; recordData.push(record); }, 100); });

将记录提交到 Kinesis

如果数组中有记录,则每一秒一次,则这些待处理记录将发送到 Kinesis。ReplaceSTREAM_NAME创建的流的名称创建Amazon资源 这个例子的部分。

注意

此示例导入并使用必需的Amazon服务 V3 包客户端、V3 命令,并使用send方法采用异步/等待模式。您可以使用 V2 命令创建此示例,而是通过进行一些小的更改。有关详细信息,请参阅 使用 V3 命令

下面的代码段演示了此步骤。(有关完整示例,请参阅捆绑浏览器脚本。)

// Helper function to upload data to Amazon Kinesis. const uploadData = async () => { try { const data = await client.send(new PutRecordsCommand({ Records: recordData, StreamName: 'STREAM_NAME' })); console.log('data', data); console.log("Kinesis updated", data); } catch (err) { console.log("Error", err); } }; // Run uploadData every second if data exists. setInterval(function() { if (!recordData.length) { return; } uploadData(); // clear record data recordData = []; }, 1000);