Итак, я недавно создал веб-приложение с моим отличным другом, Ноэль Лауреано (обратите внимание на нее. Она мастер кодирования, и у нее есть отличная статья о Firebase). У нас была идея веб-приложения, в котором мы могли бы слушать песню с кем-нибудь одновременно из любого места. Так появилась Комната для прослушивания. Мы знали, что нам нужна какая-то технология, которая позволила бы нам иметь постоянную связь с сервером, чтобы мы могли одновременно слышать песню. Наш путь привел нас к этой действительно крутой технологии от Google под названием Firebase.
Firebase по сути обрабатывает все детали внутренней инфраструктуры ваших приложений. Это размещенная в облаке база данных noSQL, которая позволяет хранить, синхронизировать и запрашивать данные между пользователями в режиме реального времени. Эта база данных в реальном времени поставляется с мобильными и веб-SDK, поэтому вы можете создавать приложения без необходимости создания собственных серверов. Вы можете вызвать код, который реагирует на события в вашей базе данных, используя облачные функции Firebase. Буквально!
Итак, я кратко расскажу, как нам удалось воспроизвести песню в реальном времени, поскольку это основная функция приложения. Мы также использовали React для создания этого приложения. Мы знали, что хотим, чтобы пользователи выбирали конкретную песню, поэтому мы решили разрешить пользователям загружать любой mp3 по своему выбору со своего персонального компьютера. Итак, нам нужно было как-то сохранить этот пользовательский mp3 в хранилище. И снова Firebase приходит на помощь. Firebase предлагает мощное и эффективное решение для хранения данных. Облачное хранилище, как его называют, предназначено для разработчиков, которым необходимо хранить и сохранять пользовательский контент, такой как изображения, видео или, в нашем случае, музыку или файлы mp3. Теперь, когда у нас есть место для хранения этого mp3-файла, нам нужно получить доступ к этому файлу в нашем хранилище. Это когда мы начали думать о том, как мы могли бы получить фактическое аудио из mp3 для воспроизведения, и мы быстро поняли, что после того, как этот mp3-файл был сохранен в хранилище, он также создал URL-адрес загрузки, по которому мы могли бы перейти по этому URL-адресу и песня будет играть.
В приведенном выше фрагменте кода мы создали функцию, которая обрабатывала событие загрузки, когда пользователь загружал mp3. Затем мы сохраняем этот загруженный mp3-файл в переменной с именем «файл» и создаем ссылку на наше облачное хранилище Firebase, как показано в строке 88. Затем мы «помещаем» файл в базу данных, что является асинхронным действием. Теперь, когда у нас есть mp3-файл в нашем хранилище Firebase, нам нужен этот URL-адрес загрузки, о котором мы упоминали ранее, чтобы поместить его в аудио-тег HTML, который позволяет воспроизводить музыку из источника. Например:
<audio src={"download URL created from Firebase Storage goes in here"} />
Затем мы снова ссылаемся на наше хранилище, где наша музыкальная папка хранит все наши mp3. Оттуда мы получаем доступ к конкретному «дочернему элементу» этой папки, передавая имя файла mp3, которое мы сохранили ранее в строке 86, и передаем его функции и вызываем ее с помощью getMetadata(). Эта функция также является асинхронной, поскольку она касается нашего хранилища, которое в основном похоже на базу данных. Мы «.then» отключаемся от этого, и это возвращает нам обещание, содержащее массив метаданных из этого mp3-файла. В нашем случае нас интересует только URL-адрес загрузки, который является первым элементом в этом массиве, который нам предоставлен. Теперь, когда у нас, НАКОНЕЦ, есть URL-адрес загрузки, который мы искали, пришло время отправить его в нашу базу данных Firebase Realtime.
Доступ к нашей базе данных в реальном времени очень похож на доступ к хранилищу. Строки 96 и 92 очень похожи, за исключением того, что мы меняем то, к чему пытались получить доступ. Когда у нас есть ссылка на базу данных, мы .push() и передаем объект с парами ключ-значение, как показано в строках 97–100 приведенного выше фрагмента кода.
В этом componentDidMount() есть специальная облачная функция .on(). Здесь мы снова ссылаемся на нашу базу данных в строке 22. .on() по существу ожидает изменений в конкретном документе, он запускается, когда происходит событие, и получает объект, содержащий два снимка данных, хранящихся в этой конкретной ссылке. Данные до изменения и новые данные. В нашем случае мы в основном хотим установить состояние компонента, когда «дочерний элемент добавлен» или когда пользователь загружает этот mp3-файл. Затем мы можем установить источник нашего звукового тега на этот URL-адрес загрузки.
let song = this.state.song;
<audio src={song} ref={this.audioDidMount} loop />
Осталось только слушать в реальном времени с друзьями!
Здесь происходит большая часть волшебства. Сначала мы устанавливаем ссылку в нашей базе данных под названием «приостановлено». Если вам интересно, почему «приостановлено», а не «воспроизведение», то это потому, что тег audio имеет метод pause(), и, ради нашего здравого смысла, логика называть его приостановкой имеет больше смысла. Как только у нас есть ссылка на паузу, мы можем изменить значение этой ссылки на true или false, как показано в строке 53 с помощью set(), который сохраняет данные в нашу указанную ссылку, перезаписывая то, что у нас было. Если paused === true, приостановить звук. В противном случае воспроизведите звук. Как только пользователь нажимает кнопку воспроизведения, вызывается handlePlayPauseClick() и выполняет эту замечательную, классную вещь для прослушивания в реальном времени, которая переключает ссылку «пауза» на истину или ложь. Вот и все!
Создание этого веб-приложения было определенно сложной задачей, поскольку мы с Ноэль впервые работали с Firebase, но, тем не менее, было невероятно весело и приятно видеть, как это творение оживает. И все благодаря этой невероятной технологии Firebase. Не пропустите еще несколько интересных постов о том, как я заставляю вещи работать. 🔥 🔥 🔥
