• 欢迎访问佰阅部落
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

Telegram机器人:用Javacript创建信息推送页面

搭建教程 佰阅 4年前 (2019-12-23) 4556次浏览 0个评论

对TG机器人的热爱,是近期本站关注的一个重点。因此,在参考了很多前辈们写过的代码后,现对此做一个整理

0.最终完善效果

Telegram机器人:用Javacript创建信息推送页面

0.初步尝试js调用TGbot机器人

目录:

index.html
script.js

首先写个简单的Send发送按钮

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Telegramm Bot</title>
</head>
<body>
		<input type="text" class="chatID" placeholder="请输入chatID"><br>
    	<input type="text" class="message" placeholder="输入要推送的信息"><br>
		<button>发送</button>

<script src="script.js"></script>
</body>
</html>

然后编写script.js代码

document.querySelector('button').onclick = () => {
	
	const token = '1024523851:AAHozZ3P5XVtd100PutbD7MY11Lx6MAqNfg';
    let chatID = document.querySelector('.chatID').value;
    let messageTB = document.querySelector('.message').value;
	const url = `https://api.telegram.org/bot${token}/sendMessage?chat_id=${chatID}&text=`;
	
	let xhttp = new XMLHttpRequest();;

	xhttp.open('GET',url+messageTB, true);
	xhttp.send();
}

运行效果如下:

Telegram机器人:用Javacript创建信息推送页面

 

2.逐步完善一下后

代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Telegramm Bot</title>
</head>
<style>
.message{
    padding: 6px;
    width: 100%;
    margin-bottom: 25px;
    height: 90px;
    border: 1px solid #3f51b5;
    font-size: large;
}
.chatID{
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid #3f51b5;
    font-size: large;
    height: 30px; 
}
.token{
    width: 100%;
    margin-bottom: 25px;
    border: 1px solid #3f51b5;
    font-size: large;
    height: 30px; 
}
.container{
    width: 460px;
    margin: 24px auto 0;
    padding: 25px 65px;
    border: 1px dashed rgb(133, 101, 101);
    border-radius: 15px;
    background: #fff;
}
h1{
    text-align: center;
}
button{
    padding: 1em 2em;
    background-color: #3F51B5;
    color: #fff;
    border-radius: 4px;
    border: none;
    position: relative;
    transition: transform ease-in 0.1s, box-shadow ease-in 0.25s;
    box-shadow: 0 2px 25px #3F51B5;
    display: block;
    margin: 0 auto;
    width: inherit;
}

</style>
<body>
    <div class="container">
            <h1>TG机器人发信测试</h1>
            <input type="text" class="message" placeholder="输入要推送的信息"><br>
            <button>发送</button>
            <p>一些设置:</p>
            <p>发送信息的聊天ID,或者群组名称,示例@BaiyueGroup</p>
            <input type="text" class="chatID" placeholder="请输入chatID"><br>
            <p>填写您的机器人令牌</p>
            <input type="text" class="token" placeholder="请输入机器人令牌Token"><br>
    </div>

    	
<script>
    
document.querySelector('button').onclick = () => {
    let token = document.querySelector('.token').value;
	//const token = '1024523851:AAHozZ3P5XVtd100PutbD7MY11Lx6MAqNfg';
    let chatID = document.querySelector('.chatID').value;
    let messageTB = document.querySelector('.message').value;
	const url = `https://api.telegram.org/bot${token}/sendMessage?chat_id=${chatID}&text=`;
	
	let xhttp = new XMLHttpRequest();;

	xhttp.open('GET',url+messageTB, true);
	xhttp.send();
}    
</script>
</body>
</html>

最终效果如开篇截图那样。

3.小评

这是个人学习TG机器人,初步尝试的产品,虽然再shell命令行和python里有更多扩展,但是最方便入手的,肯定比不上这种单一页面组成的程序。所以,JavaScript还是有必要多学习下。


佰阅部落 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Telegram机器人:用Javacript创建信息推送页面
喜欢 (1)

您必须 登录 才能发表评论!