Skip to content

Свой сайт знакомств #18: реализуем простой iframe чат для общения на PHP, JavaScript, HTML, SQL

Разработка простого iframe-чата для сайта знакомств на PHP, JavaScript и HTML с использованием Bootstrap и обновлением через JavaScript.

Key Takeaways

  • Реализация чата через iframe позволяет легко интегрировать его в любую часть сайта.
  • Удаление лишних элементов страницы упрощает интерфейс чата.
  • Использование Bootstrap и jQuery ускоряет разработку и стилизацию.
  • Периодическое обновление через JavaScript обеспечивает актуальность сообщений.
  • Обсуждение и обмен опытом с сообществом важны для улучшения функционала.

What the video covers

  • Автор продолжает разработку дейтинг-сервиса, добавляя функционал полноценного чата.
  • Рассматривается идея реализации чата через iframe с периодическим обновлением содержимого.
  • Обсуждается необходимость удаления ненужных элементов страницы, таких как футер и хедер, для интеграции чата.
  • Используются Bootstrap стили и подключение к базе данных для хранения сообщений.
  • Автор впервые пишет чат и просит зрителей поделиться готовыми решениями или советами.
  • Проводится отладка и проверка работы скриптов, включая роутинг и подключение к базе данных.
  • Настраивается размер iframe для удобного отображения чата с прокруткой.
  • Обсуждается возможность разделения экрана для удобства разработки и тестирования.
  • Проводится тестирование отправки сообщений и обновления чата с использованием JavaScript таймеров.
  • Автор планирует добавить отображение имен собеседников и улучшить интерфейс чата.

Chapters

  1. 00:00Введение и обзор предыдущих выпусков
  2. 03:24Удаление ненужных элементов для чата
  3. 06:54Задачи и подготовка к созданию чата
  4. 10:19Проблемы с подключением к базе данных
  5. 13:25Настройка размеров и прокрутки iframe-чата
  6. 17:26Разделение экрана и тестирование отправки сообщений
  7. 21:32Отладка обновления чата через JavaScript
  8. 24:03Вывод имен собеседников и дальнейшие планы

Answers

Questions about this video

Почему автор решил использовать iframe для реализации чата?

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

Какие технологии используются для создания чата в этом видео?

Для создания чата используются PHP для серверной логики, JavaScript для обновления и взаимодействия, HTML для структуры и Bootstrap для стилизации.

Какие проблемы возникли при разработке чата?

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

Full Transcript — Download SRT & Markdown

00:01
Speaker A
Добрый день, дорогие подписчики! Рад вас приветствовать на новом выпуске проекта "Свой сайт знакомств", где мы с вами в режиме реального времени разрабатываем и запускаем свой дейтинг-сервис. В прошлых выпусках мы с вами сделали фильтры, реализовали функционал симпатий, написания сообщений, просмотра, получается, тех, кто нам написал.
00:23
Speaker A
написание сообщений просмотра получается те кто нам написал и сегодня мне хотелось бы немножко доработать вот наши сообщения и превратить их в полноценный чат честно скажу я думал как это можно реализовать мне пришла интересная идея в голову А давайте мы уже написаны с вами
00:51
Speaker A
И сегодня мне хотелось бы немножко доработать вот наши сообщения и превратить их в полноценный чат. Честно скажу, я думал, как это можно реализовать, и мне пришла интересная идея в голову: а давайте мы уже написанный с вами код разместим [музыка] внутри iframe на страничке с помощью JavaScript, периодически обновлять. Что получится? Получится ли превратить таким способом вот наше готовое сообщение в полноценный чат?
01:29
Speaker A
размещались справо на страничке и так далее ну Давайте попробуем соответственно вот при помощи фрейма это сделать так у нас что у нас есть получается Файлик Икс вот я хочу оставить получается в фрейме только вот сообщения чтобы они погружались А все элементы сайта
01:57
Speaker A
Я помню, да, много лет назад были готовые встраиваемые чаты, которые вот как ки при помощи размещались справа на страничке и так далее. Ну, давайте попробуем соответственно вот при помощи iframe это сделать. Так, у нас что, у нас есть, получается, файл index.
02:23
Speaker A
справа слева и так далее в виде всплывающего окошка вот мне пока просто интересно реально ли вообще Вот вот такое организовать потому что обычно я долгое время занимался разработкой коммерческих сайтов и скажем так с чатами ни разу не сталкивался Ну
02:51
Speaker A
Вот я хочу оставить, получается, в iframe только вот сообщения, чтобы они погружались, а все элементы сайта останутся как есть. Поэтому мне, наверное, проще будет скопировать полностью вот эту вот страничку, создать копию и давайте её назовём чат. Чем хороша такая реализация? Да тем, что мы, в общем-то, эти сообщения потом сможем вынести в любом месте на странице: где-то справа, слева и так далее в виде всплывающего окошка.
03:24
Speaker A
томм что нужно выкинуть Мне во-первых нужно выкинуть футер он вообще тут не нужен А хотя нет подождите давайте мы футер оставим но да нет футер мы выкидываем он нам не нужен может быть небольшой кусочек футера нам понадобится так мне
03:48
Speaker A
Вот мне пока просто интересно, реально ли вообще вот такое организовать, потому что обычно я долгое время занимался разработкой коммерческих сайтов и, скажем так, с чатами ни разу не сталкивался. Ну, то есть мы что делали? Мы там, окей, разрабатывали формочки, потом связывали их с... то есть какая ещё работа была? Ну, может быть, какие-то калькуляторы, да, разрабатывали на JavaScript, там как-то хитро выхватывали. Чтобы самим разрабатывать чат, я честно такого не помню. Таким я...
04:18
Speaker A
юзера о юзера 2 и так далее В принципе всё и подключить бутстрап стили которые у нас уже есть р тоже скорее всего не нужен да давайте хедер выкидываем так ID юзера возьмём из сессии дальше мы идентификатор возьмём из Get запроса так
04:44
Speaker A
Томм, что нужно выкинуть. Мне, во-первых, нужно выкинуть футер, он вообще тут не нужен. А хотя нет, подождите, давайте мы футер оставим. Но да, нет, футер мы выкидываем, он нам не нужен. Может быть, небольшой кусочек футера нам понадобится. Так, мне не нужен, мне не нужен, получается, формочка для отправки сообщений. Контейнер, мы будем вводить различные сообщения, и, наверное, что ещё понадобится? Так, сообщения, вот где мы их получили тут. Да, так, так, так. А, ну вот, нам и нам нужно сделать определение юзера, о юзера 2 и так далее. В принципе, всё. И подключить Bootstrap стили, которые у нас уже есть. P тоже, скорее всего, не нужен. Да, давайте хедер выкидываем. Так, ID юзера возьмём из сессии, дальше мы идентификатор возьмём из GET-запроса. Так, просмотры удаляем, в принципе, нам никакая информация больше и не нужна. Вот так, простенько у нас должен выглядеть наш чат.
05:31
Speaker A
для мессенджеров какой-нибудь WhatsApp по-моему Так эта штука называлась то есть куда можно сразу Зачем нам создавать свой чат Когда мы можем прокинуть пользователя сразу отправить получается в мессенджер и там продолжать с ним общение Ну вот то есть задача какая
05:55
Speaker A
Единственное что, единственное, я сейчас, наверное, сбегаю в VR и заберу стандартные Bootstrap [музыка], повседневные инструменты типа jQuery [музыка] сайта. Что ещё использовали для мессенджеров? Какой-нибудь WhatsApp, по-моему. Так, эта штука называлась, то есть куда можно сразу... Зачем нам создавать свой чат, когда мы можем прокинуть пользователя сразу, отправить, получается, в мессенджер и там продолжать с ним общение?
06:22
Speaker A
нужен футер по из него я тоже подружу немножечко нам может понадобится вот для нашего чата так Ага а ну вот сообщение контейнер Да вот он вот тут всё замечательно подрубили дальше давайте что мы ещё заберём заберём наверное стайл вот этот
06:54
Speaker A
Ну вот, то есть задача какая: завязать какой-то диалог и отправить, уже зацепить клиента, ну или в общем заставить его привязаться к нам каким-то образом, получить его контактные данные. А вот поэтому можно сказать, что чат я пишу впервые. Так, так, так, так, что я ещё хотел? Мне нужен футер, по из него я тоже подружу немножечко, нам может понадобится вот для нашего чата. Так, ага, а ну вот сообщение контейнер. Да, вот он, вот тут всё замечательно подрубили. Дальше давайте, что мы ещё заберём? Заберём, наверное, стайл вот этот, вот наш. Да, да, и в принципе всё, у нас будет готовый... Ой, не скопировал, к сожалению. Так, иду футер. Может быть, стоило подключить какое-то готовое решение? Если вы знаете какое-то готовое решение, с помощью которого можно организовать чат, напишите да в комментариях.
07:20
Speaker A
да В комментариях или может быть я Тупиковый способ выбрал для реализации кто с этим сталкивался да напишите вообще э как вы разрабатывали бы свой чат потому что ну вот правда тема интересная и практически наверное она нужна только когда вы свою социальную сеть делаете
07:45
Speaker A
Или может быть я тупиковый способ выбрал для реализации? Кто с этим сталкивался, да, напишите вообще, как вы разрабатывали бы свой чат, потому что, ну вот правда, тема интересная и практически, наверное, она нужна только когда вы свою социальную сеть делаете.
08:14
Speaker A
стайл не можем скорее всего да Хорошо давайте уберём наши стилевые элементы всё равно используем стандартные бустра повс тоже ничего не отображается странно странно странно а возможно у нас не прописан чат сейчас скажу где в роутинг возможно и такое А Нет смотрите У нас же никакого
08:45
Speaker A
Так, дальше что? Дальше я хочу вот так вот тут зайти, и мне нужно прописать ссылочку на наш скрипт. Вот он PHP, ID нажимаю, да, нам ничего не отображается. Очень плохо, что ничего не отображается. Так, хоп-хоп-хоп, может быть, мы за include style не можем, скорее всего, да. Хорошо, давайте уберём наши стилевые элементы, всё равно используем стандартные Bootstrap. Повс тоже ничего не отображается. Странно, странно, странно. А возможно, у нас не прописан чат? Сейчас скажу где, в роутинге возможно и такое.
09:11
Speaker A
скрипт чат дальше мы с вами формируем HTML страничку вот так вот наверное да потому что нам в корень в корень нужно выйти два раза [музыка] или нет наверное нет где-то почему-то у нас вот так PHP скрипт не хочет ничего
09:42
Speaker A
А нет, смотрите, у нас же никакого роутинга нет, у нас роутинг весь на папочке, то есть в принципе все скрипты должны открываться без каких-либо особых проблем. Так, со скриптом чат, давайте я его заново открою и будем смотреть, что с ним не так. Так, есть скрипт чат. Дальше мы с вами формируем HTML-страничку вот так вот, наверное, да, потому что нам в корень нужно выйти два раза [музыка]. Или нет, наверное, нет, где-то почему-то у нас вот так PHP-скрипт не хочет ничего [аплодисменты] писать.
10:19
Speaker A
подключения к базе данных Ну замечательно конечно Конечно нет подключения к базе данных потому что она у нас прописывается в хедере конечно такая организация файлов неправильная вот мы сессии не стартовали нужно это всё вынести в отдельных Файлик но давайте пока оставим
10:40
Speaker A
Давайте единичку просто выведем, это пока я. Всё, единичка вывелась, это уже радует. Давайте дальше смотреть, тогда на каком этапе у нас будет затык по скрипту. Единичка выводится до сих пор. Так, где сломается? А у нас нет подключения к базе данных. Ну, замечательно, конечно. Конечно, нет подключения к базе данных, потому что она у нас прописывается в хедере. Конечно, такая организация файлов неправильная. Вот, мы сессии не стартовали, нужно это всё вынести в отдельный файл, но давайте пока оставим как есть для того, чтобы просто начать работать сайтом. Всё замечательно, сообщения отображаются. Значит, вот это вот мы с вами можем взять и затолкать в iframe, про которое я с вами уже вот говорил.
11:04
Speaker A
нужно зайти снова в папочку сообщения Кстати кто не понимает что тут происходит Мы с вами делаем сайт знакомств да свой Поэтому вот можете посмотреть прошлые выпуски на канале и увидеть что мы там делаем Я думаю всем будет понятно пишем
11:25
Speaker A
Идём дальше, дальше, дальше. Мне что? Мне нужно зайти снова в папочку сообщения. Кстати, кто не понимает, что тут происходит, мы с вами делаем сайт знакомств, да, свой. Поэтому вот можете посмотреть прошлые выпуски на канале и увидеть, что мы там делаем. Я думаю, всем будет понятно. Пишем код простенько в режиме реального времени. Сонно никаких трудностей у вас не должно быть с пониманием. Ну, я так надеюсь, хотя опять же по-разному может быть, да, кому-то покажется лёгким, кому-то сложным.
11:44
Speaker A
прописываю iframe дальше СРК А так давайте в двойных кавычках в двойных кавычках я вставил получается на под папку Где мы указываем идентификатор пользователя Да вот он тут так чего тут может не хватать давайте давайте сейчас подумаем Вот вместо идентификатора неплохо было
12:22
Speaker A
Так, тут я что пишу? Тут я тут прописываю iframe, дальше src. А так, давайте в двойных кавычках, в двойных кавычках я вставил, получается, на подпапку, где мы указываем идентификатор пользователя. Да, вот он тут. Так, чего тут может не хватать? Давайте, давайте сейчас подумаем. Вот вместо идентификатора неплохо было бы вставить, сейчас скажу, что нам нужно вставить, которому мы пишем, соответственно, вот сюда [музыка]. Вот и давайте посмотрим, как у нас загрузится вообще, загрузится ли скрипт на страничке.
12:56
Speaker A
есть вот пролистывание хорошо то есть у нас автоматически уже появилась появилась возможность листать наш чат Это замечательно Так давайте пойдём дальше А тут мы Какие параметры можем указать Ну давайте мы ширину укажем в 100% Да в 100% экрана чтобы она была у нас и
13:25
Speaker A
Так, обновляю страничку. Ага, что-то загрузилось, видите? Да, вот и сбоку у нас есть вот пролистывание, хорошо, то есть у нас автоматически уже появилась возможность листать наш чат. Это замечательно. Так, давайте пойдём дальше. А тут мы какие параметры можем указать? Ну, давайте мы ширину укажем в 100%, да, в 100% экрана, чтобы она была у нас, и высоту. Высота какая будет? Ну, пускай будет 300 пикселей. 300 пикселей, всё замечательно, сохранились. Я обновляю страничку, да, всё, у нас чат влезает, пролистывание есть.
13:55
Speaker A
конце страницы поставить как она вот называется метка HTML сл как-то как-то так нет Давайте ещё раз посмотрим так метка HTML [музыка] скл не ну не скролл как же он называется так так так вот якорь точно Якорь Якорь а Якорь
14:32
Speaker A
Как сделать так, чтобы у нас страничка автоматически отображалась на последнем сообщении? Ну, в общем-то, несложно, наверное. Нам нужно в конце страницы поставить, как она вот называется, метку HTML, sl, как-то, как-то так. Нет, давайте ещё раз посмотрим. Так, метка HTML [музыка] скл, не, ну не скролл, как же он называется? Так, так, так, вот якорь, точно. Якорь, якорь, а якорь.
15:05
Speaker A
конца Вот так давайте снова идм идм куда мы идм мы в наш скрипт чат Якорь Мы разместим в самом конце страницы так так давайте мы пром вот сюда вот и обращаться мы к нему Будем при помощи решёточник идём дальше
16:00
Speaker A
Каким образом мы прописываем? Вот я хочу прописать якорь. Так, якорь, якорь, якорь, якорь, html. Так, вот ссылка якорь нам нужна. Давайте попробуем. Ага, то есть мы прописываем с вами идентификатор где-то вот в конце странички якорем. Я надеюсь, что наш грузится до конца. Вот так, давайте снова идём, идём куда? Мы идём в наш скрипт чат. Якорь мы разместим в самом конце страницы. Так, так, давайте мы пром, вот сюда вот, и обращаться мы к...
16:25
Speaker A
это обв Тут нужно опять же подумать Наверное чтобы сильно не нагружать сервер нужно найти такое время с помощью вот которое было бы оптимально для наших пользователей то есть понятно что каждую секунду отправлять запросы в базу данных на вывод
16:53
Speaker A
переписки это очень странное решение поэтому побу Я кстати сейчас что я хочу авторизоваться допустим как какая-то девушка Вот с идентификатором о в режиме инкогнито это буду делать Вот и мы попробуем соответственно организовать небольшой чатик вот чтобы вы видели ВС что у на тут
17:26
Speaker A
происходит вот будет Это замечательно так вот неплохо было бы наверное разделить экран на две части вот таким вот образом то есть это вот вспомогательная часть будет тут мы будем с вами дорабатывать и смотреть вообще что происходит тут у нас
17:48
Speaker A
будет с вами кстати можно вот так даже сделать ещё меньше Как вы видите наш фрейм принимает размеры окна которые мы указали это тоже Здорово Я опять же говорю что вот мы его в любом месте можем разместить в любом месте
18:07
Speaker A
страницы так обновление нам нужно сделать обновление фрейма так первым делом наверное проще сделать это обновление по времени мне что мне нужно написать скрипт скрипт на Ява скрипте так или Можем даже наверное можем отдельную функцию сделать так пишем Давайте
19:00
Speaker A
Date пропишет тут вот нам уже нужно обновить наш фрейм так загугли как обновляется фрейм так обновить так ещё раз Ага Так обновлять мы можем получается при помощи идентификатора просто прописав его Да а либо же либо же либо же по названию класса да Ну давайте
19:56
Speaker A
будем вот идентификатор так сечас секундочку раз так by ID соответственно нашему фрейму нужно прописать определённый ID давайте мы назовём его чат Вот соответственно при вызове вот этого вот это вот функции у нас должен обнов вот этот вот будем видеть чат в режиме реального
20:32
Speaker A
времени так неплохо было бы ещё что сделать неплохо было бы ещё прописать соответственно время обновления мы наверное попробуем использовать Set Timeout вот посмотрим как она пишется Set Time Out Да так так так Time то есть что мы указываем мы
21:07
Speaker A
указываем название функции и соответственно время в миллисекундах то есть в одной секунде 1000 миллисекунд мы соответственно сейчас эту функцию будем вызывать так функция называется то есть раз в секунду за должны падать и попадать на страничку так я сейчас что я сейчас обновляю
21:35
Speaker A
просто страницу Вот и давайте мы попробуем написать что-то Вот Привет нажимаю отправить так и что и ничего пока не происходит то есть вот сюда вот наше сообщение не упало Давайте ещё раз обновим так как дела Ага почему-то план не
22:13
Speaker A
работает так Get Эмен по ID Location rel да А может быть апдейт меньше поставить Давайте единичку добавим Будет ли срабатывать Так мне что мне одно страницу надо Хорошо отправить Почему не срабатывает так ещё раз Хмм Странно что не
23:13
Speaker A
работают Где могли допустить ошибку Давайте смотреть так скрипт скрипт дальше docum Get Element ID Угу Set Time Out почему он не работает наш апдейт так хорошо давайте посмотрим какой-нибудь другой вариант да Ну мы же работаем в рамках того же
23:50
Speaker A
домена Да FR ID прописали чат тут тоже чат Давайте загугли эту функцию Так почему она не срабатывает материалов нету кстати так хорошо ещ раз обновить iframe А на [музыка] странице посмотрим что нам предложат какие варианты Так давайте согласимся
24:50
Speaker A
хорошо вот нам просто предлагают заменить получается тот же самый код на странице использовать ещё раз ну Давайте попробуем То есть тут происходит некая обманка как будто бы мы подменять urel адрес но по факту мы его конечно же не
25:10
Speaker A
подменяя а прописываем тот же самый который у нас уже есть Так тоже ничего не происходит так есть подозрение что не срабатывает а таймаут се Тайт не срабатывает прямо очень сильное подозрение Подождите а вам попало же да уже попало 1 2 3 ещё
25:49
Speaker A
раз отправить уже два раза отправил Нет Set Timeout не работает Может быть так сработает тоже нет [музыка] бесполезно Set Тай Почему не работаешь [музыка] либо через Set интервал запустить так set [музыка] time так так так interval установить вывод
26:52
Speaker A
через так планирует следующий вызов прямо после окончания где у нас он тут вот Ага Так так так Ну нет всё-таки се Тай я видимо правильно использ Просто он почему-то у нас игнорируется на странице так ещё раз пробую Да я честно говоря думал что
27:42
Speaker A
очень лёгкая серия получится а у нас не все скрипты хотят срабатывать вот может быть апдейт Вот какое-то такое имя у нас из-за этого не хочет работать Аде чат по идее каждую секунду он должен обновляться так и тут давайте тоже
28:13
Speaker A
обновим на всякий случай ещё раз чтото пишем нажимаю отправить не приходят сообщени Так хороо а единичку так ещё раз тут обновляю Нет просто мне нужно обновить страничку Давайте ещё раз единичку отправить ну друг Ну давай Почему не срабатывает
28:55
Speaker A
Может быть я как-то неправильно прописал chs А вообще он должен работать то есть тут ничего такого-то и нету Хорошо скрипт нет может быть я не уточнил вот там же есть полное прописывание А вот так Script Type где он JavaScript
29:25
Speaker A
и так далее может быть поэтому Проблема где ещё это мог Ну тут в принципе ошибаться то негде то есть всё должно работать притом без каких-либо особых трудностей обновление просто не происходит странички так ID Так подождите Давайте сюда двоечку
30:23
Speaker A
отпра нет обновления нету чки обновления нету так апдейт чат Очень странно хорошо Мы же можем напрямую Да его вызывать ш update Нет напрямую не будем так Давайте ещё раз Хорошо а вообще у меня вот это функция она вызывается
31:01
Speaker A
Нет давайте Alert единичку вставим по идее у меня должна писаться единичка сейчас при обновлении страницы О'кей она пишется и пишется всего лишь один раз а почему она не вызывается повторно Хм так так так так А если мы сделаем зацикливание
31:52
Speaker A
например будем вызывать саму функцию саму в себе несколько раз Мы же можем такой беспредел устроить мы это легко можем сделать Ну вот дада да вот сейчас оно пошло сейчас оно пошло но интервал слишком маленький давайте так попробуем тогда
32:16
Speaker A
хотя бы уж вот так вот ой-ой-ой-ой-ой тут Что происходит вообще Нет давайте алерта уберём так О'кей Арт мы убираем апдейт чат мы его просто один раз вызовем вот отсюда вот и дальше мы соответственно будем вызывать его каждую [музыка]
32:58
Speaker A
Вот какое-то время мы будем его вызывать Вот раз тут тоже Давайте обновим страничку Нет просто обновляемся так я нажимаю отправить раз сообщени не доходят до сих пор как будто ошибка вот Нет оно не приходит то есть алерты работают а вот этот вот
33:25
Speaker A
домен элемент by ID почему-то у нас с вами не срабатывает абсолютно не срабатывает алерты это работают ещё раз Alert один так сохраняю обновляю первый Арт ждём второй вызове нет и второй не вызывается Да блин что такое-то почему ты не работаешь Скажи
34:22
Speaker A
мне пожалуйста Почему ты не работаешь Так сохранить первый ещё один ещё один Ну соответственно их много сейчас будет я я даже не успеваю соответственно их запускать так хорошо дадим чуть побольше времени первый и ещё один и всё всё
34:50
Speaker A
зависает У нас они вызываются и вызываются просто подряд друг за другом всё и заглохли Да так ещё раз P один Нет похоже идея была Тупиковая таким образом реализовать чат даже не знаю стоит ли выпускать эту серию Но идея реально Тупиковая просто
35:26
Speaker A
не не получается не получается так хорошо апдейт чат мы делаем просто Давайте вызовем его вот сюда вот один разочек вызываем через какое-то время или сразу вызываем вообще так я обновляю страницу так алерты просто их очень много на странице появляется А почему апдейт то
35:51
Speaker A
не работает хотя бы один раз он же должен сработать один раз обновление страницы же должно произойти Почему не работает и Арт Внутри тоже должен появиться непонятно так чат ID правильно прописали всё правильно про Тут ничего не происходит абсолютно
36:38
Speaker A
Так обновить iframe на странице не влияя на саму страницу посмотрим что нам предлагают а так нам предлагают использовать если нет ID то даже хорошо Location rel Да так так так обновить фрейма ПО клику Ну может быть по клику
37:13
Speaker A
действительно обновлять так конт Windows Ну мы это использовали же да мы это использовали почему только у нас эта штука не срабатывает а непонятно почему она не срабатывает так заменяю ещё раз так тут у нас что чат будет идентификатор прописали Давайте чат ID
37:47
Speaker A
Может быть так назовём его но он должен работать не бывает такого что он не срабатывает вот нет Отмена Ну хоть хоть что-то Ну давай с работай друг бесполезно почему-то не обновляется фрейм притом я уверен что если я сейчас
38:21
Speaker A
прикрутить Ну вот Давайте например чат обновиться бан замечательно какую-то кнопку мы с вами делаем прописываем Давайте онклик онклик апдейт чат [музыка] сделаем Он обновится и мы поймём что он обновился но почему-то у нас так а тоже не работает кстати скрипт
38:59
Speaker A
завис Ага скрипт завис видимо там происходит какая-то жесть внутри Возможно мы я даже не успеваю сейчас а обновлять Да нет похоже обновление страницы происходит Вот Но но происходит это всё дело очень быстро поэтому то решение нужно конечно же выпиливать кнопкой Так давайте
39:32
Speaker A
уберём может быть Тайт маленький указан так 1000 миллисекунд - это 1 секунда значит А нам что нужно сделать нам нужно вызывать [музыка] функцию не одну секунду а допустим хотя бы 10 секунд чтобы проходило так тут у нас раз в 10 секунд правильно Ну
40:03
Speaker A
правильно если вот это 1 Секунда в 10 раз больше раз в 10 секунд Так давайте смотреть Попробуем так А как ещё можно обновлять чат ещё можно же просто перезагружать страницу на странице фрейма как такой вариант Вот правда А зачем нам обновлять
40:35
Speaker A
чат отсюда Когда мы можем обновлять страничку фрейма классно почему я раньше до этого не додумался так обновить страницу JS пробу так просто получается Location А всё так так так в 30 секунд у нас будет обновление попробуем Давайте да попробуем раз у нас
41:14
Speaker A
хорошо раз у нас отсюда не получается произвести обновление чата давайте мы обновление чата пытаемся реализовать уже внутри самого чата вот Почему бы и нет так так тут мы что тут мы скрипт прописали А дальше дальше дальше указываю время 30 ну 30 секунд
41:48
Speaker A
наверно слишком много Давайте 10 секунд поставим вот я на всякий случай обновлю страничку посмотрим как она себя будет так обновлю вот эту страничку посмотрим Будет ли вообще обновление происходить Ну то есть должны быть перезагрузки страницы Ну да я тут я вижу перезагрузку
42:14
Speaker A
замечательно тут я тоже сейчас вижу перезагрузку страницы она происходит да ощущение что вот пошли вообще тем пум эта штука будет работать на первых порах оставим как есть так мне снова что ну по ощущениям работает да работает и всё
42:37
Speaker A
доходит Давайте смотреть так мне что мне нужно идентификатор первый так пишем Привет привет отправить вот к нам письмо должно прийти Вот сюда вот оно приходит так как дела Не письмо А конечно же сообщение приходит ну оно оно тоже приходит
43:12
Speaker A
замечательно выглядит в принципе даже неплохо Да это всё дело а ну О'кей всё такую реализацию пока оставим вот Давайте ещё раз попробуем вот так отправить Ну в принципе доходит Да тут тоже будет может быть просто не 10 секунд поставить а поставить побольше
43:45
Speaker A
времени немножко но в принципе мы реализовали легко и просто так хорошо что я хотел ещ сделать а я хотел выводить имена собеседников со страницы Вот давайте вот тут вот мы закроем так имена собеседника то есть с кем мы с вами общаемся сообщения чат
44:12
Speaker A
О'кей Мы кстати что мы с вами получаем А мы эти данные уже получаем да Вот они тут имя есть человека с которым мы хотим общаться Вот мы это всё получили правильно Да мы все данные есть Осталось просто вывести
44:32
Speaker A
что чат с тем-то с тем-то Или давайте просто допустим в H2 выведем что выведем имя человека Вот с которым мы общаемся Ой не туда нажал так имя раз возраст указывать Нет давайте просто имя Так нет я вот просто хочу обновить
45:04
Speaker A
страницу Да вот тамм человек пишет а тут давайте я также обновлю страничку и Марина нам вот тут вот пишет вот можно конечно ещё поиграться наверное так всё хорошо нажимаю отправить тут у нас появится Сообщение Да можно поиграться с цветами то есть
45:38
Speaker A
допустим девочкам сделать розовый цвет мальчикам сделать синий цвет и так далее но я думаю что мы это сделаем уже в прошлом выпуске потому что по времени это получилось очень много и также мы наверно какие-то внутрен уже будем делать дальше Вот кстати как
46:01
Speaker A
идея Мы же можем вот наше сообщение вынести вот сюда вот справа на анкету с пользователем Как вы на это смотрите может быть Зачем нам отдельный раздел сообщениями Ну хочешь ты с человеком пообщаться Ну вот мы же вот сюда можем
46:19
Speaker A
писать ему сообщения Он же их ут на рано вот этот блок пустой думать опять же хорошо замечательно на сегодня Значит мы это видео с вами заканчиваем большое спасибо что посмотрели его а как вы видите не всегда Всё бывает
46:42
Speaker A
гладко но всё-таки мы находим способы для реализации задуманного то есть да иногда бывают вот вот такие прям э трудности но вс-таки мы их решаем идём дальше двигаемся к своему стартапу сайту знакомств Вот спасибо что смотрите подписывайтесь на канал ставьте лайки и
47:11
Speaker A
как всегда для подписчиков на бусти я выложу полностью исходные коды из этого видео и вы сможете их более досконально Изучить и протестировать уже у себя я думаю что нам до старта осталось буквально чуть-чуть сделаем мобильную версию сайта придумаем
47:31
Speaker A
логотип зареган домен и будем пользоваться новым бесплатным дейтинговое сервисом Всё Всем пока увидимся в следующем видео
Topics:чатiframePHPJavaScriptHTMLBootstrapсайт знакомствразработкасоциальная сетьобновление сообщений

Get More with the SozAI App

Transcribe recordings, audio files, and YouTube videos — with AI summaries, speaker detection, and unlimited transcriptions.

App Store Google Play
Or transcribe another YouTube video here →

Free tools: TXT to SRT · SRT Validator · Merge SRT · Subtitle to Text · All tools

More from Damir Sharifyanov

View All
Свой сайт знакомств #21: генерим лендинги в ChatGPT для… — Transcript50:43
Свой сайт знакомств #21: генерим лендинги в ChatGPT для… — Transcript
2,985 1 Russian
Свой сайт знакомств #20: релиз проекта на домене, устан… — Transcript18:58
Свой сайт знакомств #20: релиз проекта на домене, устан… — Transcript
2,604 1 Russian
Свой сайт знакомств #19: генерим название в ChatGPT, ри… — Transcript45:30
Свой сайт знакомств #19: генерим название в ChatGPT, ри… — Transcript
2,799 1 Russian
Свой сайт знакомств #17: отправка сообщений, реализация… — Transcript36:40
Свой сайт знакомств #17: отправка сообщений, реализация… — Transcript
2,671 1 Russian
Свой сайт знакомств #16: Мои симпатии, Мне симпатизирую… — Transcript34:33
Свой сайт знакомств #16: Мои симпатии, Мне симпатизирую… — Transcript
4,098 1 Russian
Свой сайт знакомств #15: реализуем симпатии (лайки) и п… — Transcript39:19
Свой сайт знакомств #15: реализуем симпатии (лайки) и п… — Transcript
3,181 1 Russian
Свой сайт знакомств #14: роутинг на папках в PHP, с Cha… — Transcript21:37
Свой сайт знакомств #14: роутинг на папках в PHP, с Cha… — Transcript
1,881 1 Russian
Свой сайт знакомств #13: фильтрация без кнопки, из COOK… — Transcript1:13:43
Свой сайт знакомств #13: фильтрация без кнопки, из COOK… — Transcript
6,874 1 Russian
Свой сайт знакомств #12: доработка главной страницы и р… — Transcript35:07
Свой сайт знакомств #12: доработка главной страницы и р… — Transcript
3,092 1 Russian
Свой сайт знакомств #11: выводим информацию из базы дан… — Transcript39:13
Свой сайт знакомств #11: выводим информацию из базы дан… — Transcript
2,921 1 Russian
Свой сайт знакомств #10: фильтры анкет и поиск (образов… — Transcript57:33
Свой сайт знакомств #10: фильтры анкет и поиск (образов… — Transcript
1,270 1 Russian
Свой сайт знакомств #9: переносим Bootstrap на хостинг,… — Transcript49:05
Свой сайт знакомств #9: переносим Bootstrap на хостинг,… — Transcript
3,250 1 Russian