Configuración de la API JS de la biblioteca de gráficos de TradingView para cripto: actualizaciones de gráficos en tiempo real

En la parte 2 de esta guía de ejemplo de la API JS de TradingView, implementaremos actualizaciones de precios en tiempo real en el gráfico. Asegúrate de leer la Introducción y la Parte 1 primero

Para obtener actualizaciones en tiempo real del gráfico, continuamos desde la Parte 1 donde configuramos un widget de gráficos básico para datos estáticos.

Este ejemplo utilizará la conexión de websocket de nivel comercial de CryptoCompare para obtener actualizaciones de precios a medida que ocurren.

Puedes ver la demostración implementada aquí en Glitch y ver el código de parte 2 aquí

La parte 1 se centró en configurar el widget de la biblioteca de gráficos de TradingView y obtener la API de JS para obtener barras históricas de nuestra fuente de datos.

Los métodos de la API de JS que nos permiten actualizar el gráfico en tiempo real son:

Básicamente, lo que necesitamos d es actualizar la vela más reciente en nuestro gráfico, ya sea una barra de 1 minuto o una barra de 1 día, el proceso es prácticamente el mismo.

Tenemos que mantener un registro de la última barra en el gráfico, actualizarlo con nuevos datos de precios (¿cambiaron la apertura, el máximo, el mínimo, el cierre o el volumen para ese período?) y proporcionar una nueva barra si han entrado en un nuevo período.

Nota: Si le proporciona a la TV barras de 1 minuto y deja que genere barras de 5 minutos, 15 minutos, etc., en realidad estará actualizando barras de 1 minuto. Sin embargo, no se preocupe, la TV especificará la resolución que necesita cuando llame a <×subscribeBars !

Primero, echemos un vistazo a estos nuevos métodos de la API de JS con los que trabajaremos.

subscribeBars

La biblioteca de gráficos llamará a este método después de que se llame a < , suponiendo que pudimos resolver el símbolo con éxito. Si no está familiarizado con resolveSymbol , consulte la parte 1 de esta guía.

La biblioteca pasará estos argumentos a <×subscribeBars

En términos de implementación, la biblioteca llama a subscribeBars cuando se cambia el símbolo o la resolución del gráfico, o siempre que el gráfico necesita suscribirse a un nuevo símbolo.

Cuando se llama a las barras de suscripción, necesitamos crear un registro de la suscripción, incluida la función onRealtimeCallback, para que pueda llamar a la función onRealtimeCallback con los nuevos datos recibidos de su fuente de datos en tiempo real.

La API JS es un objeto JS que se pasa a la biblioteca, que debe contener las funciones definidas por TradingView. Estas funciones las llama la biblioteca según sea necesario, no puede llamarlas usted mismo, solo sus devoluciones de llamada.

Lo que se supone que debe hacer es mantener una referencia a la suscripción y las devoluciones de llamada pasadas a la función subscribeBars. Para actualizar el gráfico, pasamos nuestra barra actualizada a realtimeUpdateCallback .

¡Veamos esto en acción!

Supongamos que tenemos dos archivos, api / index.js donde reside la API de JS, y api / stream.js con nuestro código de actualización en tiempo real:

Tenga en cuenta que gran parte de lo anterior trata sobre aspectos específicos de la fuente de datos con la que estoy trabajando, los canales websocket Socket.io de CryptoCompare.

Necesitamos saber algunas cosas que no proporciona la biblioteca, necesitamos saber la última barra que tenemos en el gráfico y sus valores. Necesitamos tener una referencia al onRealtimeUpdateCB para el gráfico específico.

Las partes que son específicas de TradingView son las siguientes:

Desde la perspectiva de la biblioteca de TradingView, es tan simple como eso. Pero implementar este flujo con su propia fuente de datos puede ser tan simple o complicado como lo haga su sistema.

TV REQS

Las actualizaciones en tiempo real se implementan actualizando la barra más reciente (la barra "abierta" actualmente) en el gráfico. Debe proporcionar a la biblioteca la versión actualizada de esa barra, ya que ingresan datos de precios en tiempo real.

La API de JS proporciona dos funciones para gestionar esto. susbcribeBars y unsubscribeBars .

Cuando el gráfico carga un símbolo o se cambia la resolución del gráfico actual , la televisión le pedirá que se suscriba a las actualizaciones en tiempo real de esa barra llamando a subscribeBars con el símbolo y resolución a la que quiere suscribirse.

La TV llamará a la función subscribeBars para iniciar la suscripción en tiempo real para cualquier símbolo que muestre el gráfico. Para pasar los datos de actualización al gráfico, llamará al onRealtimeCallback que se le pasó en subscribeBars .

Tenga en cuenta que las llamadas de TV <×subscribeBars una vez, y necesitará mantener una referencia al onRealtimeCallback función para llamar siempre que necesite actualizar el gráfico para esa suscripción.

Por lo tanto, usted es responsable de:

El formato de la barra de TV es un objeto que tiene este aspecto:

Es importante comprender la diferencia entre los requisitos de la TV y su propia implementación de datos. Puede obtener los datos como desee, siempre que los proporcione a la biblioteca de TV en el formato adecuado.

A continuación se muestra mi propio ejemplo de implementación del websocket de datos comerciales socket.io de CryptoCompare.

Esto es solo parte de una implementación completa de la API de JS , estamos exportando dos métodos de este archivo, que serán llamados desde nuestro objeto de la API de JS que pasamos a la TV. Consulte la Parte 1 de este tutorial para obtener más información sobre la API de JS

Una vez más, la implementación de su fuente de datos específica probablemente se verá diferente a la mía, ¡a menos que también esté usando CryptoCompare!

Los pasos generales son:

Analicemos algo de lo que estoy haciendo para implementar los datos específicos en tiempo real de CryptoCompare para trabajar con esto. Esto es específico para TV solo porque estoy masajeando los datos que tengo disponibles para el formato ellos especifican.

¡Eso es todo por ahora!

Puedes ver la demostración implementada aquí en Glitch, y ver el código de la parte 2 aquí

¡Esperamos que esto le haya ayudado a responder algunas preguntas sobre las actualizaciones en tiempo real de la biblioteca de gráficos de Trading View!

Esta ha sido la parte más solicitada de mi serie en la biblioteca de gráficos y tengo la intención de actualizarla con el tiempo a medida que simplifique el proceso.