Как отправлять сообщения с сайта в Telegram

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

blog.maxgraph.ru / src / blog / kak-otpravlyat-zayavku-s-sajta-v-telegram / index.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Cannot retrieve contributors at this time
106 lines (83 sloc) 7.42 KB

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents Copy raw contents

Copy raw contents

Как отправлять заявку с сайта в Телеграм?

Доброго времени суток, друзья! Сегодня у нас второй выпуск лайфхаков для верстальщика. И, если Вы видели предыдущий — знаете, что сегодня за тема:) Поехали!

Рассказываю, как легко сделать отправку данных с сайта в телеграм
img/cover.jpg

Как отправить сообщения с эффектом в Telegram ?

Как отправлять заявку с сайта в Telegram?

Все мы знаем, что очень часто на самые разнообразные сайты нужна форма обратной связи. Там человек может оставить свои контактные данные, чтобы люди, представляющие сайт, смогли с ним связаться. И да, отправка эта часто производится на обычную почту (e-mail). Однако сейчас, благодаря открытому и несложному API Telegram можно спокойно настраивать отправку этих же сообщений в него. Зачем?

Это быстрее и гораздо удобнее. Сразу, в специальном чате, у вас появится заявка от пользователя.

Работа с формой

Теперь нужно создать форму и правильно ее разметить для работы с отправкой по Php. Ниже приведен пример типичной формы на HTML:

• В form action должно быть обязательно написано telegram.php
• Сама кнопка должна быть типа submit
• Так же у формы должен быть method=»POST»
• У каждого инпута должен быть прописан атрибут name

Далее нужно написать несложный php-скрипт для работы нашей отправки:

$name = $_POST[‘name’]; $phone = $_POST[‘phone’]; $email = $_POST[’email’]; $msg = $_POST[‘msg’]; $token pl-s»>1007513873:AAHRuGZ8Cr1wULSsMevQi6S1KtbdwbSyfiU»; $chat_id pl-s»>-399030555″; $arr = array( ‘Имя пользователя: ‘ => $name, ‘Телефон: ‘ => $phone, ‘Email’ => $email, ‘Сообщение:’ => $msg ); foreach($arr as $key => $value) < $txt . pl-s»> «.$key.» «.$value.»%0A»; >; $sendToTelegram = fopen(«https://api.telegram.org/bot$token>/sendMessage?chat_id=$chat_id>text=$txt>»,»r»); if ($sendToTelegram $sendToTelegram2) < header(‘Location: thanks.html’); > else < echo «Error»; > ?>

• В переменные $name , $phone и т.д. нужно вписать значения атрибута name из html
• В переменную $token запишите созданный вами ранее токен у BotFather

Что делать с chat_id

Сообщения с сайта в чат Telegram

И далее остается лишь отправить нашу форму. Надеюсь, смог вам помочь, а если текстового описания вам недостаточно — в начале статьи есть видео с моего ютуб-канала.

Источник: github.com

Надоевшая почта или как отправлять сообщения с сайта в Telegram через Node.js (Express)

После нескольких писем, отправленных с сайта себе на почту, понял что это достаточно неудобно, не современно (возможно), как минимум не прикольно. Задался целью отказаться от использования smtp для формы в пользу api Телеграма.

Так как мое приложение работает на ноде, подумал почему бы не прокачать форму. Общая логика до боли проста. При отправке формы делается запрос к api приложения, где хранится токен бота, обрабатываются данные и далее делается запрос к api телеграмма, который отправляет сообщение в чат.

Но давайте обо всем по порядку.

Для начала, естественно, необходимо создать бота, который будет получать данные из формы и отправлять вам. По сути, он является всего лишь посредником между вами и api телеграмма.

Создали, хорошо, но надо оживить его. Ищем его в поиске по нику и пишем /start. Все, теперь можем обращаться к нему через api.

Далее необходимо создать группу, куда бот будет кидать сообщения, не забываем добавить его в чат.

Идем в браузер и в адресной строке вводим:

https://api.telegram.org/botXXXXXXXXXXXXXXXXXXXXXXX/getUpdates

Если все прошло успешно, то получим примерно такую простыню из букв, где необходимо найти объект «chat»: . Обычно id группового чата начинается с минуса.

Отлично, получили токен бота и id чата, куда будут приходить сообщения.
Теперь давайте приступим к приложению.

Front

Начнем сначала с фронта.

Я использовал для работы Node обёртку Express, который в свою очередь умеет рендерить файлы различных шаблонизаторов. Решил воспользоваться Pug. Он достаточно прост в освоении, поэтому если впервые сталкиваетесь с ним, труда познакомится с ним не возникнет. Для примера не стал использовать сборщики, поэтому скрипты подключаются по старинке.
Структура приложения сгенерирована с помощью Express Generator.

Разметка формы

views/layout.pug:

doctype html html head title= title link(rel=»stylesheet», href=»https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css») link(rel=’stylesheet’, href=’/stylesheets/style.css’) body block content

views/index.pug:

extends layout block content .wrapper .wrapper__bg img.wrapper__bg-img(src=’/images/bg.jpg’ alt=’bg’) form(action=»/telegram», method=»post» enctype=»application/x-www-form-urlencoded») .form__container .form__blur .form__title .form__title-line h3.form__title-text Связаться со мной .form__title-line .form__inputs input(type=»text» name=’name’ placeholder=»Имя» required) input(type=»email» name=’email’ placeholder=»Email» required) textarea(name=»text» placeholder=»Ваше сообщение» form__message» required) .form__buttons input(type=»submit» value=»Отправить») .form__clean Очистить script(src=»https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.js») script(src=»https://habr.com/javascripts/app.js»)

Не забываем что в Pug вложенность элементов определяется отступами, как в питоне, так что учитывайте это.

Добавляем стили и вот такая форма у меня получилась.

Сообщение будет отправляться без перезагрузки страницы, поэтому вешаем обработчик на форму, собираем данные, преобразуем в json и отправляем их асинхронно себе в api + выводим сообщение о статусе запроса.

public/javascripts/app.js:

const formId = ‘telegramForm’ const form = document.getElementById(formId) //функция для захвата данных из тегов формы и синтеза JSON-обьекта function toJSONString(form) < var obj = <>var elements = form.querySelectorAll(‘input, select, textarea’) for (var i = 0; i < elements.length; ++i) < var element = elements[i] var name = element.name var value = element.value if (name) < obj[ name ] = value >> return JSON.stringify(obj) > if (form) < form.addEventListener(‘submit’, event =>< event.preventDefault() //получаем данные из формы const json = toJSONString(form) //создаем соединение const formReq = new XMLHttpRequest() formReq.open(‘POST’, ‘/telegram’, true) /////////////////////////////////// /////////////SweetAlert////////// /////////////////////////////////// //обрабатываем ответ сервера formReq.onload = function(oEvent) < if (formReq.status === 200) < swal(< title: ‘Успешно отправлено!’, icon: ‘success’, timer: 2000 >) document.querySelector(‘.sa-success’).style.display = ‘block’ document.querySelector(‘.sa-button-container’).style.opacity = ‘0’ > if (formReq.status !== 200) < swal(< title: ‘Произошла ошибка!’, icon: ‘error’, timer: 2000 >) document.querySelector(‘.sa-error’).style.display = ‘block’ document.querySelector(‘.sa-button-container’).style.opacity = ‘0’ > > //////////////////////////// //////////////////////////// formReq.setRequestHeader(‘Content-Type’, ‘application/json’) //отправляем formReq.send(json) >) >

Back

На стороне сервера для начала нужно отловить запрос со стороны клиента, для этого в роутере пишем:

routes/index.js:

//Я вынес логику обработки данных в отдельный файл const ctrlTelegram = require(‘../api/telegramMsg’); router.post(‘/telegram’, ctrlTelegram.sendMsg);

api/telegramMsg.js:

module.exports.sendMsg = (req, res) => < //токен и id чата берутся из config.json const config = require(‘../config/config.json’); let http = require(‘request’) let reqBody = req.body //каждый элемент обьекта запихиваем в массив let fields = [ ‘Name: ‘ + reqBody.name, ‘Email: ‘ + reqBody.email, reqBody.text ] let msg = » //проходимся по массиву и склеиваем все в одну строку fields.forEach(field => < msg += field + ‘n’ >); //кодируем результат в текст, понятный адресной строке msg = encodeURI(msg) //делаем запрос http.post(`https://api.telegram.org/bot$/sendMessage?chat_id=$text=$`, function (error, response, body) < //не забываем обработать ответ console.log(‘error:’, error); console.log(‘statusCode:’, response response.statusCode); console.log(‘body:’, body); if(response.statusCode===200)< res.status(200).json(); > if(response.statusCode!==200)< res.status(400).json(); > >); >

Для упрощения процесса запроса установлен пакет ‘request’.

npm i request

config/config.json:

Итак, что же здесь происходит?

В запросе мы передали json, поэтому на стороне сервера с данными можем работать как с обычным объектом.

Для удобства каждое значение объекта запихиваем в массив.
API телеграмма позволяет передать данные посредством текста в адресной строке, поэтому проходим по массиву и создаём длинную строку. Чтобы можно было передать HTML теги, необходимо закодировать строку в универсальный идентификатор (метод encodeURI()), чтобы не вылезала ошибка.

Теперь можно наконец отправить это всё на сервер телеграмма. Делаем запрос (нажимаем кнопку ‘Отправить’) и вуаля, сообщение отправлено. Не забываем обработать ответ, а то мало ли что.

После всех манипуляций, ответ приходит на фронт и уведомляет прошло все норм или не очень.
Из-за того, что для примера не использовал сборщик, а библиотечка всплывашки рассчитана на модульную сборку, пришлось немного поколхозить при ее вызове на фронте.

Если посмотреть в логи приложения на сервере, можно увидеть примерно следующее:

Поздравляю! Теперь вы знаете как отправлять сообщения с вашего сайта в Telegram.

Я описал только общую концепцию данного процесса, поэтому настоятельно рекомендую ознакомится с исходным кодом данного примера.

Источник: habr.com

Как отправлять сообщения с сайта в telegram

Отправка сообщений в Telegram из PHP-скриптов

Достаточно долгое время у меня были настроены уведомления с сайта на ICQ, это было очень удобно. Потом что-то изменилось в протоколе авторизации мессенджера, уведомления перестали приходить, разбираться с этим мне было лениво, в результате последние пару лет я жил без оперативного информирования. Решив исправить эту ситуацию, я начал искать альтернативы из числа мессенджеров, которыми постоянно пользуюсь. Viber отпал из-за сложностей регистрации бот-аккаунтов, остался Telegram. Вот на нем я и сделал своего информационного бота для сайта.

Регистрируем бота

Там же можно настроить описание и выбрать аватарку, но, на мой взгляд, для информационного бота это уже лишнее.

Получаем токен

Если в настройках бота включен режим приватности (а он включен по умолчанию), то все сообщения, отправляемые ботом конкретному пользователю, не будут видны остальным подписчикам этого бота. Именно это нам и надо, ведь мы же не хотим, чтобы кто-то, случайно подписавшись на нашего бота, перехватывал все наши уведомления. Чтобы бот отправлял сообщения только нам, надо узнать идентификатор нашего чата.

Отправляем сообщение боту

Для этого подпишитесь на своего бота и отправьте ему любое сообщение. После этого в браузере надо сформировать ссылку следующего вида:

https://api.telegram.org/bot [token] /getUpdates
где [token] — это токен, полученный при регистрации бота. Например, для нашего бота ссылка будет вот такой:

https://api.telegram.org/bot 629705209:AAFhFqFbhR3VHHrOgOM7R4OnQT-usqJwTBk /getUpdates

Если все сделано правильно, то в браузере откроется что-то подобное:

{«ok»:true,»result»:[
{
«update_id»:434540657,
«message»:{
«message_id»:3,
«from»:{
«id»: 698237240 ,
«is_bot»:false,
«first_name»:»Dmitry»,
«language_code»:»ru»
},
«chat»:{
«id»: 698237240 ,
«first_name»:»Dmitry»,
«type»:»private»
},
«date»:1536053889,
«text»:»Hello»
}
}
]}

Красным цветом выделен нужный нам идентификатор чата. Если ответ пустой, то напишите боту еще парочку сообщений в чат и сразу же обновите страницу в браузере. В связи с недавними событиями по неудачной блокировке Telegram недоумками из Роскомнадзора, сайт api.telegram.org у некоторых провайдеров может оказаться недоступен. В этом случае придется воспользоваться Tor Browser или каким-нибудь другим инструментом для обхода блокировок.

Теперь переходим к самому интересному — отправке сообщений из скрипта в наш чат. Для этого в API Telegram есть метод sendMessage. Он принимает как GET, так и POST запросы. Обязательными параметрами являются chat_id — идентификатор чата и text — текст сообщения. Пример вызова будет таким:

1. // Токен бота и идентификатор чата
2. $token = ‘629705209:AAFhFqFbhR3VHHrOgOM7R4OnQT-usqJwTBk’ ;
3. $chat_id = ‘698237240’ ;
4. // Текст сообщения
5. $text = ‘Привет, мир!’ ;
6. // Отправить сообщение
7. $ch = curl_init ();
8. curl_setopt ( $ch , CURLOPT_URL ,
9. ‘https://api.telegram.org/bot’ . $token . ‘/sendMessage’ );
10. curl_setopt ( $ch , CURLOPT_RETURNTRANSFER , true );
11. curl_setopt ( $ch , CURLOPT_HEADER , false );
12. curl_setopt ( $ch , CURLOPT_SSL_VERIFYPEER , false );
13. curl_setopt ( $ch , CURLOPT_POST , true );
14. curl_setopt ( $ch , CURLOPT_POSTFIELDS ,
15. ‘chat_id=’ . $chat_id . ‘
16. curl_setopt ( $ch , CURLOPT_CONNECTTIMEOUT , 10 );
17. // Настройки прокси, если это необходимо
18. $proxy = ‘111.222.222.111:8080’ ;
19. $auth = ‘login:password’ ;
20. curl_setopt ( $ch , CURLOPT_HTTPPROXYTUNNEL , 1 );
21. curl_setopt ( $ch , CURLOPT_PROXY , $proxy );
22. curl_setopt ( $ch , CURLOPT_PROXYUSERPWD , $auth );
23. // Отправить сообщение
24. $result = curl_exec ( $ch );
25. curl_close ( $ch );

Поскольку объем текста сообщения может быть значительным, я использую отправку через POST. Опять же по причине блокировок может получиться так, что ваш хостинг-провайдер или один из промежуточных узлов раздвинул булки перед Роскомнадзором и не пропускает прямые запросы к API Telergam. В этом случае придется воспользоваться каким-нибудь забугорным прокси-сервером. Лично я для своих нужд прикупил за малую денежку один прокси. В качестве проверенного сервиса могу порекомендовать Proxy.Market.

Если вы вдруг закрыли чат с информационным ботом, то идентификатор чата придется получать заново. И, соответственно, прописать его в настройках. Это же касается и токена, при его изменении надо будет внести изменения и в скрипты.

Как видите, ничего сложного. Конечно, возможности API Telegram не ограничиваются только информированием, вы можете сделать, например, обратную связь и управлять функциями сайта прямо с телефона. Для моих задач это пока не нужно, но в будущем что-нибудь подобное я наверняка реализую.

Источник: www.manhunter.ru