Технологии: React Native, Redux / React-Redux, Gifted Chat, React Navigation, Socket.io, Sequelize, Postgres

Обязательно ознакомьтесь с двумя другими частями этой серии:

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

Эта серия из трех частей в первую очередь будет посвящена созданию базы данных для нашего приложения, в которой будут храниться пользователи, разговоры и отдельные сообщения. После этого мы создадим HTTP / сокет-сервер для обработки всех наших запросов. Затем мы создадим наше реальное приложение React Native, в котором я буду использовать приложение Facebook Create React Native, чтобы настроить базовую структуру для нашего мобильного приложения, создать различные компоненты, которые нам понадобятся, и, наконец, отрендерить сами чаты. .

Но хватит вступления - приступим к кодированию!

Строим!

Мы будем использовать Socket.io, Sequelize, Postgres и HTTP-сервер на внутренней стороне. Для простоты в этом руководстве я не буду использовать Express или какие-либо маршруты Express, но я рекомендую включить его в ваше окончательное приложение, поскольку не все, что мы создаем (например, вход в систему пользователей, получение предыдущих сообщений), потребует Открытое общение Socket.io между сервером и клиентом.

У вас может возникнуть соблазн попробовать собрать свой сервер и приложение React Native в одном каталоге. Однако это может привести к разного рода ошибкам, поэтому лучше создавать их отдельно.

Во-первых, давайте создадим каталог для нашего сервера, перейдем в него и инициализируем NPM и Git:

mkdir chat-app-server
cd chat-app-server
npm init -y
git init

Затем давайте установим различные библиотеки, которые мы будем использовать в серверной части:

npm install pg sequelize socket.io --save

Файловая структура сервера будет довольно легкой:

mkdir db db/models

Создание базы данных чата

Теперь, когда все настроено, мы можем создавать наши файлы. Наша база данных не должна быть излишне сложной - подойдет несколько моделей и методов класса. Во-первых, давайте создадим нашу базу данных Postgres. Предполагая, что у вас уже установлен Postgres, введите psql в своем терминале, чтобы войти в терминал Postgres. Затем создайте свою базу данных, используя create database chat_app_db;. Введите \quit, чтобы выйти из терминала Postgres.

Вернувшись в наш каталог, давайте настроим базу данных нашего чат-приложения. Я предпочитаю, чтобы функциональные возможности были как можно более раздельными, поэтому мы разделим нашу базу данных на несколько разных файлов. Используйте touch db/conn.js для создания файла подключения. В conn.js мы настроим соединение с помощью Sequelize:

Если вы скопируете / вставите указанную выше команду create database, URL вашей базы данных будет ‘postgres://localhost/chat_app_db’. Обратите внимание, что этот URL-адрес должен быть строкой. Кроме того, PostgreSQL должен быть запущен, чтобы ваш сервер мог подключиться к вашей базе данных.

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

Я предпочитаю создавать модели баз данных в каталоге models, просто для того, чтобы все было организовано. Используйте touch db/models/User.js db/models/Conversation.js db/models/Message.js в своем терминале для создания этих файлов.

Давайте настроим нашу модель пользователя:

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

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

Обратите внимание, что мы деструктурируемOp - операторы Sequelize - из объекта Sequelize, который, в свою очередь, деструктурируем из conn (наше соединение всегда будет включать Sequelize, поэтому нет необходимости требовать его снова). Мы будем использовать оператор Op.or в методе класса Conversation.findOrCreateConversation. Мы могли бы просто использовать findOrCreate метод Sequelize, но, поскольку мы будем использовать этот метод в других местах и ​​для запроса достаточно кода, мы должны написать наш собственный метод в Conversation.js, чтобы все оставалось СУХИМ:

Для ясности давайте разберем этот код.

Здесь мы возвращаем цепочку обещаний, которая сначала пытается найти беседу, связанную с переданными нами идентификаторами пользователей. Мы используем активную загрузку, чтобы включить все сообщения, связанные с этой беседой. Порядок будет иметь значение в нашем приложении Native, поэтому мы используем order для сортировки всего по метке времени. Если такой разговор существует, мы его вернем; в противном случае мы создадим и вернем совершенно новый разговор. Чтобы избежать проблем с циклической зависимостью, мы используем conn.models.message вместо того, чтобы напрямую требовать модель сообщения.

Далее, давайте настроим модель сообщения:

Мы будем использовать React Native Gifted Chat API для рендеринга наших сообщений, который будет брать объекты сообщений из базы данных и обрабатывать их. Каждый объект сообщения требует трех свойств: text, user и _id. text - это просто фактическое содержание сообщения. user - объект, представляющий отправителя сообщения. Требуется _id и name. (Примечание: Gifted Chat также позволяет включать аватар, передавая свойство avatar объекту user.)

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

Как и в случае с методом класса findOrCreateConversation, здесь мы используем conn.models.conversation, чтобы избежать проблем с циклической зависимостью, которые могут возникнуть.

Настроив наши модели, мы, наконец, можем создавать наши ассоциации. Я предпочитаю иметь один index.js файл для обработки всего нашего экспорта, поэтому мы собираемся использовать touch db/index.js для создания этого файла. Для ассоциаций нам понадобится следующее:

  • Пользователи смогут вести множество разговоров.
  • Каждый разговор должен принадлежать двум пользователям.
  • Сообщение будет принадлежать одному разговору, но в разговоре будет много сообщений.

Таким образом, мы можем использовать следующий код для создания этих различных ассоциаций:

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

Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь оставлять их ниже. Спасибо за прочтение!