Вы живете на глазах у всего мира.

Ну, не вы, а приложение, которое вы создали, для вашей собственной прямой трансляции на Youtube и своего собственного живого чата.

Но что он делает? Анализирует ли он использование смайлов? Отвечает ли он комментаторам? Все зависит от вас.

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

Возможно, вы не разделяете мою одержимость выслеживанием водных питомцев и предпочли бы построить что-то другое и действительно полезное. Думаю, каждому свое. Я здесь, чтобы помочь вам начать работу.

Кстати, если вы похожи на меня и предпочитаете видеоуроки письменным или вам просто нужна видеореклама, чтобы убедиться, что вы правильно следуете инструкциям, я вам помогу:

Итак, приступим к делу.

Предварительный просмотр

Если вы берете на себя эту роль, убедитесь, что у вас есть следующие вопросы.
- Вы знакомы с основами HTML и Javascript (и, надеюсь, с некоторым синтаксисом ES6)
- Вы установите Node.js и поймите, как работает экспресс-сервер
- Вы знаете основы навигации по терминалу

Давайте прочитаем сценарий и поймем, как все сложится в этом сериале.

* A) Найдите нашу прямую трансляцию *
* B) Прочтите сообщения чата из этой трансляции *
* C) Напишите сообщения в этом живом чате *

Давай попробуем это сделать. Просто чтобы проверить, зайдите на YouTube и начните прямую трансляцию. Чтобы убедиться, что мир не увидит вас в боксерах, пока вы тестируете приложение, вы можете зайти в настройки своей прямой трансляции и удалить ее из списка. (Не делайте его личным, иначе вы не сможете вставлять сообщения.)

Теперь мы готовы к практике.

Шаг 1: отрепетируйте свои реплики

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

A) Найдите нашу прямую трансляцию
Чтобы найти наш живой чат, нам нужно найти прямую трансляцию, которой она принадлежит. Эта конечная точка позволяет нам это делать.
В правом разделе "Попробуйте этот API" введите следующие значения:

part: snippet 
broadcastType: all 
mine: true

Нажмите кнопку «ВЫПОЛНИТЬ» внизу раздела. Вам будет предложено войти в систему через свою учетную запись Google. Обратите внимание: при тестировании этих конечных точек на панели управления вам будет предложено войти в систему каждый раз, когда мы сделаем a, но в нашем реальном приложении нам нужно будет выполнить вход только один раз в начале.

Как только вызов будет выполнен, мы должны получить ответы, которые выглядят следующим образом:

{
 "kind": "youtube#liveBroadcastListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/d5wdl5CFbJ9jDiASOujFx_1ie1s\"",
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 5
 },
 "items": [
  {
   "kind": "youtube#liveBroadcast",
   "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/eRkvD6FrUv7IxuR14GnLKw3QqbY\"",
   "id": "ZQdn5iqCKqU",
   "snippet": {
    "publishedAt": "2018-12-28T00:02:49.000Z",
    "channelId": "UCUm0chMKj4MA7q9CWZXWhiA",
    "title": "cambridge",
    "description": "",
    "thumbnails": {
     "default": {
      "url": "https://i.ytimg.com/vi/ZQdn5iqCKqU/default_live.jpg",
      "width": 120,
      "height": 90
     },
     "medium": {
      "url": "https://i.ytimg.com/vi/ZQdn5iqCKqU/mqdefault_live.jpg",
      "width": 320,
      "height": 180
     },
     "high": {
      "url": "https://i.ytimg.com/vi/ZQdn5iqCKqU/hqdefault_live.jpg",
      "width": 480,
      "height": 360
     },
     "standard": {
      "url": "https://i.ytimg.com/vi/ZQdn5iqCKqU/sddefault_live.jpg",
      "width": 640,
      "height": 480
     },
     "maxres": {
      "url": "https://i.ytimg.com/vi/ZQdn5iqCKqU/maxresdefault_live.jpg",
      "width": 1280,
      "height": 720
     }
    },
    "scheduledStartTime": "2018-12-28T00:02:49.000Z",
    "actualStartTime": "2018-12-28T00:03:01.000Z",
    "isDefaultBroadcast": false,
    "liveChatId": "Cg0KC1pRZG41aXFDS3FV"
   }
  }
 ]
}

Найдите первый элемент в массиве «items», это должен быть ваш последний прямой эфир. Скопируйте его значение liveChatId в заметку. Он понадобится нам, чтобы отслеживать сообщения для живого чата.

Б) Чтение сообщений чата из этой трансляции
Мы можем использовать эту конечную точку для чтения сообщений чата из прямой трансляции, которую мы только что определили. Затем, используя nextPageToken из ответа, мы можем позже сделать еще один запрос, чтобы получить сообщения, следующие за сообщениями из нашего предыдущего запроса.
Чтобы подготовиться, перейдите на нашу прямую трансляцию и введите несколько сообщений в чат.

В разделе «Попробовать этот API» справа введите следующее:

liveChatId: OUR_LIVE_CHAT_ID
part: snippet

Нажмите кнопку «ВЫПОЛНИТЬ» внизу, войдите в систему с помощью Google, и вызов API будет выполнен. Ответ должен выглядеть так:

{
 "kind": "youtube#liveChatMessageListResponse",
 "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/XLpfNzFMnLfUcxFUImUCGD4N7jg\"",
 "nextPageToken": "GJzWoLiUwd8CINGwpumUwd8C",
 "pollingIntervalMillis": 3000,
 "pageInfo": {
  "totalResults": 1,
  "resultsPerPage": 1
 },
 "items": [
  {
   "kind": "youtube#liveChatMessage",
   "etag": "\"XI7nbFXulYBIpL0ayR_gDh3eu1k/_ZrJEd-oFkybQypS9RLy2y6ZXgc\"",
   "id": "LCC.Cg8KDQoLbFFJWjd6bFFPNEkSOQoaQ0p6V29MaVV3ZDhDRmUwWmd3b2R5M3NIcVESG0NQWHExTzZTd2Q4Q0ZkV3N4QW9kUjJNTlBBMA",
   "snippet": {
    "type": "textMessageEvent",
    "liveChatId": "Cg0KC2xRSVo3emxRTzRJ",
    "authorChannelId": "UCUm0chMKj4MA7q9CWZXWhiA",
    "publishedAt": "2018-12-27T23:26:35.076Z",
    "hasDisplayContent": true,
    "displayMessage": "testing",
    "textMessageDetails": {
     "messageText": "testing"
    }
   }
  }
 ]
}

Свойство «items» будет содержать фактические сообщения. Что нас больше всего интересует, так это свойство messageText внутри каждого сообщения.

В конце концов нам нужно будет вернуться на несколько секунд назад. Скопируйте «nextPageToken» из ответа. Затем вернитесь в наш чат и введите еще несколько сообщений. Затем перейдите на панель управления API и сделайте еще один запрос, но на этот раз введите значение «nextPageToken» в поле «pageToken».

Выполните вызов еще раз, и на этот раз в ответе должны появиться только наши самые новые сообщения вместе с новым nextPageToken.

C) Вставить сообщение чата
Мы можем вставлять сообщения в чат от имени пользователя, используя this enpoint. Чтобы проверить это, перейдите в раздел Попробуйте этот API справа и заполните его следующим образом:

part: snippet
Request Body:
{
 snippet: {
  type: "textMessageEvent",
  liveChatId: "YOUR_LIVE_CHAT_ID",
      textMessageDetails: {
       messageText: "Hello World",
       }
 }
}

Нажмите кнопку «выполнить» и войдите в систему, чтобы запустить вызов API. Затем посетите свой чат, и ваше сообщение должно появиться.

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

Шаг 3. Подготовьте площадку

Чтобы наше приложение могло авторизовать пользователей для запросов API, оно должно быть зарегистрировано и иметь правильные учетные данные.

Зарегистрируйте свое приложение

  • Сначала убедитесь, что у вас есть аккаунт Google создан
  • Посетите Консоль разработчика Google и создайте новый проект.
  • В Консоли API нажмите Просмотреть все, найдите Youtube Data API v3, выберите его и нажмите Включить.
  • Перейдите в Панель управления учетными данными.
  • Перейдите на вкладку «Экран согласия OAuth» и заполните поле «Имя приложения» любым именем, которое вы хотите дать нашему приложению. Затем убедитесь, что вы нажали «Сохранить» внизу.
  • Вы попадете на экран, где вас попросят предоставить информацию о нашем приложении.
  • В поле «Тип приложения» выберите «Веб-приложение».
  • В поле «Имя» введите любое имя, которое вы хотите для своего приложения.
  • Для «Авторизованных источников Javascript» вы можете оставить это поле пустым, так как ваши запросы API будут поступать с сервера, а не из браузера.
  • В поле «URL-адреса авторизованного перенаправления» введите «http: // localhost: 3000 / callback».
  • Вам дадут «идентификатор клиента» и «секрет клиента», скопируйте их и храните в безопасном месте.

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

Поток Oauth

Чтобы использовать API, Google требует, чтобы мы использовали протокол аутентификации под названием Oauth 2.0. Если вы когда-либо использовали приложение, которое просило вас войти в систему с помощью Facebook, Google, GitHub или другой службы, значит, вы видели Oauth в действии. Теперь нам нужно реализовать это в нашем собственном приложении.

Прежде чем аутентификация действительно произойдет, мы регистрируем наше приложение в Google, чтобы его можно было распознать. В нашем приложении мы определяем список областей, которые представляют разрешения, которые мы хотим предоставить. Другими словами, мы определяем различные типы информационных действий, которые наше приложение запрашивает для разрешения доступа через их учетную запись Google. Затем процесс OAuth примерно выглядит следующим образом:

  1. Когда мы запускаем приложение, мы отправляем пользователя в Google для входа в систему, и ему предлагается согласиться предоставить нашему приложению доступ к своей учетной записи (доступ ограничен запрошенными разрешениями на основе вышеупомянутой области).
  2. После того, как пользователь принял согласие, Google отправляет его обратно в наше приложение с кодом, удостоверяющим его личность.
  3. Наше приложение использует этот код для запроса токена доступа у Google.
  4. Google отвечает токеном доступа. (Примечание: он также отправляет обратно токен обновления, который мы можем использовать для получения нового токена доступа по истечении срока его действия.)
  5. С этим токеном доступа наше приложение может выполнять действия с Youtube API через учетную запись Google этого пользователя.

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

Настроить наш проект

В новой пустой папке создайте следующие три файла:

  • server.js
  • youtubeService.js
  • index.html

В нашем проекте нам нужно будет добавить некоторые зависимости, то есть некоторые библиотеки Javascript, необходимые для его работы:

  • экспресс - для запуска нашего сервера
  • googleapis - библиотека, которая предоставляет простой в использовании интерфейс для вызовов API YouTube.

Давайте начнем с создания файла package.json для отслеживания наших зависимостей, а затем установим эти зависимости. В нашем терминале перейдите в папку нашего проекта и введите следующие команды:

  • npm init — y
  • npm install — save express googleapis

Теперь мы должны увидеть файл «package.json» в папке нашего проекта (и, скорее всего, также «package-lock.json», и в нем две только что установленные библиотеки должны быть перечислены под ключом «dependencies».

Шаг 4: подготовьте сцену

Наконец-то пришло время написать код. Просто чтобы убедиться, что все работает правильно. Давайте просто создадим простой сервер, который будет обслуживать нашу html-страницу.

Запуск Boilerplate

В index.html создайте базовый скелет html.

<!-- index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Youtube ChatBot</title>
  </head>
  <body>
    <h1>Youtube Chatbot</h1>
  </body>
</html>

В «server.js» напишите простой экспресс-сервер, обслуживающий наш html.

// server.js
const express = require('express');
const path = require('path');
const server = express();
server.get('/', (req, res) =>
  res.sendFile(path.join(__dirname + '/index.html'))
);
server.listen(3000, function() {
  console.log('Server is Ready');
});

Чтобы запустить сервер с терминала, убедитесь, что вы указываете на папку своего проекта, и выполните команду node server.js. Как только вы это сделаете, откройте в браузере адрес http: // localhost: 3000, и вы должны увидеть свой html.

Теперь давайте настроим процесс авторизации для этого приложения. В вашем серверном файле. Во-первых, давайте импортируем клиент API в youtubeServer.js и сохраним его функцию функции OAuth2 в переменной, к которой мы можем легко получить доступ.

Затем давайте введем идентификатор клиента, секрет клиента и URI перенаправления из проекта, который мы зарегистрировали в Google. Пока мы занимаемся этим, мы также укажем области, которые будут определять разрешения для этого приложения. Мы также можем создать новый объект Oauth, используя эти учетные данные и нашу функцию OAuth2. Наконец, мы создаем объект, в котором будут храниться функции, которые будет вызывать сервер.

Вот как должен выглядеть наш youtubeService.js:

// youtubeService.js
const { google } = require('googleapis');
const youtube = google.youtube('v3');
const OAuth2 = google.auth.OAuth2;
const clientId = 'YOUR CLIENT ID';
const clientSecret = 'YOUR CLIENT SECRET';
const redirectURI = 'http://localhost:3000/callback'
// Permissions needed to view and submit live chat comments
const scope = [
  'https://www.googleapis.com/auth/youtube.readonly',
  'https://www.googleapis.com/auth/youtube',
  'https://www.googleapis.com/auth/youtube.force-ssl'
];
const auth = new OAuth2(clientId, clientSecret, redirectURI);
const youtubeService = {};
// As we progress throug this turtorial, Keep the following line at the nery bottom of the file
// It will allow other files to access to our functions
module.exports = youtubeService;

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

Давайте начнем с первого маршрута, он запускает процесс аутентификации и отправляет пользователя в Google, чтобы он мог войти в систему. Нам нужна кнопка, которую нужно нажать, чтобы инициировать этот запрос. Маршрут сервера передаст объект ответа в функцию из youtubeService, чтобы она могла перенаправить пользователя. Вот код, который нужно добавить в каждый файл:

Добавьте следующую кнопку в тело html

<!-- index.html -->
<a href="/authorize">
 <button> Authorize </button>
</a>

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

// server.js
const youtubeService = require('./youtubeService.js’);

В том же файле добавьте маршрут, который вызовет функцию getCode из службы youtubeService (которую мы немного определим). Этой функции потребуется доступ к ответу, чтобы перенаправить пользователя, поэтому нам нужно передать это в качестве аргумента.

// server.js
server.get('/authorize', (request, response) => {
  console.log('/auth');
  youtubeService.getCode(response);
});

Теперь мы можем определить эту функцию. Я буду использовать клиент Google API для создания URL-адреса, который пользователь должен посетить, чтобы войти в систему и предоставить разрешения. Затем он использует объект ответа для перенаправления пользователя на этот URL-адрес.

// youtubeService.js
youtubeService.getCode = response => {
  const authUrl = auth.generateAuthUrl({
    access_type: 'offline',
    scope
  });
  response.redirect(authUrl);
};

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

// server.js
server.get('/callback', (req, response) => {
  const { code } = req.query;
  youtubeService.getTokensWithCode(code);
  response.redirect('/');
});

В следующем фрагменте вы заметите, что мы импортируем модули util и fs. Они встроены в node, поэтому нет необходимости добавлять их в наши зависимости. Как вы заметите, мы используем их для создания функций save и read, которые нам понадобятся для сохранения токенов аутентификации в файл, когда мы их получим, и чтения токенов в файле позже, когда они нам снова понадобятся. Таким образом, мы будем иметь к ним доступ даже после перезапуска сервера.

// youtubeService.js
// Put the following at the top of the file
// right below the'googleapis' import
const util = require('util');
const fs = require('fs');
const writeFilePromise = util.promisify(fs.writeFile);
const readFilePromise = util.promisify(fs.readFile);
const save = async (path, str) => {
  await writeFilePromise(path, str);
  console.log('Successfully Saved');
};
const read = async path => {
  const fileContents = await readFilePromise(path);
  return JSON.parse(fileContents);
};

В тот же файл поместите следующий код, но поместите его под всем кодом, который мы написали в предыдущих частях. (Но над оператором экспорта внизу!)

// youtubeService.js
// Request access from tokens using code from login
youtubeService.getTokensWithCode = async code => {
  const credentials = await auth.getToken(code);
  youtubeService.authorize(credentials);
};
// Storing access tokens received from google in auth object
youtubeService.authorize = ({ tokens }) => {
  auth.setCredentials(tokens);
  console.log('Successfully set credentials');
  console.log('tokens:', tokens);
  save('./tokens.json', JSON.stringify(tokens));
};

Теперь у нас должно быть все необходимое, чтобы начать использовать API. Пришло время проверить это. Завершите работу сервера с помощью терминала, набрав ctrl + c, затем снова запустите его с помощью node server.js. Откройте http: // localhost: 3000 »в своем браузере, и вы должны увидеть свой заголовок, а также кнопку авторизовать , которую вы добавили.

Нажмите кнопку, и вы должны быть перенаправлены на страницу входа в Google. Войдите в систему, примите разрешения, и мы будем перенаправлены обратно на вашу html-страницу. Затем откройте папку нашего проекта, и теперь там должен быть файл с именем «tokens.json» с вашими токенами авторизации. Содержимое должно выглядеть примерно так:

{
  "access_token": "reallylongstringofrandomcharacters",
  "refresh_token": "anotherreallylongstringofrandomcharacters",
  "scope": "https://www.googleapis.com/auth/youtube.force-ssl https://www.googleapis.com/auth/youtube.readonly https://www.googleapis.com/auth/youtube",
  "token_type": "Bearer",
  "expiry_date": 1545022007382
}

Если вы не видите файл или его содержимое выглядит иначе, найдите советы по отладке в конце руководства, в разделе «Усовершенствования после обработки».

Наличие токенов, записанных в файл, позволяет нам получить к ним доступ даже после перезапуска сервера. Однако нам нужно написать код для доступа к токенам из файла, используя функцию `read`, которую мы написали ранее. Нам также необходимо написать прослушиватель событий, который будет автоматически использовать «refresh_token» для получения нового «access_token» по истечении срока его действия. К счастью, эта функция встроена в библиотеку googleapis.

Добавьте следующее в наш «youtubeService.js»

// youtubeService.js
// Update the tokens automatically when they expire
auth.on('tokens', (tokens) => {
  if (tokens.refresh_token) {
   // store the refresh_token in my database!
 save('./tokens.json', JSON.stringify(auth.tokens));
 console.log(tokens.refresh_token);
  }
  console.log(tokens.access_token);
});
// Read tokens from stored file
const checkTokens = async () => {
  const tokens = await read('./tokens.json');
  if (tokens) {
    auth.setCredentials(tokens);
    console.log('tokens set');
  } else {
    console.log('no tokens set');
  }
};
// Check tokens as soon as server is started
checkTokens();

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

Шаг 5 - Делаем это вживую!

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

// youtubeService.js
let liveChatId; // Where we'll store the id of our liveChat
let nextPage; // How we'll keep track of pagination for chat messages
const intervalTime = 5000; // Miliseconds between requests to check chat messages
let interval; // variable to store and control the interval that will check messages
let chatMessages = []; // where we'll store all messages

Помните схему и наши тестовые запросы в консоли Google API? Мы выполнили 3 действия. Теперь мы сделаем то же самое, но с реальным кодом. Убедитесь, что у вас есть активная прямая трансляция на нашем канале Youtube, чтобы следующее работало.

Когда мы вернемся к нашим трем большим действиям, добавьте приведенные ниже фрагменты кода в каждый соответствующий файл. Надеюсь, наше пошаговое руководство с диаграммами и консолью with означает, что вы можете понять, что делает код, без особых объяснений.

A) Найдите идентификатор живого чата

<!-- index.html -->
<a href="/find-active-chat">
 <button>
  Get Active Chat
 </button>
</a>
// server.js
server.get('/find-active-chat', (req, res) => {
  youtubeService.findActiveChat();
 res.redirect('/');
});
// youtubeService.js
youtubeService.findActiveChat = async () => {
  const response = await youtube.liveBroadcasts.list({
    auth,
    part: 'snippet',
    mine: 'true',
  });
  const latestChat = response.data.items[0];
  liveChatId = latestChat.snippet.liveChatId;
 console.log('Chat ID Found:', liveChatId)
};

Б) Отслеживание сообщений чата

Как только мы нашли или живем в чате, каждые 5 секунд мы хотим получать все новые сообщения из этого чата.

<!-- index.html -->
<a href="/start-tracking-chat">
 <button>
  Start Tracking Chat
 </button>
</a>
// server.js
server.get('/start-tracking-chat', (req, res) => {
  youtubeService.startTrackingChat();
 res.redirect('/');
});
// youtubeService.js
const getChatMessages = async () => {
  const response = await youtube.liveChatMessages.list({
    auth,
    part: 'snippet',
    liveChatId,
    pageToken: nextPage
  });
  const { data } = response;
  const newMessages = data.items;
  chatMessages.push(...newMessages);
  nextPage = data.nextPageToken;
 console.log('Total Chat Messages:', chatMessages.length)
};
youtubeService.startTrackingChat = () => {
  interval = setInterval(getChatMessages, intervalTime);
};

Перед третьим и последним действием давайте добавим способ остановить интервал, на случай, если мы больше не хотим отслеживать живой чат, но не хотим полностью убивать сервер. Мы можем сделать это, просто очистив интервал.

<!-- index.html -->
<a href="/stop-tracking-chat">
 <button>
  Stop Tracking Chat
 </button>
</a>
server.get('/stop-tracking-chat', (req, res) => {
  youtubeService.stopTrackingChat();
 res.redirect('/');
});
// youtubeService.js
youtubeService.stopTrackingChat = () => {
  clearInterval(interval);
};

В) Добавление собственных комментариев в liveChat

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

<!-- index.html -->
<a href="/insert-message">
 <button>
  Insert Message
 </button>
</a>
// server.js
server.get('/insert-message', (req, res) => {
  youtubeService.insertMessage("Hello World");
  res.redirect('/');
});
// youtubeService.js
youtubeService.insertMessage = messageText => {
  youtube.liveChatMessages.insert(
    {
      auth,
      part: 'snippet',
      resource: {
        snippet: {
          type: 'textMessageEvent',
          liveChatId,
          textMessageDetails: {
            messageText
          }
        }
      }
    },
    () => {}
  );
}

Пора попробовать настоящую вещь.
Завершите работу сервера, затем запустите его снова и проверьте каждую функциональность, нажимая кнопки:

  1. Нажмите кнопку «Получить активный чат» и убедитесь, что идентификатор чата нашей активной прямой трансляции напечатан в консоли.
  2. Нажмите "Начать отслеживающий чат". С этого момента каждые 5 секунд общее количество сообщений должно выводиться на нашу консоль. Добавьте комментарии в наш чат вручную, чтобы убедиться, что наше приложение их улавливает.
  3. Нажмите кнопку «Вставить сообщение», а затем перейдите в наш чат, чтобы убедиться, что сообщение «Hello World» было импортировано.

Следите за своим терминалом на предмет ошибок и просмотрите советы по отладке в разделе 6, если вы их заметите.

Поздравляю! Теперь у вас есть первый чат-бот на Youtube. На данный момент это довольно просто. Все необходимые функции есть, теперь вам нужно написать код, который объединит все это воедино. Если вы точно знаете, как должен работать ваш чат-бот, тогда все готово. Однако, если вам нужны примеры использования для начала и пробуждают творческий потенциал, у меня есть пара рецептов кода в конце этого руководства. Но сначала немного подчистки ...

Шаг 6. Уточнения после обработки

Пока что мы пошли по самому простому пути, чтобы объяснить и продемонстрировать функциональность Youtube API. В результате мы пропустили несколько утомительных, но хороших практик, которые нельзя игнорировать:

Отладка

Если вы знакомы с использованием отладчика, поставляемого с вашим редактором кода, или знаете, как отлаживать Node JS с помощью Chrome, я бы порекомендовал это. В противном случае вы можете использовать операторы console.log в различных функциях, чтобы выявить ошибку. При запуске сценария узла в терминале, поскольку console.log не всегда распечатывает все глубоко вложенные свойства объекта, вы можете использовать util.inspect для их подробного протоколирования. При этом лучший способ избавить себя от головной боли, связанной с отслеживанием ошибки, - это иметь хорошую обработку ошибок.

Обработка ошибок

При создании нашего приложения мы должны убедиться, что у нас есть изящная обработка ошибок обработки ошибок для всех запросов API. Например, поскольку мы используем async await, мы могли бы обернуть каждый запрос try/catch операторами, которые регистрируют ошибки, если они обнаруживаются.

Вот пример

Безопасное хранение конфиденциальных данных
Такие вещи, как client_id, client_secret, токены и важные URL-адреса, не должны быть жестко закодированы в нашем приложении, иначе они будут доступны любому, кто увидит наш код. Вы можете сохранить информацию о своем приложении из Google в файле «.env», а затем получить к ним доступ с помощью библиотеки dotenv, и вместо хранения ваших токенов в дочернем файле было бы безопаснее хранить их в базе данных, используя что-то вроде Монго БД.

Вы найдете примеры этих реализаций в примере кода. Говоря о которых…

Шаг 7. Окончание кредитов

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

Посетите мой канал на YouTube, чтобы получить больше руководств по программированию (включая видеоверсию этого), и свяжитесь со мной там, здесь или в Твиттере, если у вас есть вопросы!

Теперь о вашем бонусном контенте.

Бонусные сцены

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

1) Отвечайте благодарным пользователям

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

Во-первых, нам нужно начать получать данные об авторе для каждого сообщения в чате. В функции getChatMessages измените эту строку:

part: 'snippet'

к этому:

part: ‘snippet,authorDetails’,

Затем создайте новую функцию:

// youtubeService.js
const respond = (newMessages) => {
 newMessages.forEach(message => {
  const messageText = message.snippet.displayMessage.toLowerCase();
  if (messageText.includes('thank')) {
   const author = message.authorDetails.displayName;
   const message = `we're welcome ${author}!`;
   youtubeService.insertMessage(response)
  }
 });
}

И, наконец, вызывайте эту новую функцию каждый раз, когда вы получаете новые сообщения:

// youtubeService.js
const getChatMessages = async () => {
  // Keep the code from before in here, and add the following line
  respond(newMessages);
};

2) Отправьте по электронной почте отчет о вашем живом чате

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

Мы настроим Webhook в IFTTT, который будет отправлять нам электронное письмо, когда получит запрос. Затем мы напишем код в нашем приложении, вычислим статистику, а затем отправим этот запрос в IFTT, как только мы вызовем stopTrackingMessages функцию.

Давайте перейдем к IFTT и настроим наш веб-перехватчик:
- Создайте бесплатную учетную запись на IFTT

Как работает IFTT T
Апплет IFTTT - это в основном простой процесс, который вы определяете следующим образом:

  • Если это то то.
  • Если инициирующее событие], то [желаемое действие]
  • В нашем случае - если [апплет получает запрос], то [отправить электронное письмо]
  • Более конкретно - если [апплет получает запрос, содержащий определенные значения], то [отправляет электронное письмо, содержащее эти значения ]

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

Создание апплета

  • Откройте страницу Создать новый апплет.
  • Щелкните синюю кнопку «Это», чтобы определить инициирующее событие.
  • В разделе «выберите службу» найдите и выберите «веб-перехватчики».
  • В разделе «Выбрать триггер» выберите «Получить веб-запрос».
  • Задайте название события как «youtube_live_chat_report».

Затем начинается действие ..

  • Щелкните синюю кнопку «Это», чтобы определить действие.
  • В разделе «выберите услугу» найдите и выберите «электронная почта».
  • В разделе «Выбрать действие» выберите «Отправить мне электронное письмо».
  • Заполните шаблон электронного письма следующим образом:
Subject: `Youtube Live Chat Report — {{OccurredAt}}`
Body: 
Youtube Live Chat Report<br>
Time: {{OccurredAt}}<br>
Chat Messages: {{Value1}}<br>
Participants: {{Value2}}<br>
— Finish it by clicking on “Create Action”, then clicking “Finish”

И последнее, что нам нужно сделать, это получить URL-адрес, на который следует направить наш запрос.

* Теперь вернемся к нашему коду. *

Во-первых, нам понадобится пара библиотек, которые упростят выполнение этого запроса. В нашем терминале выполняем следующую команду:

npm install —-save request request-promise

Затем импортируйте request-promise в начало youtubeService.js.

// youtubeService.js
var request = require('request-promise');

Кроме того, в верхней части (но ниже операторов импорта) добавьте переменную для хранения URI нашего веб-перехватчика.

// youtubeService.js
const webhookURI = 'our link here'

Затем создайте функцию для добавления статистики из наших сообщений chatMessages.

// youtubeService.js
const calculateChatStats = () => {
 const authors = {};
 messages.forEach(message => {
  const author = message.authorDetails.displayName;
  if (!messagesByAuthor[author]) {
   messagesByAuthor[author] = 1; 
  } else {
   messagesByAuthor[author] += 1; 
  }
 })
 const authorCount = Object.keys(messagesByAuthor).length;
 return {
  messageCount: messages.length,
  authorCount,
 }
}
sendLiveStreamReport = async () => {
 const {
  messageCount: value1,
  authorCount: value2
 } = calculateChatStats();
 const options = {
  method: 'POST',
  uri: webhookURI,
  body: { value1, value2 }
 }
 await request(option)
 console.log('Successfully sent report')
}

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

youtubeService.stopTrackingChat = () => {
  // Keep the code from before and add the following
 sendLiveStreamReport();
};

И это все! Удачи, и еще раз, если вы нашли это полезным, вы можете найти больше моих руководств на Youtube!