Skip to content
Search Create account

WEB3DEV Español

WEB3DEV Español is a community of amazing gentes

Estamos construyendo el futuro de Internet.

Create account Log in
Twitter Github Instagram Twitch
Delia Viloria T
Delia Viloria T

Posted on

Cómo crear suscripciones de Websocket para el Blockchain Solana usando Typescript

#solana #typescript #websocket #quicknode

Descripción general

La creación de oyentes de eventos (event listeners) es una forma efectiva de alertar a tu aplicación o a tus usuarios que algo que estás monitoreando cambió. Solana tiene varios oyentes de eventos útiles integrados, también conocidos como suscripciones, que facilitan la escucha de los cambios en Blockchain Solana. ¿No sabes cómo lo usarías? Aquí hay algunos ejemplos donde esto puede ser útil: un bot de Discord que busca interacciones con un Programa en la cadena (por ejemplo, un bot de ventas), una dApp que comprueba los errores en una transacción de un usuario o una notificación telefónica cuando cambia el saldo de la cartera de un usuario.

¿Qué harás?

En esta guía, aprenderás a utilizar varios métodos de event listeners de Solana y endpoints de QuickNode Websocket (WSS://) para escuchar cambios en la cadena. Específicamente, crearás una aplicación sencilla en TypeScript para rastrear cambios en una cuenta (o cartera). Luego, aprenderás cómo utilizar los métodos de cancelación de suscripción de Solana para eliminar un oyente de tu aplicación. También abordaremos conceptos básicos sobre algunos de los otros métodos de escucha de Solana.

¿Qué necesitarás?

  • Nodejs instalado (versión 16.15 o superior)

  • npm o yarn instalado (usaremos yarn para inicializar nuestro proyecto e instalar los paquetes necesarios. Siéntete libre para usar npm si ese es tu administrador de paquetes preferido)

  • Experiencia en TypeScript y ts-node instalado

  • Solana Web3

Configure su entorno

Crea un nuevo directorio de proyecto en tu terminal con:

mkdir solana-subscriptions
cd solana-subscriptions
Enter fullscreen mode Exit fullscreen mode

Crea un archivo app.ts:

echo > app.ts
Enter fullscreen mode Exit fullscreen mode

Inicializa tu proyecto con el indicador (flag) “yes” para usar valores por defecto para tu nuevo paquete:

yarn init --yes
#or
npm init --yes
Enter fullscreen mode Exit fullscreen mode

Instala las dependencias de Solana Web3: 

yarn add @solana/web3.js
#or
npm install @solana/web3.js
Enter fullscreen mode Exit fullscreen mode

Abre app.ts en tu editor de código preferido y en la línea 1, importa Connection, PublicKey y LAMPORTS_PER_SOL de la biblioteca Web3 de Solana:

import { Connection, PublicKey, LAMPORTS_PER_SOL, } from "@solana/web3.js";
Enter fullscreen mode Exit fullscreen mode

¡Genial! Estamos listos para seguir adelante.

Configura tu Endpoint Quicknode

Para construir en Solana, necesitas un Endpoint de API para conectarte a la red. Puedes utilizar nodos públicos o implementar y administrar su propia infraestructura; sin embargo, si deseas tiempos de respuesta 8 veces más rápidos, puedes dejarnos el trabajo pesado a nosotros. Mira por qué más del 50% de los proyectos de Solana eligen QuickNode y se suscriben a una cuenta gratuita aquí.

Usaremos un nodo Solana de la red de desarrollo (Devnet). Copia los enlaces del proveedor HTTP y del proveedor WSS:

Image description

Crea dos nuevas variables en las líneas 3 y 4 del archivo app.js para almacenar estas URLs:

const WSS_ENDPOINT = 'wss://example.solana-devnet.quiknode.pro/000/'; // substitua pelo seu URL
const HTTP_ENDPOINT = 'https://example.solana-devnet.quiknode.pro/000/'; // substitua pelo seu URL
Enter fullscreen mode Exit fullscreen mode

Establece una conexión con Solana

En la línea 5, crea una nueva conexión con Solana:

const solanaConnection = new Connection(HTTP_ENDPOINT,{wsEndpoint:WSS_ENDPOINT});
Enter fullscreen mode Exit fullscreen mode

Si has creado instancias de conexión a Solana en el pasado, puedes notar algo diferente sobre nuestros parámetros, particularmente la inclusión de {wsEndpoint:WSS_ENDPOINT}. Profundicemos un poco más en esto.

El constructor (constructor) de la clase Connection nos permite pasar un commitmentOrConfig opcional. Hay algunas opciones interesantes que podemos incluir con ConnectionConfig, pero hoy nos centraremos en el parámetro opcional, wsEndpoint. Esta es una opción para proporcionar una URL endpoint para el nodo completo Websocket JSON RPC PubSub endpoint . En nuestro caso, este es el punto final WSS que definimos anteriormente, WSS_ENDPOINT.

¿Qué sucede si no pasa un wsEndpoint? Bien, Solana cuenta con una función, makeWebsocketUrl, que reemplaza https de la URL endpoint por wss o http por Ws (fuente). Como todos los endpoints HTTP de QuickNode tienen un endpoint WSS correspondiente con el mismo token de autenticación, no hay problema en omitir este parámetro a menos que desee usar un endpoint separado para tus consultas de Websocket.

¡Vamos a crear algunas suscripciones!

Crear una suscripción de cuenta

Para rastrear una cartera en Solana, tendremos que llamar al método onAccountChange en nuestra solanaConnection. Pasaremos ACCOUNT_TO_WATCH, la clave pública de la cartera que deseamos buscar, y una función de devolución de llamada (callback). Hemos creado un registro simple que nos alerta que se ha detectado un evento y registra el nuevo saldo de la cuenta. Agrega este fragmento a tu código después de su declaración solanaConnection en la línea 7:

(async()=>{
    const ACCOUNT_TO_WATCH = new PublicKey('vines1vzrYbzLMRdu58ou5XTby4qAqVRLmqo36NKPTg'); // Substitua por seu próprio endereço de carteira
    const subscriptionId = await solanaConnection.onAccountChange(
        ACCOUNT_TO_WATCH,
        (updatedAccountInfo) =>
            console.log(`---Event Notification for ${ACCOUNT_TO_WATCH.toString()}--- \nNew Account Balance:`, updatedAccountInfo.lamports / LAMPORTS_PER_SOL, ' SOL'),
        "confirmed"
    );
    console.log('Starting web socket, subscription ID: ', subscriptionId);
})()
Enter fullscreen mode Exit fullscreen mode

Crea una prueba simple

Este código está listo para ejecutarse como está, pero agregaremos una funcionalidad más para ayudarnos a probar que funciona correctamente. Haremos esto agregando una función sleep (para agregar un retraso de tiempo) y una solicitud de airdrop. En la línea 6, antes del bloque de código Async, agrega:

const sleep = (ms:number) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}
Enter fullscreen mode Exit fullscreen mode

Y luego, dentro de su bloque de código Async después del registro "Starting web socket", agrega esta llamada Airdrop:

await sleep(10000); //Aguarde 10 segundos para o teste de soquete
    await solanaConnection.requestAirdrop(ACCOUNT_TO_WATCH, LAMPORTS_PER_SOL);
Enter fullscreen mode Exit fullscreen mode

Su código esperará efectivamente 10 segundos después del inicio del socket (socket) para solicitar un Airdrop para la cartera (nota: esto solo funcionará en la red de desarrollo (devnet) y en la red de prueba (testnet)).

Nuestro código ahora se ve así:

import { Connection, PublicKey, LAMPORTS_PER_SOL, } from "@solana/web3.js";

const WSS_ENDPOINT = 'wss://example.solana-devnet.quiknode.pro/000/'; // substitua pelo seu URL
const HTTP_ENDPOINT = 'https://example.solana-devnet.quiknode.pro/000/'; // substitua pelo seu URL
const solanaConnection = new Connection(HTTP_ENDPOINT, { wsEndpoint: WSS_ENDPOINT });
const sleep = (ms:number) => {
    return new Promise(resolve => setTimeout(resolve, ms));
}

(async () => {
    const ACCOUNT_TO_WATCH = new PublicKey('vines1vzrYbzLMRdu58ou5XTby4qAqVRLmqo36NKPTg');
    const subscriptionId = await solanaConnection.onAccountChange(
        ACCOUNT_TO_WATCH,
        (updatedAccountInfo) =>
            console.log(`---Event Notification for ${ACCOUNT_TO_WATCH.toString()}--- \nNew Account Balance:`, updatedAccountInfo.lamports / LAMPORTS_PER_SOL, ' SOL'),
        "confirmed"
    );
    console.log('Starting web socket, subscription ID: ', subscriptionId);
    await sleep(10000); //Aguarde 10 segundos para o teste de soquete
    await solanaConnection.requestAirdrop(ACCOUNT_TO_WATCH, LAMPORTS_PER_SOL);
})()
Enter fullscreen mode Exit fullscreen mode

¡Inicializa tu socket!

Sigamos adelante, vamos a probar. En tu terminal, ¡puedes insertar ts-Node app.ts para iniciar tu web socket! Después de unos 10 segundos, deberías ver un registro de devolución de llamada de terminal como este:

​​solana-subscriptions % ts-node app.ts
Starting web socket, subscription ID:  0
---Event Notification for vines1vzrYbzLMRdu58ou5XTby4qAqVRLmqo36NKPTg---
New Account Balance: 88790.51694709  SOL
Enter fullscreen mode Exit fullscreen mode

¡Excelente! Debes tener en cuenta que tu aplicación permanece abierta incluso después de la notificación del evento. Esto se debe a que nuestra suscripción sigue escuchando cambios en nuestra cuenta. Necesitamos una manera de cancelar la suscripción del oyente. Presiona Ctrl C para detener el proceso.

Darse de baja de Account Change Listener

Solana ha creado un método interno que podemos usar para cancelar la suscripción de nuestro oyente de cambio de cuenta, removeAccountChangeListener. El método acepta un subscriptionId (número) válido como su único parámetro. Dentro del bloque Async, agrega otra función Sleep después de Airdrop para dar tiempo a la transacción de procesamiento y luego llama a removeAccountChangeListener:

await sleep(10000); //Aguarde 10 segundos para o teste de soquete
    await solanaConnection.removeAccountChangeListener(subscriptionId);
    console.log(`Websocket ID: ${subscriptionId} closed.`);
Enter fullscreen mode Exit fullscreen mode

Ahora ejecuta tu código nuevamente y verás la misma secuencia seguida por el cierre de Websocket:

solana-subscriptions % ts-node app.ts
Starting web socket, subscription ID:  0
---Event Notification for vines1vzrYbzLMRdu58ou5XTby4qAqVRLmqo36NKPTg---
New Account Balance: 88791.51694709  SOL
Websocket ID: 0 closed.
Enter fullscreen mode Exit fullscreen mode

¡Buen trabajo! Como puedes ver, esto puede ser útil si deseas deshabilitar un oyente después de que algo suceda (por ejemplo, tiempo transcurrido, cierto límite alcanzado, número de notificaciones, etc.).

Publicamos el código final de este script en nuestro repositorio de Github para tu referencia.

Otras suscripciones a Websocket de Solana

Solana tiene varios otros métodos similares de suscripción/cancelación de Websocket que también son útiles. Vamos a describirlos brevemente en esta sección.

  • onProgramAccountChange: Registra una devolución de llamada (callback) para que se invoque cada vez que cambien las cuentas propiedad del programa especificado. Pase la clave pública (PublicKey) de un Programa y una serie opcional de filtros de cuenta. Entre otras cosas, esto puede ser útil para rastrear cambios en la cuenta de tokens de un usuario. Cancela la suscripción con removeProgramAccountChangeListener.

  • onLogs: Registra una devolución de llamada (callback) que se invocará cada vez que se emitan los registros - se puede utilizar de manera similar a onAccountChange pasando una clave pública (PublicKey) válida. La devolución de llamada (callback) devolverá el ID de la transacción reciente. Cancela la suscripción con removeOnLogsListener.

  • onSlotChange: Registra una devolución de llamada (callback) para que se invoque en los cambios de slot. Solo se pasa una función de devolución de llamada (callback) a este método. Cancela la suscripción con removeSlotChangeListener.

  • onSignature: Registra una devolución de llamada (callback) para que se invoque en las actualizaciones de firma al pasar una Firma de transacción válida. La devolución de llamada devolverá si la transacción ha sufrido un error o no. Cancela la suscripción con removeSignatureListener.

  • onRootChange: Registra una devolución de llamada (callback) para ser invocada después de cambios en la raíz. Solo se pasa una función de devolución de llamada a este método. Cancela la suscripción con removeRootChangeListener.

Nota: Todos los métodos de cancelación de suscripción requieren un parámetro subscriptionId (número). Puedes encontrar más información sobre estos métodos en nuestra documentación en quicknode.com/Docs/Solana. Siéntete libre de experimentar cada una de ellas, haciendo pequeñas modificaciones en app.js para probar algunas de estas otras suscripciones.

Conclusión

¡Buen trabajo! Ahora deberías saber cómo usar las suscripciones de Websocket en Solana. ¿Cómo estás utilizando las Websocket de Solana? ¡Nos encantaría ver lo que estás creando! Comparte tu aplicación con nosotros en Discord o Twitter. Si tienes algún comentario o pregunta sobre esta guía, ¡nos encantaría escucharlo!

Para obtener más información, consulta algunos de nuestros otros tutoriales sobre Solana aquí y, si te has divertido con las suscripciones a Websocket, considera suscribirse a nuestro boletín de noticias.

Artículo original publicado por Quicknode. Traducido por Delia Viloria T.

Discussion (0)

Read next

jucabeza profile image

¿Qué es Polygon zkEVM?

Juliana Cabeza -

hector profile image

Revolucionando los Activos del Mundo Real con el ERC-6960: Una Guía Simple

Hector -

hector profile image

Introducción a MetaMask Snaps

Hector -

hector profile image

Rust Story: Generador de Token de Autenticación Simple en Rust usando Tokio

Hector -