Потоковый чат - принцип работы на чистом JS

Делаю заметку. История такова, в 2007 году, делал чат, сталкивался с вопросами реализации.

Рецептов готовых чатов множество, но мне нужен был свой с нуля и понимание что там происходит.

В 2007 году, информацию нашел, набрав в яндаксе поисковое слово "потоковый чат" Выпадало множество примеров.

В 2020 году, мне понадобилось вспомнить знания, функции забыл принцип действия вспомнил. Набрал тоже самое, что и в 2007 году. И узнал как сильно яндекс изменился.

В место информации мне посыпались предложения купить чаты продукты, устройство чата на джеквери. Пролистал кучу страниц и ничего, что действительно надо - не было.

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

Раньше 128мб оперативной памяти хватало и на игры и на чаты. Сейчас 8 гб это минимум и все равно компьютер не отличается шустрости, все потому, что гении в место выпуска программ, использую готовые библиотеки, штампуя медленный софт, требующих дорогих компьютеров.

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

Задача: Чат, с выводом сообщений. Структура: []Главный html с 2 фреймами [][]iframe 1 - поле с выводом сообщений [][]iframe 2 - загрузка новых сообщений

Принцип действия: iframe 2 - с помощью мета, через определенное время перегружается. Если есть новые сообщения они появляются во iframe 2.

Страница для iframe 2 генерируется на сервере методом php, если делать полноценный чат, то само пшп используя переменные session, контролирует какое количество выводится. Но задача этой записи, описать принцип действия и набор js функции.

index.html

<html><body>
	<iframe src="/f5.php" ></iframe>	
	<iframe src="/txt.html" width="100%" height="400" hspace="0" frameborder="0"  name="txt_out"></iframe>	
</body></html>

Содержит два фрейма.Первый содержит страницу, которая регулярно самоперезагружается используя мета тег Refresh с переменной content=5 - количество секунд, после чего страница будет перезагружена повторно. Также позже эту страницу можно скрыть используюя стили: style="display:none;" в писав его в iframe

Второй содержит фрейм под name="txt_out" - это имя нужно для обращения через js, а также содержание странице есть блок div - в котором будет добавляться новый текст, сообщения. У блока есть имя id="text_message" также участвующее в навигации js

f5.php

parent - переход на ветвь выше в главный фрейм
txt_out - название фрейма в name
document - вошли в корень фрейма
getElementById("text_message") - получили id элемента
innerHTML - содержание блока див
+= - добавляет к блоку содержание
= - если сделать просто будет затерты старые сообщения, так можно очищать элементы блоков и перегружать.

parent.txt_out.document.body.scrollTop

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

txt.html

Если маштабировать, то полей может быть больше, таким же образом можно обновлять список пользователей в чате, какие то дополнительно информационные поля. В чатах раньше перезагрузку обычно ставили в 60 и 30 секунд. Так менее загружен был сервер. Более современные версии - используют аякс.

1833

1831

Пишем культурно и не нарушая законы РФ.

2016 год.