Добавление Javascript на веб-сервер Go
- часть: создание сервиса
- часть: улучшение сервиса
- часть: обновление для Интернета
- часть: добавление SSE
- часть: вы читаете это прямо сейчас
- часть: frontend - backend коммуникация
- часть: логирование на стороне сервера
- часть: запустить все в докере
- часть: добавление контейнера базы данных
- часть: база данных - служебная связь
Дополнение 1: функции, методы, указатели и интерфейсы
Дополнение 2: связь через веб-сокеты
Дополнение 3: связь через сокеты
Зачем использовать ванильный Javascript для вашего интерфейса?
Потому что ванильный Javascript - это интерфейсный язык. Конечно, вы можете использовать Typescript, Dart и другие технологии, но в основе лежит Javascript.
С другой стороны, вы можете использовать Angular, React, Vue и еще миллион фреймворков. Но все они работают с использованием Javascript под капотом.
Используя ванильный Javascript, вы изучаете, понимаете и используете технологию в том виде, в котором она была разработана. В Интернете есть масса учебных пособий и учебных курсов, и если вам нужна моя рекомендация, я считаю, что этого руководства действительно достаточно, чтобы сразу же начать использовать Javascript.
Погрузитесь прямо в обновление кода
Откройте файл homepage.html и сосредоточьтесь на этих трех строках, содержащих тег <h>. Обновите <h1>, <h2> и добавьте новую строку <h3>. Эти три строки будут отображать три отдельных информации:
- время, когда страница была сгенерирована
- фактическое время на стороне сервера, используя SSE
- время, когда была нажата кнопка (новый функционал)
Затем переключитесь на свой homepage.js и измените строку, обновляющую объект actual-time. Мы добавляем лишь некоторую текстовую информацию, поэтому мы сразу узнаем, сколько времени и что работает.
Добавление новой функциональности Javascript
На данный момент мы обновили текстовую информацию на веб-странице, и теперь мы добавляем эту функциональность javascript, как упоминалось в начале этой статьи. Добавьте новую строку, которая будет обращаться к элементу <h3> с идентификатором button-time.
А затем функция обновления, которая до сих пор отображает предупреждающее сообщение. После этого изменения будет отображаться фактическое время.
Запустите программу и вы увидите что-то вроде скриншота ниже.
Теперь у нас есть три отдельные функции, работающие на одной простой веб-странице:
- страница обновляется с указанием фактической даты и времени, прежде чем она будет сгенерирована и отправлена пользователю - эта функция использует шаблоны Go
- страница обновляется с указанием даты и времени в реальном времени из серверной части Go с использованием функции SSE
- страница обновляется со временем, когда была нажата кнопка, с использованием ванильного Javascript
А вы заметили, что страница вообще не обновляется? Только эти раз, либо с помощью SSE, либо с помощью кнопки?
Точная настройка формата времени
Но у нас еще есть над чем поработать, потому что эти три даты имеют действительно странное форматирование, а время обновления каждую миллисекунду тратит ресурсы. Мы изменим это сейчас.
Откройте файл homepage.go и обновите это время сна в streamTime() функции, чтобы он транслировал время примерно каждую секунду. Кроме того, строка обновления, которая передает фактическое время. Добавьте метод форматирования.
Примечание: в Goland есть удобная функция для форматирования экземпляров даты и времени. Перейдите к этой функции форматирования и нажмите m, Goland покажет вам возможности для строки m.
Затем обновите одну строку в функции serveHomepage().
Теперь у нас есть обе даты, которые происходят в Go, правильно отформатированные. Наконец, мы отформатируем дату и время для нажатия этой кнопки. Перейдите к homepage.js и обновите функцию прослушивателя, как показано ниже.
Боковое примечание: я специально выбрал такое же форматирование, чтобы оно выглядело хорошо и одинаково, но вы можете играть с форматированием даты и времени Go, а также можете играть с форматированием даты и времени Javascript по своему усмотрению. . Просто чтобы дать вам пример различного форматирования Javascript.
new Date().toLocaleDateString('en-US', {year: 'numeric', month: '2-digit', day: '2-digit'});Есть много источников для форматирования даты и времени, вот две ссылки. Первый для Go, второй для Javascript.
Пора все это проверить
Мы подошли к концу сегодняшней статьи. Снимок экрана ниже - это окончательный результат, который вы должны увидеть. Все три экземпляра даты и времени работают правильно и с одинаковым форматированием.
Резюме
Как видите, нам пока не нужно использовать какой-либо фреймворк. Ни Angular, ни React, ничего больше. Мы обновляем данные на главной странице с помощью простого и понятного JavaScript. Надеюсь, я убедил вас потратить время на изучение Javascript и изучить только обычный Javascript. Вы всегда можете изучить больше технологий, но разумнее сначала использовать основу.
Даже с учетом этого немногого в этой статье теперь вы знаете, как…
- загрузить файл javascript (вы знали об этом раньше)
- доступ к элементу на веб-странице
- добавить слушателя к этому элементу
- активировать этого слушателя
- изменить / обновить этот элемент при активации слушателя
