NextJS chat app
1.0.0
Живой пример на: https://next-js-chat-app.vercel.app
Пошаговое руководство по адресу: https://bly.com/blog/realtime-chat-app-nextjs-vercel
Это демонстрационное приложение в чате с Next.js, используемой в качестве платформы обмена сообщениями.
Это демонстрирует использование:
Проект использует следующие компоненты:
Next.js - это рамка React от Vercel. Он используется для создания статических веб -приложений с помощью рендеринга на стороне сервера, функций без серверов и бесшовного хостинга. Это структура, которая у вас уже есть знания React, и создает некоторую структуру и соглашения на место.
Mally-это в режиме реального времени, платформа обмена пабами/подключениями с набором интегрированных услуг для предоставления полной функциональности в реальном времени непосредственно для конечных пользователей.
Vercel - это хостинговая платформа, созданная с того, что с ног до размещения приложений Next.js и без серверов функций с ними.
React - это библиотека JavaScript для создания пользовательских интерфейсов с инкапсулированными компонентами, которые управляют их собственным состоянием.
Пользовательский интерфейс приложения, который мы построим с этим прохождением
Мы создадим приложение для чата в реальном времени, которое работает в браузере. Он будет построен на шаблоне следующего. Мы также напишем функцию Next.js Server, которая будет использоваться для подключения к умело.
Чтобы создать и развернуть это приложение, вам понадобится:
Вам также понадобится ключ API от умело до аутентификации с помощью Mally Service. Чтобы получить ключ API, после того, как вы создали умелую учетную запись:
.env ABLY_API_KEY=your-ably-api-key:goes-herenpm install .npm run dev .Сервер Next.js dev будет развернуться, и вы увидите демонстрационное приложение чата.
Мы используем Vercel в качестве нашего сервера разработки и строим конвейер.
Самый простой способ развернуть Next.js для производства - это использовать платформу Vercel от создателей next.js. Vercel-это все в одном платформе с глобальной CDN, поддерживающей функции Static & Jamstack и без серверов. - документация следующей.js
Чтобы развернуть ваше новое приложение чата в Vercel, вам понадобится:
ABLY_API_KEY в качестве переменной средыЕсть несколько способов, которыми этот пример может быть продлен:
В настоящее время в этой демонстрации нет истории чата, вы увидите только сообщения, которые приходят только после того, как вы присоединитесь к чату. Вы можете расширить эту демонстрацию, используя функцию перемотки Mally в течение до двух минут истории бесплатно или с платной учетной записью, в течение ~ 48 часов.
Там нет имен пользователей, отправленных с сообщениями чата. Эта демонстрация может быть расширена, чтобы представить поле ввода имени пользователя и добавить текущее имя пользователя к сообщениям, когда они отправляются.
Демо использует случайно сгенерированный идентификатор клиента в качестве уникального идентификатора - именно так он может определить, если это «я» или «кто -то еще», который отправил сообщение.
