Frontend-lyssnare för smarta kontrakthändelser på blockkedjan: Övervakning av kontraktstillstånd

Decentraliserade applikationer (DApps) kräver ofta realtidsuppdateringar för att återspegla ändringar i det underliggande smarta kontraktets tillstånd. Det är här händelselyssnare kommer in i bilden. Genom att övervaka händelser som emitteras av smarta kontrakt kan frontend-applikationer reagera på tillståndsövergångar och ge användarna aktuell information. Denna guide ger en omfattande översikt över hur man bygger en frontend-händelselyssnare för smarta kontrakt på blockkedjan, med fokus på praktisk implementering och bästa praxis.

Vad är händelser i smarta kontrakt?

Smarta kontrakt, skrivna i språk som Solidity, kan emittera händelser när specifika åtgärder inträffar i kontraktet. Dessa händelser fungerar som en aviseringsmekanism som signalerar till externa applikationer att en tillståndsförändring har ägt rum. Se dem som loggposter som permanent registreras på blockkedjan. Händelser innehåller information om förändringen, vilket gör att applikationer kan reagera därefter.

Tänk till exempel på ett enkelt token-kontrakt. Det kan emittera en händelse när tokens överförs mellan konton. Denna händelse skulle vanligtvis inkludera avsändarens adress, mottagarens adress och det överförda beloppet. En frontend-applikation kan lyssna efter denna händelse och uppdatera användarens saldo i realtid.

Varför använda händelselyssnare?

Att "polla" blockkedjan för tillståndsförändringar är ineffektivt och resurskrävande. Händelselyssnare erbjuder en mer elegant och effektiv lösning genom att låta applikationer passivt vänta på aviseringar. Detta minskar belastningen på blockkedjan och förbättrar DAppens responsivitet.

Viktiga fördelar med att använda händelselyssnare inkluderar:

• Realtidsuppdateringar: Ge användarna omedelbar feedback om ändringar i kontraktstillstånd.
• Förbättrad effektivitet: Minska behovet av konstant polling av blockkedjan.
• Förbättrad användarupplevelse: Skapa en mer dynamisk och responsiv applikation.
• Minskade gaskostnader: Undvik onödiga läsoperationer på blockkedjan.

Verktyg och tekniker

Flera verktyg och bibliotek kan användas för att bygga frontend-händelselyssnare. De mest populära alternativen inkluderar:

• Web3.js: Ett JavaScript-bibliotek som låter dig interagera med Ethereum-noder och smarta kontrakt. Det tillhandahåller ett omfattande API för att komma åt blockkedjedata, skicka transaktioner och lyssna efter händelser.
• Ethers.js: Ett annat populärt JavaScript-bibliotek för att interagera med Ethereum. Det är känt för sin enkelhet, säkerhet och prestanda.
• Infura/Alchemy: Infrastrukturleverantörer som erbjuder tillförlitlig åtkomst till Ethereum-nätverket. De tillhandahåller API:er för att läsa blockkedjedata och skicka transaktioner, vilket eliminerar behovet av att köra en egen Ethereum-nod.
• WebSockets: Ett kommunikationsprotokoll som möjliggör realtids, dubbelriktad kommunikation mellan en klient och en server. WebSockets används ofta för att leverera händelseaviseringar till frontend.

Bygga en frontend-händelselyssnare: En steg-för-steg-guide

Detta avsnitt beskriver stegen för att bygga en frontend-händelselyssnare med Web3.js eller ethers.js.

Steg 1: Sätta upp din utvecklingsmiljö

Innan du börjar, se till att du har följande installerat:

• Node.js: En JavaScript-runtime-miljö.
• npm (Node Package Manager) eller yarn: En pakethanterare för att installera beroenden.
• En kodredigerare: Visual Studio Code, Sublime Text, eller någon annan redigerare du föredrar.

Skapa en ny projektkatalog och initiera den med npm eller yarn:

            mkdir my-dapp
cd my-dapp
npm init -y

            

              
                Copy
              
            
          

Eller med yarn:

            mkdir my-dapp
cd my-dapp
yarn init -y

            

              
                Copy
              
            
          

Steg 2: Installera beroenden

Installera Web3.js eller ethers.js, tillsammans med andra nödvändiga beroenden. Du kan till exempel behöva ett bibliotek för att hantera miljövariabler.

Med npm:

            npm install web3 dotenv

            

              
                Copy
              
            
          

Med yarn:

            yarn add web3 dotenv

            

              
                Copy
              
            
          

Eller för ethers.js:

Med npm:

            npm install ethers dotenv

            

              
                Copy
              
            
          

Med yarn:

            yarn add ethers dotenv

            

              
                Copy
              
            
          

Steg 3: Konfigurera din Web3-provider

Du måste konfigurera en Web3-provider för att ansluta till Ethereum-nätverket. Detta kan göras med Infura, Alchemy, eller en lokal Ethereum-nod (som Ganache).

Skapa en `.env`-fil i din projektkatalog och lägg till din Infura- eller Alchemy-API-nyckel:

            INFURA_API_KEY=DIN_INFURA_API_NYCKEL

            

              
                Copy
              
            
          

Konfigurera sedan Web3-providern i din JavaScript-fil:

Med Web3.js:

            require('dotenv').config();
const Web3 = require('web3');

const infuraApiKey = process.env.INFURA_API_KEY;
const web3 = new Web3(new Web3.providers.WebsocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`));

            

              
                Copy
              
            
          

Med ethers.js:

            require('dotenv').config();
const { ethers } = require('ethers');

const infuraApiKey = process.env.INFURA_API_KEY;
const provider = new ethers.providers.WebSocketProvider(`wss://mainnet.infura.io/ws/v3/${infuraApiKey}`);

            

              
                Copy
              
            
          

Obs: Ersätt `mainnet` med lämpligt nätverk (t.ex. `ropsten`, `rinkeby`, `goerli`) om du använder ett testnätverk.

Steg 4: Hämta kontraktets ABI och adress

För att interagera med ditt smarta kontrakt behöver du dess Application Binary Interface (ABI) och adress. ABI är en JSON-fil som beskriver kontraktets funktioner och händelser. Adressen är kontraktets plats på blockkedjan.

Du kan få ABI från din Solidity-kompilators output. Adressen visas efter att du har distribuerat kontraktet.

Spara ABI i en JSON-fil (t.ex. `MyContract.json`) och adressen i din `.env`-fil:

            CONTRACT_ADDRESS=0xDinKontraktsadress...

            

              
                Copy
              
            
          

Steg 5: Skapa en kontraktinstans

Använd ABI och adressen för att skapa en kontraktinstans i din JavaScript-fil:

Med Web3.js:

            const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new web3.eth.Contract(contractABI, contractAddress);

            

              
                Copy
              
            
          

Med ethers.js:

            const contractAddress = process.env.CONTRACT_ADDRESS;
const contractABI = require('./MyContract.json').abi;
const myContract = new ethers.Contract(contractAddress, contractABI, provider);

            

              
                Copy
              
            
          

Steg 6: Lyssna efter händelser

Nu kan du börja lyssna efter händelser som emitteras av ditt smarta kontrakt. Använd `events`-egenskapen i din kontraktinstans för att prenumerera på händelser.

Med Web3.js:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20,23]}, // Valfritt filter med indexerade parametrar.
    fromBlock: 'latest'             // Börja lyssna från det senaste blocket.
}, function(error, event){
    if(!error)
    {console.log(event);}
    else
    {console.log(error);}
})
.on('data', function(event){
    console.log(event);
})
.on('changed', function(event){
    // ta bort händelse från lokal databas
})
.on('error', console.error);

            

              
                Copy
              
            
          

Eller, med async/await:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20,23]}, // Valfritt filter med indexerade parametrar.
    fromBlock: 'latest'             // Börja lyssna från det senaste blocket.
})
.on('data', async function(event){
    console.log(event);
    // Bearbeta händelsedata här, t.ex. uppdatera UI
    try {
        // Exempel: Interagera med en annan del av din DApp.
        // await someOtherFunction(event.returnValues);
    } catch (error) {
        console.error("Fel vid bearbetning av händelse:", error);
    }
})
.on('changed', function(event){
    // ta bort händelse från lokal databas
})
.on('error', console.error);

            

              
                Copy
              
            
          

Med ethers.js:

            myContract.on("MyEvent", (param1, param2, event) => {
    console.log("Händelsen MyEvent emitterades!");
    console.log("Param1:", param1);
    console.log("Param2:", param2);
    console.log("Händelsedata:", event);

    // Bearbeta händelsedata här, t.ex. uppdatera UI
});

            

              
                Copy
              
            
          

I båda exemplen, ersätt `MyEvent` med namnet på händelsen du vill lyssna på. Callback-funktionen kommer att exekveras varje gång händelsen emitteras. Du kan komma åt händelsedata via `event`-objektet.

Steg 7: Hantera händelsedata

`event`-objektet innehåller information om händelsen, inklusive argumenten som skickades till den, blocknumret och transaktionshashen. Du kan använda dessa data för att uppdatera din applikations UI eller utföra andra åtgärder.

Till exempel, om din händelse inkluderar en användares saldo, kan du uppdatera saldovisningen på frontend:

            // Inuti händelsehanteraren
const balance = event.returnValues.balance; // Web3.js
// Eller
// const balance = param1; // ethers.js, förutsatt att param1 är saldot

document.getElementById('balance').textContent = balance;

            

              
                Copy
              
            
          

Avancerade tekniker för händelselyssnare

Detta avsnitt utforskar några avancerade tekniker för att bygga mer sofistikerade händelselyssnare.

Filtrera händelser

Du kan filtrera händelser baserat på specifika kriterier, såsom värdet på en indexerad parameter. Detta kan hjälpa dig att begränsa de händelser du är intresserad av och minska mängden data du behöver bearbeta.

I Web3.js kan du använda `filter`-alternativet när du prenumererar på händelser:

            myContract.events.MyEvent({
    filter: {myIndexedParam: [20, 23]}, // Lyssna bara efter händelser där myIndexedParam är 20 eller 23.
    fromBlock: 'latest'
}, function(error, event){
    console.log(event);
})

            

              
                Copy
              
            
          

I ethers.js kan du specificera filter när du skapar kontraktinstansen eller när du kopplar händelselyssnaren:

            // Filtrera efter händelsenamn och indexerade argument
const filter = myContract.filters.MyEvent(arg1, arg2);

myContract.on(filter, (arg1, arg2, event) => {
    console.log("Händelsen MyEvent emitterades med specifika argument!");
    console.log("Arg1:", arg1);
    console.log("Arg2:", arg2);
    console.log("Händelsedata:", event);
});

            

              
                Copy
              
            
          

Lyssna efter tidigare händelser

Du kan hämta tidigare händelser som inträffade innan din händelselyssnare var aktiv. Detta kan vara användbart för att initiera din applikations tillstånd eller för granskningsändamål.

I Web3.js kan du använda `getPastEvents`-metoden:

            myContract.getPastEvents('MyEvent', {
    fromBlock: 0,
    toBlock: 'latest'
}, function(error, events){
    console.log(events);
});

            

              
                Copy
              
            
          

I ethers.js kan du fråga händelseloggarna med hjälp av providerns `getLogs`-metod:

            const blockNumber = await provider.getBlockNumber();
const filter = myContract.filters.MyEvent(arg1, arg2);
const logs = await provider.getLogs({
    address: myContract.address,
    fromBlock: blockNumber - 1000, // sista 1000 blocken
    toBlock: blockNumber,
    topics: filter.topics // filterämnen
});

for (const log of logs) {
    const parsedLog = myContract.interface.parseLog(log);
    console.log(parsedLog);
}

            

              
                Copy
              
            
          

Hantera återkallade transaktioner

Transaktioner kan ibland återkallas på grund av fel eller otillräcklig gas. När en transaktion återkallas, emitteras inte händelser associerade med den transaktionen. Det är viktigt att hantera återkallade transaktioner på ett elegant sätt för att undvika oväntat beteende i din applikation.

Ett sätt att hantera återkallade transaktioner är att övervaka transaktionskvittot. Kvittot innehåller information om transaktionen, inklusive dess status (lyckad eller misslyckad). Om statusen är `0x0` har transaktionen återkallats.

Du kan använda metoden `web3.eth.getTransactionReceipt` (Web3.js) eller `provider.getTransactionReceipt` (ethers.js) för att hämta transaktionskvittot.

Använda WebSockets för realtidsuppdateringar

WebSockets ger en beständig anslutning mellan klienten och servern, vilket möjliggör realtids, dubbelriktad kommunikation. Detta är idealiskt för att leverera händelseaviseringar till frontend.

Både Web3.js och ethers.js stöder WebSockets. För att använda WebSockets, konfigurera din Web3-provider med en WebSocket-slutpunkt (som visas i installations exemplen ovan).

Säkerhetsaspekter

När du bygger frontend-händelselyssnare är det viktigt att tänka på följande säkerhetsaspekter:

• Datavalidering: Validera alltid händelsedata innan du använder den i din applikation. Lita inte blint på data som tas emot från blockkedjan.
• Felhantering: Implementera robust felhantering för att förhindra oväntat beteende och potentiella säkerhetssårbarheter.
• Rate Limiting: Implementera rate limiting för att förhindra missbruk och skydda din applikation från denial-of-service-attacker.
• Beroendehantering: Håll dina beroenden uppdaterade för att åtgärda säkerhetssårbarheter.
• Sanering av användarinmatning: Om du visar händelsedata för användare, sanera datan för att förhindra cross-site scripting (XSS)-attacker.

Bästa praxis

Följ dessa bästa praxis för att bygga robusta och underhållbara frontend-händelselyssnare:

• Använd en modulär arkitektur: Bryt ner din applikation i mindre, återanvändbara komponenter.
• Skriv enhetstester: Testa dina händelselyssnare noggrant för att säkerställa att de fungerar korrekt.
• Använd ett loggningsramverk: Logga viktiga händelser och fel för att hjälpa dig felsöka din applikation.
• Dokumentera din kod: Dokumentera din kod tydligt för att göra den lättare att förstå och underhålla.
• Följ kodningskonventioner: Följ konsekventa kodningskonventioner för att förbättra läsbarheten och underhållbarheten.
• Övervaka din applikation: Övervaka din applikations prestanda och resursanvändning för att identifiera potentiella flaskhalsar.

Exempelscenario: Övervaka en tokenöverföring

Låt oss titta på ett praktiskt exempel: övervakning av tokenöverföringar i ett enkelt ERC-20-token-kontrakt.

ERC-20-standarden inkluderar en `Transfer`-händelse som emitteras närhelst tokens överförs mellan konton. Denna händelse inkluderar avsändarens adress, mottagarens adress och det överförda beloppet.

Så här kan du lyssna efter `Transfer`-händelser i din frontend-applikation:

Med Web3.js:

            myContract.events.Transfer({
    fromBlock: 'latest'
}, function(error, event){
    if(!error)
    {
        console.log("Transfer-händelse:", event);
        const from = event.returnValues.from;
        const to = event.returnValues.to;
        const value = event.returnValues.value;

        // Uppdatera UI eller utför andra åtgärder
        console.log(`Tokens överförda från ${from} till ${to}: ${value}`);
    }
    else
    {console.error(error);}
});

            

              
                Copy
              
            
          

Med ethers.js:

            myContract.on("Transfer", (from, to, value, event) => {
    console.log("Transfer-händelse emitterad!");
    console.log("Från:", from);
    console.log("Till:", to);
    console.log("Värde:", value.toString()); // Värdet är ett BigNumber i ethers.js
    console.log("Händelsedata:", event);

    // Uppdatera UI eller utför andra åtgärder
    console.log(`Tokens överförda från ${from} till ${to}: ${value.toString()}`);
});

            

              
                Copy
              
            
          

Denna kodsnutt lyssnar efter `Transfer`-händelser och loggar avsändarens adress, mottagarens adress och det överförda beloppet till konsolen. Du kan sedan använda denna information för att uppdatera din applikations UI, visa transaktionshistorik eller utföra andra åtgärder.

Sammanfattning

Frontend-händelselyssnare för smarta kontrakt på blockkedjan är ett kraftfullt verktyg för att bygga realtids, responsiva DApps. Genom att övervaka händelser som emitteras av smarta kontrakt kan du ge användarna aktuell information och förbättra den övergripande användarupplevelsen. Denna guide har täckt de grundläggande koncepten, verktygen och teknikerna för att bygga händelselyssnare, tillsammans med avancerade ämnen som att filtrera händelser, hantera återkallade transaktioner och använda WebSockets för realtidsuppdateringar. Genom att följa de bästa praxis som beskrivs i denna guide kan du bygga robusta och säkra händelselyssnare som kommer att förbättra funktionaliteten och användarupplevelsen i dina DApps.

Vidare läsning

• Web3.js Dokumentation
• Ethers.js Dokumentation
• Infura
• Alchemy
• Ethereum Smart Contracts