Технологии: 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 / сокет-сервер для обработки всех наших запросов.
Если у вас есть какие-либо вопросы или комментарии, не стесняйтесь оставлять их ниже. Спасибо за прочтение!