Создайте чат на основе местоположения с помощью Firebase и Vue.js

Введение

Недавно я и мой друг создали чат с привязкой к местоположению под названием - Рядом (https://near.idgo.me). Люди могут разговаривать друг с другом поблизости в веб-приложении. Мы хотели бы поделиться тем, что мы сделали и как это сделать. Не стесняйтесь оставлять отзывы, отвечая на эту статью.

Предпосылки

1. Базовые знания Geohash
2. Базовые знания Firebase
3. Базовые знания компонента Vue.js

Чего мы хотим достичь?

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

1. Получите позицию пользователя через API геолокации и преобразуйте широту и долготу в геохеш
2. Отправить сообщение в комнату
3. Показать сообщения

Что такое Geohash?

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

Например, wecnvgm2re3u представляет Цим Ша Цуй в Гонконге (широта и долгота = 22.29818732, 114.16646970). Каждый символ геохеша представляет область мира, а большее количество символов означает более конкретное место. Вы можете использовать этот инструмент, чтобы узнать, как он работает.

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

Создать проект Vue

В этой статье мы используем vue-cli для создания семенного проекта Vue.

Установите vue-cli

Может потребоваться разрешение root

npm install -g vue-cli

Инициализируйте проект vue с помощью vue-cli

vue init webpack-simple my-project

В этом руководстве мы используем шаблон webpack-simple в качестве демонстрации. Подробнее о vue-cli читайте здесь.

Установите зависимости и запустите проект с помощью следующих команд

cd my-project
npm install
npm run dev

Теперь вы можете получить доступ к своему проекту на localhost: 8080.

После того, как мы создали проект Vue и установили зависимости, мы можем начать работу над компонентом Vue (my-project / src / App.vue). Если вы не знакомы с однофайловым компонентом Vue, вы можете посетить официальный сайт.

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

room - эталонный объект Firebase, представляющий комнату.

точность - точность геохеширования (в этом руководстве по умолчанию 6).

db - SDK Firebase для взаимодействия с Firebase.

Установите Firebase и Geohash Encoder

Помимо Vue.js, нам понадобится Firebase SDK для связи с Firebase и использование пакета geohash converter для кодирования широты и долготы в geohash (идентификатор комнаты). Вы можете установить эти два пакета с помощью следующей команды.

npm install --save firebase latlon-geohash

После установки этих двух пакетов вы можете импортировать их внутри тега скрипта в App.vue. Для пакета Geohash мы объясним это позже.

import * as Firebase from 'firebase'
import Geohash from 'latlon-geohash'
export default{
// ....
}

Инициализировать Firebase, когда компонент готов

Когда компонент Vue будет готов, будет вызван монтированный хук. Итак, мы можем инициализировать клиентский объект Firebase и назначить его переменной с именем - db. Не забудьте указать свои учетные данные Firebase, например apiKey, authDomain, databaseURL и projectId в качестве параметров. Мы предполагаем, что вы знаете, как настроить проект Firebase и получить учетные данные. Если вы не знаете, как его настроить, перейдите в Руководство по началу работы с Firebase.

Зависимости готовы. Пора строить.

1. Получите местоположение пользователя и преобразуйте широту и долготу в геохеш.

На этом этапе мы создадим метод под названием - init () для доступа к местоположению пользователя через API геолокации и конвертируем его в геохеш, чтобы мы могли определить, в какую комнату они должны перейти.

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

Например:

Расположение: 22.29818732, 114.16646970 = ›wecnvg (geohash)

Поскольку мы устанавливаем точность по умолчанию 6, кодировщик возвращает только 6 символов. Когда мы получаем геохеш, мы инициализируем ссылку Firebase с идентификатором комнаты (геохеш) и назначаем ссылку переменной room, которую можно повторно использовать позже.

OK. Метод init завершен, но нам еще нужно вызвать его, когда компонент будет готов. Итак, вызовите метод init внутри установленного крючка. Как код ниже. Затем компонент попытается получить доступ к местоположению пользователя, когда компонент будет готов.

2. Создайте элемент ввода для отправки сообщения.

Создайте элемент ввода внутри тега template в компоненте (App.vue). Мы используем v-модель messageInput для хранения сообщения и используем trim для удаления начального пробела ввода. Когда пользователь нажимает клавишу ввода в элементе ввода. Будет вызван метод send (messageInput). Не забудьте создать ключ messageInput внутри части данных.

Теперь мы собираемся реализовать метод send (messageInput) для обработки события из элемента ввода. Внутри этого метода мы просто создаем временный объект с ключом - message для хранения тела сообщения. После этого вызовите push (), чтобы получить ключ, а затем установите значение для этого ключа.

Не забудьте очистить значение messageInput при отправке сообщения. В противном случае ваш вклад всегда будет там.

Когда вы нажимаете Enter, возможно, вы получаете ошибку в консоли вашего браузера. Изображение ниже из консоли Chrome.

Не волнуйся. Поскольку Firebase по умолчанию разрешает доступ только авторизованному пользователю, вам необходимо включить для этого разрешение.

Выполните следующие действия, чтобы включить разрешение:

1. Перейти в консоль Firebase
2. Выберите свой проект
3. Выберите раздел базы данных

Вы можете увидеть JSON в разделе Правила и увидеть настройки по умолчанию.

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

Мы хотим быстро увидеть эффект. Мы позволяем любому получить доступ к Firebase с помощью следующих настроек. (Этот подход предназначен только для демонстрации. Не используйте его в рабочей среде).

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

После публикации правил вы можете попробовать отправить сообщение еще раз. Ошибки больше нет. Если у вас есть доступ к консоли Firebase, вы можете видеть данные из своего ввода (как на изображении ниже).

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

3. Отображение сообщений

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

В приведенном ниже коде показано, как создать прослушиватель событий и активировать прослушиватель событий после выбора комнаты. Когда новое сообщение добавляется в Firebase, запускается событие child_added и запускает метод обратного вызова с данными моментального снимка. Если вы не знаете, как работает Firebase, рекомендуем прочитать руководство здесь. Внутри метода обратного вызова снимок данных будет помещен в переменную messages.

Затем нам нужно отобразить данные на уровне HTML при изменении переменной message. Добавьте приведенный ниже код внутрь тега шаблона.

<div v-for="msg in messages">{{msg.message}}</div>

Поскольку основная структура данных сообщения в Firebase на шаге 2 следующая:

{
  "message":"my message"
}

Итак, на уровне HTML мы можем получить доступ к msg.message для отображения данных. Когда вы отправляете сообщение, отображается новое сообщение.

Объединить вместе

Окончательный вид

Заключение

Наконец, в этом уроке есть несколько важных моментов:

1. Убедитесь, что у вас есть разрешение на доступ к Firebase.
2. Поскольку получение геолокации - это асинхронный процесс, убедитесь, что вы получили геолокацию, прежде чем отправлять сообщение в Firebase.
3. Создайте соответствующие переменные в каждом разделе
4. Активируйте прослушиватель событий, чтобы слушать новые сообщения

Есть заполненная заявка - https://near.idgo.me

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

Хакерский полдень - это то, с чего хакеры начинают свои дни. Мы часть семьи @AMI. Сейчас мы принимаем заявки и рады обсуждать рекламные и спонсорские возможности.

Если вам понравился этот рассказ, мы рекомендуем прочитать наши Последние технические истории и Современные технические истории. До следующего раза не воспринимайте реалии мира как должное!