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

Обновлено 20 января 2019 г .:

На основе этого проекта: https://idgo.me



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



Предпосылка

  1. Прочтите наш предыдущий пост (хотя бы знаем, что делаем)
  2. Знание Firebase
  3. Знание Vue.js

Что мы хотим показать сегодня?

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

  1. Что такое Geohash?
  2. Точность геохеша (длина геохеша)
  3. Как поменять комнату?

1. Что такое Geohash?

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

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

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

2. Точность геохеша (длина геохеша)

В Near все чаты определены геохешем с разной точностью.

Например, если широта и долгота равны 22.29818732, 114.16646970, у него может быть разная длина геохеша, как в таблице ниже:

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

Давайте углубимся, если я хочу поговорить с людьми в пределах ~ 5 км, я могу пойти в комнату с геохешем - wecnv (~ 4,9 км x 4,9 км из таблицы выше) . Затем все люди в этом районе могут разговаривать друг с другом. Пример - изображение ниже:

Выше карта - Коулун в Гонконге, желтый квадрат - это покрытие геохеша с точностью - 5 (~ 5 км). Синий значок - это мое текущее местоположение, а красный значок - это люди, находящиеся поблизости в той же комнате. Таким образом, все люди внутри желтого квадрата могут разговаривать друг с другом.

Что произойдет, если я изменю точность с 5 на 4 (т. Е. wecnv на wecn) ?. Зона покрытия станет больше, как на изображении ниже (желтый квадрат уже покрывает Шэньчжэнь):

Таким образом, мы можем использовать точность для настройки зоны покрытия чата.

3. Как поменять комнату?

В ПОРЯДКЕ. Мы обсудили, как работает геохеш в этом приложении. По сути, мы можем использовать следующий путь к данным в Firebase для определения комнаты и сообщений.

Room: /rooms/{geohash}
Messages: rooms/{geohash}/messages

Давайте попробуем улучшить пример из Части 1, чтобы мы могли переключать комнату с разной точностью геохеширования.

Пример из части 1 статьи :

Приведенный выше код может читать и отправлять сообщения в Firebase. Чтобы изменить комнату, нам понадобятся следующие вещи.

  • Обновите точность
  • Инициализируйте комнату снова

Обновите точность

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

<label for="precision">Precision:
    <input type="number" v-model.number="precision" id="precision">
    <button @click="updateRoom">Update Room</button>
</label>

Снова активизируйте комнату

Теперь мы собираемся реализовать метод для обработки события от кнопки Обновить комнату. Для метода updateRoom мы очистим очередь сообщений, чтобы сообщения не смешивались с разными комнатами. Во-вторых, мы вызываем функцию init, чтобы снова инициализировать комнату. Следующий код является примером метода updateRoom.

Примечание. Не забудьте снова вызвать прослушиватель событий после обновления ссылки Firebase. В противном случае прослушиватель событий все еще прослушивает старую ссылку Firebase (предыдущая комната).

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

Окончательный вид (точность = 6)

Окончательный вид (точность = 5)

Вывод

Напомним некоторые важные концепции этого урока:

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

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

Обновлено 20 января 2019 г .:

На основе этого проекта: https://idgo.me

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