Создайте бессерверное WebSocket-приложение за 5 минут с помощью Lolo

Первоначально опубликовано здесь.

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

Serverless обычно ассоциируется с FaaS — изолированной функцией без статического состояния, которая запускается другим сервисом. Создание приложения Serverless Websocket потребует от вас использования AWS Lambda с WebSockets в API Gateway и DynamoDB для хранения соединений. Это слишком сложно.

Мы покажем вам, как создать что-то более быстрое. Бессерверные платформы iFaaS не требуют инициализации перед выполнением функции, поэтому вы не платите за пробуждение контейнера после его развертывания. Технически он всегда работает. У вас также есть доступ к встроенному хранилищу ключей и значений, что означает, что вы не теряете состояние между последующими вызовами. То есть, вам не нужно начинать с чистого листа при каждом вызове. Отсюда отсутствие необходимости во внешней базе данных, такой как DynamoDB.

План

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

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

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

Создание приложения и добавление триггера

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

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

Обработка входящего запроса

Когда вы добавляете этот WebSocket-триггер, вы получаете три выходных порта в узле под названием req, message и close, поэтому вам нужно настроить способы обработки этих запросов. Добавьте еще одну встроенную функцию (т.е. пользовательскую функцию) и назовите ее ‘Process Request’. Удалите порт in и вместо него добавьте три порта in с названиями req, msg и close.

Свяжите эти порты с нужными портами in и out с помощью узлов, смотрите ниже иллюстрацию того, как это сделать.

Нам нужно немного кода, чтобы сделать что-то с WebSocket-соединением. Скопируйте и вставьте код ниже. Откройте узел Process Request и вставьте приведенный ниже код в обработчик.

const connections = {};

exports.handler = async (ev, ctx) => {
  const { route, input, inputs, log, emit } = ctx;
  const { sessionId } = ev;

  // check incoming port (i.e. req, message or close)
  switch (input) {

    // on first connection
    case inputs.req:
      connections[sessionId] = {
        send: body => emit('response', { body }),
        end: () => emit('response', { end: true }),
        info: ev.headers
      }
      ev.body = { connected: true, yourConnectionId: sessionId };
      // re-route data to 'req' output port
      route(ev, 'req');
      break;

    // on subsequent messages 
    case inputs.msg:
      // re-route data to 'msg' output port
      route({ connections, message: ev.message, sessionId }, 'msg')
      break;

    // when client disconnects 
    case inputs.close:
      log.info("client has disconnected");
      delete connections[sessionId];
      break;
  }
};

Войти в полноэкранный режим Выйти из полноэкранного режима

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

Приведенный выше код также перенаправляет сообщения на другие узлы с помощью метода route(). Как вы можете видеть, у нас есть два выходных маршрута к ‘req’ и ‘msg’. Поэтому нам нужно добавить эти два выходных порта.

Отправка ответа

Теперь у нас есть два выходных порта в функции Process Request Function, которые нужно куда-то отправить, поэтому мы создаем еще одну встроенную функцию под названием Affirm Connection и вставляем в нее приведенный ниже код.

Все, что это делает, — сигнализирует слушателю в триггере WebSocket Trigger об отправке ответа клиенту. Мы направим маршрут req в этот узел.

exports.handler = async(ev, ctx) => {
  const { emit, log } = ctx;
  // Log to the console that a client has connected
  log.info("client has connected");
  // send response to the client
  emit('response', ev);
};
Вход в полноэкранный режим Выход из полноэкранного режима

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

exports.handler = async (ev, ctx) => {
  // extract connections, and current session id from the event data
  const { connections, sessionId } = ev;
  // send messages
  await broadcastToAll(ctx, connections, sessionId, ev);
};

const broadcastToAll = async ({ log }, connections, currentSessionId, ev) => {

  // loop through connections
  Object.keys(connections).forEach(sessionId => {
    try {
        // send message to everyone but the current sessionId
        if (currentSessionId !== sessionId) {
        connections[sessionId].send(`${sessionId} says: ${ev.message}`)
        } 
    } catch (e) {
      log.error(e)
    }
  })

};
Войти в полноэкранный режим Выход из полноэкранного режима

Вы можете удалить порты out для обеих этих новых Функций. Теперь нам также нужно визуально направить данные из узла Process Request в два других узла, которые мы создали.

Ниже показаны эти шаги в действии.

Сохранить и развернуть

Итак, это все. Вы можете сохранить и развернуть.

Посмотрите в журналах сообщение ‘Listening to port 4000’, чтобы убедиться, что он готов к использованию. Это может занять некоторое время. Мы не используем здесь никаких модулей NPM, поэтому все должно быть быстрее, но если бы мы это сделали, нам пришлось бы ждать около минуты.

Теперь перейдите к триггеру WebSocket для сбора внешнего URL. Мы будем использовать его для подключения к этому Websocket.

Откройте два терминала на вашем компьютере, а затем подключитесь через wscat.

wscat -c wss://eu-1.lolo.co/:appId/socket
Войдите в полноэкранный режим Выйдите из полноэкранного режима

Не забудьте сначала установить NPM wscat -g (через терминал), если у вас еще не установлен wscat.

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

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

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

Сообщите нам, если у вас есть какие-либо замечания. Мы стремимся создать лучший опыт работы с Serverless.

Оцените статью
devanswers.ru
Добавить комментарий