Bot de Telegram

Enviar mensaje con bot de Telegram usando JavaScript (lado del cliente)

Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram usando JavaScript del lado del cliente, es decir, desde el navegador web usando simplemente peticiones http con la función fetch.

JavaScript lado del cliente – Enviar mensaje a usuario de Telegram como bot

Con lo mostrado aquí vas a ser capaz de enviar un mensaje a nombre de tu bot a cualquier usuario que haya interactuado con el bot y que no lo haya bloqueado, obviamente.

La ventaja de esto es que podrás enviar un mensaje a Telegram desde JavaScript sin usar librerías del lado del servidor a cualquier usuario actuando en nombre de tu bot.

Demostración

Si ya cuentas con un token de bot y el id del usuario entonces prueba la demostración sin salir de tu navegador en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/enviar-mensaje-telegram/

A lo largo del artículo te enseñaré el funcionamiento y código esencial además del código completo.

Notas para la comunicación de JavaScript con Telegram

  • Necesitas el ID del usuario al que quieres enviar un mensaje, y ese usuario debió interactuar con el bot previamente, además de que no lo debe tener bloqueado
  • Lo repito: necesitas el id de usuario, no su username o teléfono
  • Puedes obtener el id de usuario reenviando un mensaje al bot https://t.me/get_id_bot (no estoy afiliado ni tengo relación con el bot) y estoy seguro de que debe haber distintas maneras de obtenerlo
  • Vas a enviar el mensaje de Telegram en nombre de tu bot, y no en nombre del usuario. Es decir, la comunicación será de bot a usuario y no de usuario a bot
  • No puedes enviar mensajes de un bot hacia otro bot; solo de un bot a otro usuario
  • Si quisieras enviar un mensaje en nombre de un usuario necesitarías mirar la API MTProto que es mucho más compleja que la API de bots de Telegram.
  • También vas a necesitar contar con un bot y su token, ese lo puedes crear con el BotFather.

Especificación de la API de Telegram

Entonces para comunicarte con un usuario de Telegram como si fueras un bot desde el navegador web debes hacer una petición a:

https://api.telegram.org/bot_TOKEN_/sendMessage

Por ejemplo, si tu bot tiene el token 123:asd la URL sería:

https://api.telegram.org/bot123:asd/sendMessage

La petición es de tipo POST y debes enviar un JSON con las propiedades chat_id y text. El chat_id es el id del usuario al que quieres enviar el mensaje y el text es el mensaje que vas a enviar desde JavaScript hacia Telegram sin librerías.

Vas a encontrar más detalles sobre sendMessage en: https://core.telegram.org/bots/api#sendmessage

Enviar mensaje a usuario en Telegram usando JavaScript

He creado la siguiente función que recibe el id del chat (o id de usuario), el token otorgado por el BotFather y el mensaje que se quiere enviar a la API de Telegram desde el lado del cliente con JS:

const enviarMensaje = async (idChat, token, mensaje) => {
    const url = `https://api.telegram.org/bot${token}/sendMessage`;
    const respuestaHttp = await fetch(url, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            chat_id: idChat,
            text: mensaje,
        }),
    });
    return {
        respuesta: await respuestaHttp.json(),
        codigo: respuestaHttp.status,
    };
}

La API de Telegram está muy bien programada y te va a devolver información incluso cuando haya un error.

El código de respuesta está en respuestaHttp.status que será 200 si todo fue bien y que puedes analizar en caso de que sea otro valor.

Por otro lado, la API siempre devolverá un JSON con la propiedad ok que estará en true en caso de que todo haya ido correctamente, pero que además traerá otras propiedades para depurar errores si es que ha ocurrido alguno.

Poniendo todo junto

El código completo lo encuentras en GitHub: https://github.com/parzibyte/ejemplos-javascript/tree/master/enviar-mensaje-telegram

La demostración se encuentra en: https://parzibyte.github.io/ejemplos-javascript/enviar-mensaje-telegram/

A partir de este ejemplo puedes crear aplicaciones más complejas desde el lado del cliente usando solamente JavaScript, aunque la especificación de la API permite consumirla desde cualquier lenguaje de programación.

Encuentra más detalles sobre la documentación de la API en: https://core.telegram.org/bots/api

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.
parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

Entradas recientes

Creador de credenciales web – Aplicación gratuita

Hoy te voy a presentar un creador de credenciales que acabo de programar y que…

5 días hace

Desplegar PWA creada con Vue 3, Vite y SQLite3 en Apache

Ya te enseñé cómo convertir una aplicación web de Vue 3 en una PWA. Al…

2 semanas hace

Arquitectura para wasm con Go, Vue 3, Pinia y Vite

En este artículo voy a documentar la arquitectura que yo utilizo al trabajar con WebAssembly…

2 semanas hace

Vue 3 y Vite: crear PWA (Progressive Web App)

En un artículo anterior te enseñé a crear un PWA. Al final, cualquier aplicación que…

2 semanas hace

Errores de Comlink y algunas soluciones

Al usar Comlink para trabajar con los workers usando JavaScript me han aparecido algunos errores…

2 semanas hace

Esperar promesa para inicializar Store de Pinia con Vue 3

En este artículo te voy a enseñar cómo usar un "top level await" esperando a…

2 semanas hace

Esta web usa cookies.