Как добавить чат в прямую трансляцию Amazon IVS

Добро пожаловать в эту серию статей, в которой мы узнаем все о прямых трансляциях в облаке с помощью Amazon Interactive Video Service (Amazon IVS). Если вы новичок в этой серии, вот что мы уже рассмотрели:

* Начало работы с прямой трансляцией в облаке с помощью Amazon IVS * Создание вашего первого опыта воспроизведения в прямом эфире с помощью Amazon IVS * Расширение возможностей воспроизведения Amazon IVS * Создание интерактивных прямых трансляций с использованием временных метаданных с помощью Amazon IVS

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

:::информация Если вы хотите подыгрывать этому сообщению в блоге дома, вам нужно будет создать свой собственный чат. Комнаты чата Amazon IVS требуют пользовательских токенов, поэтому вам потребуется подключить собственный токен и конечную точку чата во встроенной демонстрации ниже, чтобы опробовать ее!

:::

Создание чата

Первым шагом здесь является создание чата для нашего приложения.

:::информация Бесплатно? Уровень бесплатного пользования AWS для Amazon IVS предоставляет 13 500 отправлено и доставлено 270 000 сообщений ежемесячно. Зарегистрируйтесь, чтобы начать бесплатно!

:::

Я также должен упомянуть, что на дату публикации этого поста Amazon IVS Chat доступен в следующих регионах:

* сша-восток-1 * сша-запад-2 * ес-запад-1

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

Использование консоли

Один из способов создать нашу комнату чата — использовать Консоль управления Amazon IVS. На главной странице консоли разверните Чат и выберите Комнаты На странице со списком комнат чата нажмите Создать комнату.

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

Далее в разделе Обработчик просмотра сообщений оставьте выбранным Отключено.

Обработчик просмотра сообщений — это действительно мощный способ обеспечить модерацию сообщений чата ИИ через Лямбда-функция AWS. Согласно тексту справки:

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

:::

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

Введите любые желаемые теги для этого ресурса, а затем нажмите Создать комнату.

Наша комната будет создана без задержки, и мы будем перенаправлены на страницу сведений о комнате. На этой странице вы увидите сводку конфигурации комнаты. Важная часть, которая нам понадобится в этом разделе, — это конечная точка обмена сообщениями. Поскольку комнаты чата Amazon IVS основаны на WebSockets, это безопасная конечная точка, которую мы будем использовать во внешнем интерфейсе для подключения к нашей комнате чата.

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

Использование интерфейса командной строки AWS

Мы также можем использовать интерфейс командной строки AWS для создания комнаты чата с помощью следующей команды.

$ aws ivschat create-room --name my-first-ivs-chat-room

Что возвращает информацию о комнате чата в формате JSON:

{
    "arn": "arn:aws:ivschat:us-east-1:[redacted]:room/[redacted]",
    "createTime": "2022-08-05T12:46:17.945000+00:00",
    "id": "j0mJloyM8mOy",
    "maximumMessageLength": 500,
    "maximumMessageRatePerSecond": 10,
    "name": "my-first-ivs-chat-room",
    "tags": {},
    "updateTime": "2022-08-05T12:46:17.945000+00:00"
}

CLI не возвращает конечную точку обмена сообщениями. Впрочем, определить это несложно. Вариантов всего три, и они соответствуют региону, в котором создан ваш чат.

| Регион | Конечная точка | |----|----| | сша-восток-1 | | | сша-запад-2 | | | ес-запад-1 | |

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

$ aws 
    ivschat 
    create-chat-token 
    --room-identifier "[YOUR CHAT ROOM ARN]" 
    --user-id "[A UNIQUE ID FOR THIS USER]" 
    --capabilities "SEND_MESSAGE"

Интеграция чата

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

<form id="settings-form" class="needs-validation" novalidate>

  <div class="mb-3 row">
    <label for="chat-token" class="col-sm-2 col-form-label">Chat Token</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="chat-token" required />
    </div>
  </div>

  <div class="mb-3 row">
    <label for="chat-endpoint" class="col-sm-2 col-form-label">Endpoint</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="chat-endpoint" placeholder="Begins with: wss://" required />
    </div>
  </div>

  <div class="mb-3 row">
    <div class="col-sm-10 offset-sm-2">
      <button type="submit" class="btn btn-dark" id="submit-settings" disabled>Submit</button>
    </div>
  </div>

</form>

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

import AWS from 'aws-sdk';

const credentials = new AWS.Credentials({
  accessKeyId: process.env.ACCESS_KEY,
  secretAccessKey: process.env.SECRET_KEY,
});
const IvsChat = new AWS.Ivschat({ region: 'us-east-1', credentials });

const createToken = async () {
  let token;

  const params = {
    roomIdentifier: "[YOUR CHAT ARN]",
    userId: "[UNIQUE USERID]",
    attributes: {},
    capabilities: ['SEND_MESSAGE'],
    sessionDurationInMinutes: 60,
  };
  try {
    const data = await IvsChat.createChatToken(params).promise();
    token = data.token;
  }
  catch (e) {
    console.error(e);
    throw new Error(e);
  }
  return token;
}

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

<div id="chat-container" class="d-none">
  <div id="chat" class="border rounded mb-3 p-3" style="height: 300px; overflow-y: auto;"></div>
    <div id="chat-input-container">
      <div class="input-group">
        <input id="chat-input" placeholder="Message" maxlength="500" type="text" class="form-control" />
        <button id="submit-chat" class="btn btn-outline-secondary">Send</button>
      </div>
  </div>
</div>

Мы прослушиваем отправку формы, и когда это происходит, мы можем инициализировать соединение WebSocket комнаты чата.

const endpoint = document.getElementById('chat-endpoint').value;
const token = document.getElementById('chat-token').value;

window.chatConnection = new WebSocket(endpoint, token);

Здесь применяются все стандартные события WebSocket. Например, для прослушивания входящих сообщений мы используем onmessage.

window.chatConnection.onmessage = (event) => {
  // parse the event data
  const data = JSON.parse(event.data);

  // append the incoming msg to the chat
  const msgHtml = `<div class="mb-2"><b class="text-primary">${data.Attributes.username}</b>: ${data.Content}</div>`;
  const chatContainer = document.getElementById('chat');
  chatContainer.innerHTML += msgHtml;
  chatContainer.scrollTop = chatContainer.scrollHeight;
};

И, наконец, прослушиватель событий на кнопке Отправить, который отправит сообщение с помощью chatConnection.

document.getElementById('submit-chat').addEventListener('click', () => {
  const msgInput = document.getElementById('chat-input');
  const payload = {
    "action": "SEND_MESSAGE",
    "content": stripHtml(msgInput.value),
    "attributes": {
      "username": username
    }
  }
  try {
    window.chatConnection.send(JSON.stringify(payload));
  }
  catch (e) {
    console.error(e);
  }
  msgInput.value = '';
  msgInput.focus();
});

Демонстрация

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

Проверьте полный исходный код в CodePen выше, чтобы увидеть полный пример.

Обзор

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

Также опубликовано здесь