本文详细阐述了如何利用Telegraf.js框架在后端有效接收并处理由Telegram Web App前端通过`Telegram.WebApp.sendData()`方法发送的数据。教程涵盖了前端数据发送的实现、Telegraf后端监听`message`事件以捕获`web_app_data`字段，以及如何解析和处理这些JSON格式的数据，同时提供了完整的代码示例和重要注意事项，旨在帮助开发者构建功能完善的Web App与Bot交互系统。
理解Telegram Web App数据回传机制
Telegram Web App提供了一种强大的方式，允许开发者在Bot界面内嵌入富交互的网页应用。当用户在Web App中完成特定操作后，通常需要将一些数据回传给Bot进行后续处理。Telegram.WebApp.sendData(data)方法正是为此目的设计的。它允许Web App将一个字符串（通常是JSON格式的字符串）发送回Bot。
重要的是要理解，当sendData()被调用时，Bot并不会触发一个名为web_app_data的独立事件。相反，Telegram会将这些数据封装在一个标准的message更新中，并将其作为web_app_data字段附加到该消息对象上。因此，Telegraf Bot需要监听常规的message事件来捕获这些数据。
前端Web App数据发送
在Web App的前端JavaScript代码中，您需要确保Telegram Web App SDK已加载并准备就绪。然后，可以通过window.Telegram.WebApp.sendData()方法发送数据。为了方便后端解析，通常建议将数据以JSON字符串的形式发送。
以下是一个前端Web App发送数据的示例：
// 确保Telegram Web App SDK已加载并准备就绪window.Telegram.WebApp.ready();// 构造要发送的数据对象const dataToSend = { action: 'user_auth', userId: 12345, username: 'john_doe', timestamp: Date.now()};// 将数据对象转换为JSON字符串并发送try { window.Telegram.WebApp.sendData(JSON.stringify(dataToSend)); // 数据发送成功后，可以选择关闭Web App // window.Telegram.WebApp.close(); console.log('数据已成功发送至Bot。');} catch (error) { console.error('发送数据失败:', error);}
在这个例子中，我们创建了一个包含action、userId、username和timestamp字段的对象，并使用JSON.stringify()将其转换为字符串后发送。
Telegraf后端数据接收与处理
在Telegraf Bot的后端，我们需要设置一个message事件监听器来捕获所有传入的消息，然后检查这些消息是否包含web_app_data字段。
启动Web App的Bot代码
首先，确保您的Bot能够通过内联键盘按钮启动Web App：
const { Telegraf } = require('telegraf');require('dotenv').config(); // 如果使用 .env 文件管理 BOT_TOKENconst bot = new Telegraf(process.env.BOT_TOKEN);// 替换为您的Web App的实际URLconst FRONT_URL = 'https://your-web-app-domain.com';bot.start(async (ctx) => { await ctx.reply('欢迎使用我们的Web App！请点击下方按钮启动。', { reply_markup: { inline_keyboard: [ [{ text: '启动我的Web App', web_app: { url: FRONT_URL } }] ] } });});
接收和解析Web App数据
接下来，添加一个bot.on(‘message’)监听器。在这个监听器内部，您需要检查ctx.message.web_app_data是否存在，如果存在，则提取并解析其中的数据。
bot.on('message', async (ctx) => { // 打印完整的消息对象，有助于调试 console.log('接收到消息:', ctx.message); // 检查消息是否包含 web_app_data 字段 if (ctx.message && ctx.message.web_app_data) { const webAppData = ctx.message.web_app_data; const receivedDataString = webAppData.data; // 这是前端sendData()发送的字符串 console.log('接收到Web App数据字符串:', receivedDataString); try { // 尝试将接收到的JSON字符串解析为JavaScript对象 const parsedData = JSON.parse(receivedDataString); console.log('解析后的Web App数据:', parsedData); // 根据解析出的数据执行相应的业务逻辑 if (parsedData.action === 'user_auth') { await ctx.reply( `成功接收到用户认证数据：用户ID ${parsedData.userId}，用户名 ${parsedData.username}。` ); // 在这里可以进行用户认证、数据库更新、发送确认消息等操作 // 例如：await authenticateUser(parsedData.userId, parsedData.username); } else { await ctx.reply(`接收到未知Web App数据动作: ${parsedData.action || '未指定'}`); } } catch (error) { console.error('解析Web App数据时发生错误:', error); await ctx.reply('接收到的Web App数据格式不正确，请检查。'); } } else { // 如果不是Web App数据，则按常规消息处理 await ctx.reply(`您发送了普通消息: "${ctx.message.text || '（无文本）'}"`); }});// 启动Botbot.launch();// 优雅地停止Botprocess.once('SIGINT', () => bot.stop('SIGINT'));process.once('SIGTERM', () => bot.stop('SIGTERM'));
完整示例代码
结合上述代码片段，一个完整的Telegraf Bot示例将如下所示：
const { Telegraf } = require('telegraf');require('dotenv').config(); // 确保您已安装 dotenv 包并配置 .env 文件// 替换为您的Bot Tokenconst bot = new Telegraf(process.env.BOT_TOKEN);// 替换为您的Web App的实际URLconst FRONT_URL = 'https://your-web-app-domain.com'; // 例如：https://my-awesome-webapp.vercel.app// Bot的启动命令处理bot.start(async (ctx) => { await ctx.reply('欢迎使用我们的Web App！请点击下方按钮启动。', { reply_markup: { inline_keyboard: [ [{ text: '启动我的Web App', web_app: { url: FRONT_URL } }] ] } });});// 监听所有消息事件，包括Web App发送的数据bot.on('message', async (ctx) => { console.log('接收到消息:', ctx.message); // 检查消息中是否包含 web_app_data 字段 if (ctx.message && ctx.message.web_app_data) { const webAppData = ctx.message.web_app_data; const receivedDataString = webAppData.data; // 这是前端sendData()发送的字符串 console.log('接收到Web App数据字符串:', receivedDataString); try { // 尝试将接收到的JSON字符串解析为JavaScript对象 const parsedData = JSON.parse(receivedDataString); console.log('解析后的Web App数据:', parsedData); // 根据解析出的数据执行相应的业务逻辑 if (parsedData.action === 'user_auth') { await ctx.reply( `? 认证成功！接收到用户数据：用户ID ${parsedData.userId}，用户名 ${parsedData.username}。` ); // 在这里可以进行用户认证、数据库更新、发送确认消息等操作 // 例如：await authenticateUser(parsedData.userId, parsedData.username); } else if (parsedData.action === 'submit_form') { await ctx.reply(`✅ 表单提交成功！数据：${JSON.stringify(parsedData.formData)}`); } else { await ctx.reply(`ℹ️ 接收到未知Web App数据动作: ${parsedData.action || '未指定'}`); } } catch (error) { console.error('解析Web App数据时发生错误:', error); await ctx.reply('⚠️ 接收到的Web App数据格式不正确，请检查。'); } } else { // 处理普通消息 await ctx.reply(`您发送了普通消息: "${ctx.message.text || '（无文本）'}"`); }});// 启动Botbot.launch();console.log('Bot已启动...');// 优雅地停止Botprocess.once('SIGINT', () => { bot.stop('SIGINT'); console.log('Bot已停止 (SIGINT)');});process.once('SIGTERM', () => { bot.stop('SIGTERM'); console.log('Bot已停止 (SIGTERM)');});
注意事项
数据格式: Telegram.WebApp.sendData()方法只接受一个字符串作为参数。因此，如果您需要发送结构化数据（如对象或数组），务必使用JSON.stringify()将其转换为JSON字符串。后端接收后，再使用JSON.parse()将其解析回JavaScript对象。错误处理: 在解析Web App数据时，务必使用try-catch块来处理JSON.parse()可能抛出的错误，以防前端发送了非法的JSON字符串。安全性: 尽管数据是从用户设备上的Web App发送的，但您仍然应该在后端对接收到的数据进行验证和清理，以防止恶意输入或不期望的数据格式。不要完全信任来自前端的任何数据。Web App关闭: 在数据发送完成后，您可以使用window.Telegram.WebApp.close()方法自动关闭Web App，将用户带回Bot聊天界面，提升用户体验。bot.on(‘web_app_data’)的误区: Telegraf框架中没有直接的bot.on(‘web_app_data’)事件监听器来处理Telegram.WebApp.sendData()回传的数据。这些数据总是通过bot.on(‘message’)事件，并存在于ctx.message.web_app_data字段中。
总结
通过上述教程，您应该已经掌握了如何在Telegraf.js Bot中成功接收和处理来自Telegram Web App的数据。关键在于理解Telegram.WebApp.sendData()将数据封装在message更新的web_app_data字段中，并正确地在Telegraf Bot中使用bot.on(‘message’)监听器来捕获和解析这些数据。遵循这些步骤和注意事项，您将能够构建健壮且功能丰富的Telegram Bot与Web App交互系统。
以上就是如何使用Telegraf.js接收Telegram Web App发送的数据的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530217.html
微信扫一扫 
支付宝扫一扫 
