Как я остановил обновление нашего сайта и сохранил музыку!

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

На сайте есть не только чат и прямой эфир; есть блог сообщества, список местных ди-джеев (резидентов) и даже бэк-каталог предыдущих ди-джеев, доступных для потоковой передачи. Итак, как позволить пользователю получить доступ ко всему этому, не перенаправляя его? Одним из вариантов было бы иметь длинную прокручиваемую домашнюю страницу со всем нашим контентом. При нажатии страница будет автоматически прокручиваться. Тем не менее, это на самом деле не воплощало атмосферу «тусовки» «все в одном месте», которую мы имели в виду…

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

Итак, как это будет работать?

AJAX расшифровывается как Асинхронный Javascript и XML. Это позволяет приложению отправлять и получать данные без перенаправления с существующей страницы. Обычно AJAX используется в Gmail, где вы можете видеть всплывающие новые электронные письма, даже если вы не нажали кнопку «Обновить».

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

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

<div data-edit-homepage-target="central_container">
</div>

Оттуда мы настроили вкладку «блог», которая при нажатии запускала бы метод контроллера Stimulus под названием «блог»:

<a href="#"><img src="" alt="" data-action="click->edit-homepage#blog"></a></div>

Теперь о самом методе. Во-первых, определяется соответствующий путь Rails: «/blog». Это то, что обычно заставляет Rails перенаправлять на представление «блог». Однако в нашем коде доступ к пути осуществляется через запрос на выборку, поэтому перенаправление не происходит. Ответ сервера преобразуется в HTML, а затем вводится в центральный контейнер с помощью обычного Javascript.

 blog(event) {
    const url = "/blog"
    fetch(url, {
      method: "GET",
      headers: { "Accept": "text/html" }
    })
      .then(response => response.text())
      .then((html) => {
        var parser = new DOMParser();
        var doc = parser.parseFromString(html, "text/html");
        this.central_containerTarget.innerHTML = ""
        this.central_containerTarget.appendChild(doc.getElementById("blog-view"));
        this.central_containerTarget.parentElement.scrollTo(0, 0)
    })
  }

Вот и все! Почти…

В довершение всего я использовал библиотеку анимации Animate.css, чтобы добавить эффект плавной прокрутки, чтобы содержимое плавно скользило в поле зрения. Центральный контейнер получил прозрачный фон, что позволило тексту четко разместиться на домашней странице в стиле мягких облаков на закате. Я создал дополнительные методы для всех остальных вкладок и включил навигацию внутри центрального контейнера, которая также запускала бы методы AJAX. Это означает, что вы можете переходить к отдельным сообщениям в блогах, отдельным резидентам и отдельным диджейским сетам, а также к полному списку каждого из вышеперечисленных, даже не обновляя домашнюю страницу. О, и, конечно же, вы можете лайкнуть пост в блоге… с помощью AJAX!

Последнее слово…

Как четыре новичка в программировании, я очень горжусь тем, чего добилась наша команда. Сайт был нашим вторым групповым проектом и был создан всего за десять дней. Наши планы были амбициозными, и во многих отношениях они лучше подходили бы для фреймворка на основе React. Однако конечный продукт имеет именно то гладкое и непрерывное ощущение, которое мы хотели. Дизайн чистый и минималистичный. Но, прежде всего, Moss Radio — это отличное место для прослушивания музыки и общения с друзьями.

Спасибо за чтение.