Erstellen des Browser-Skripts - AWS SDK for JavaScript

Hilf uns, das zu verbessernAWS SDK for JavaScriptVersion 3 (V3) -Dokumentation, indem Sie Feedback mithilfe derFeedbackverlinken, oder erstellen Sie ein Issue oder Pull Request aufGitHub.

DieAWS SDK for JavaScriptReferenzhandbuch zur V3-APIbeschreibt ausführlich alle API-Operationen für denAWS SDK for JavaScriptVersion 3 (V3).

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Erstellen des Browser-Skripts

Konfigurieren des SDKs

Erstellen eineslibs-Verzeichnis und erstellen Sie ein Modul Node.js mit dem DateinamenkinesisClient.jsaus. Kopieren Sie den folgenden Code und fügen Sie ihn ein, wodurch das Kinesis-Clientobjekt erstellt wird. ErsetzenREGIONmit IhremAWSRegion : ErsetzenIDENTITY_POOL_IDmit der Amazon Cognito Cognito-Identitäten-Pool-ID, die Sie inErstellen derAWSRessourcen aus.

// Import the required AWS 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}

Sie finden diesen Codehier auf GitHubaus.

Erstellen von Scroll-Verläufen

Der Scroll-Verlauf wird mithilfe der Eigenschaften scrollHeight und scrollTop des <div>-Elements berechnet, welches den Inhalt des Blogbeitrags enthält. Jeder Scroll-Datensatz wird in einer Ereignis-Listener-Funktion fürscroll-Ereignis und wurde anschließend einem Array von Datensätzen hinzugefügt, das regelmäßig an Kinesis übermittelt wird. ErsetzenPARTITION_KEYmit einem Parititionsschlüssel, der eine Zeichenfolge sein muss. Weitere Informationen zu Partitionszeichenfolgen finden Sie unterPutRecordimEntwicklerhandbuch für Amazon Kinesis Data Analyticsaus.

Der folgende Codeausschnitt veranschaulicht diesen Schritt. (Das vollständige Beispiel finden Sie unter Bündeln des Browser-Skripts.)

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); });

Senden von Datensätzen an Kinesis

Wenn sich im Array Datensätze befinden, werden diese ausstehenden Datensätze einmal pro Sekunde an Kinesis gesendet. ErsetzenSTREAM_NAMEmit dem Namen des Streams, der Sie imErstellen derAWSRessourcen Abschnitt dieses Beispiels.

Anmerkung

In diesem Beispiel wird das erforderliche importiert und verwendetAWSService V3-Paket-Clients, V3-Befehle und verwendetsend-Methode in einem async/await-Muster. Sie können dieses Beispiel stattdessen mit V2-Befehlen erstellen, indem Sie einige kleinere Änderungen vornehmen. Details hierzu finden Sie unter Verwenden von V3-Befehlen.

Der folgende Codeausschnitt veranschaulicht diesen Schritt. (Das vollständige Beispiel finden Sie unter Bündeln des Browser-Skripts.)

// 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);