Живой чат с PHP и AJAX

[townsman]

Привет, ребята,

Кстати, в заголовке должно быть написано «живой чат».

Я пытался провести онлайн-чат с идеей, которая у меня возникла. Но у меня не получалось заставить это работать.

Моя идея заключалась в том, чтобы иметь форму с текстовой областью и кнопкой отправки и отправлять данные через AJAX в PHP-скрипт, который затем записывает в текстовый документ. С помощью Ajax извлеките данные обратно на страницу. Все это происходит в одной функции. У меня был прослушиватель ввода на кнопке отправки и на клавише ввода для ввода.

Моя первая проблема заключалась в том, что я выполнил именно это, но страница обновлялась только для меня, поскольку JavaScript обновлял страницу, на которой я находился, только тогда, когда я запускал функцию через кнопку ввода или отправки. Если бы на сайте были другие люди, чат был бы сломан.

Это заставило меня задуматься, что мне нужен скрипт на странице, который проверяет каждую секунду и извлекает данные. Я попробовал это через Ajax, чтобы обновлять консоль каждую секунду, и через скрипт Ajax, чтобы получить содержимое текстового файла, а затем попытался обновить текст. отправьте файл через форму и посмотрите, обновляется ли текст через консоль, но он не обновляется. Несмотря на то, что php записывает в текстовый файл и текст изменяется, он все равно извлекает старые данные. Возможно, он сохранил исходные данные в переменной.

Как я могу это сделать или какой лучший способ. У меня сейчас мозги ломаются.

Спасибо


Крис

 

[USW1]

Оглядываясь назад, я думаю, что это чудо, что я когда-либо придумал такую штуковину... и заставить ее работать? Может быть, я брал грибы или что-то в этом роде... В любом случае, спасибо за комплимент, @JEET

 

[Polezny7]

Не существует такого понятия, как правильный язык. PHP можно использовать на самых разных серверах, и если вам нужна такая гибкость, node.js вам не подойдет. Вы не сказали, почему node.js якобы лучше. Вы нашли библиотеку, которая уже обрабатывает 90% информации за вас? Я ни в коем случае не фанат PHP и в основном использую node.js, потому что он, как правило, более продуктивен. Но все, что вы можете сделать в node.js, в значительной степени можно сделать и в PHP. Если весь ваш проект уже написан на PHP, переход на node.js — это просто кошмар для обслуживания.

 

[3691]

То, что вы пытаетесь сделать, - это неправильный метод. Вы не сможете отображать новые сообщения без обновления страницы или ее части. Сделайте это с интервалом времени или большим количеством кликов, и ваш сайт в конечном итоге выйдет из строя. И вы сказали, что записываете сообщение в документ. Этот метод чертовски медленный.

Есть гораздо более простые способы вести чат, и вам вообще не нужен PHP. Все, что вам нужно, это правильные инструменты, такие как node.js. Только если вам нужно хранить данные в базе данных, вам понадобится PHP, но я не думаю, что база данных SQL — правильный выбор для этой работы.

Если вам нужна связь между браузерами, вы можете просто использовать webRTC. Вот с чего начать: https://github.com/mdn/samples-server/tree/master/s/webrtc-simple-datachannel

Но я рекомендую вам придерживаться node.js. Это намного проще, и доступно гораздо больше онлайн-ресурсов.

Удачи.

 

[Алеся Федосеева]

Просто хотел опубликовать тест, который показывает, что PHP фактически превосходит node.js:
https://thinkmobiles.com/blog/php-vs-nodejs/
Мы все знаем, что эти простые тесты не так уж много значат, но... PHP 7 — это огромный шаг вперед. Такой шаг вперед, что оптимизация и масштабирование теперь часто не являются основной причиной отказа от PHP, по моему мнению.

 

[hopistu]

Кто помнит этот замечательный тег ? Я помню, как разрабатывал систему живого чата для Netscape 4x, и это было примерно в 2000 году. Я заставил его работать, но это была хакерская работа. Я использовал кнопку для вызова функции, которая изменила источник пустой картинки. Единственное, что изменилось, — это строка запроса свойства src изображения. Всякий раз, когда свойство src объекта изображения изменялось, браузер отправлял серверу HTTP-запрос GET. Я добавил текстовое сообщение пользователя к URL-адресу изображения в виде строки запроса и отправил его на сервер. Сервер добавлял текст и идентификатор пользователя в таблицу базы данных, а таймер setInterval на стороне клиента обновлялся каждые x миллисекунд, извлекая записи чата из базы данных и вставляя их в поле текстовой области.

Сегодня у вас, любителей ловить рыбу, есть AJAX под рукой, что упрощает задачу. Фактически, создать чат с использованием Javascript здесь, в 2020 году, не составит труда. Это обратная сторона эволюции инструментов веб-разработки, к которым у нас есть доступ. Вещи, которые вы в то время собирали вместе, используя такой ограниченный язык сценариев, действительно улучшили ваши творческие навыки решения проблем.

В наши дни вы можете создать чат за 20 минут и все. Это включает в себя работу с базой данных на стороне сервера. Задача полностью сводится к простой задаче. Легко стать скучным и самодовольным, когда нет никаких проблем, которые могут вас мотивировать.

 

[Психодел1]

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

 

[susanin65]

Привет Сара,

Знаете ли вы, есть ли в Интернете ресурс, который объясняет это более подробно? Меня интересует исключительно сценарий обновления.

Если кто-нибудь напишет пример с использованием Vanilla JavaScript, это будет очень полезно. Мне не нравится JQuery, и я не использую его, но все же могу до некоторой степени его подготовить.

Спасибо

С уважением
Крис

 

[teasermedianet]

Ой, пожалуйста, не упоминай об этом @scu8a
С удовольствием.
Я считаю, что нам, начинающим программистам, повезло, что мы можем учиться на опыте таких опытных программистов, как вы!

Если бы кто-то сказал мне отправить текстовый ввод на сервер, не имея технологии AJAX GET/POST и не обновляя страницу, я бы почесал голову БОГ знает как долго...

Чем больше я об этом думаю, тем больше осознаю гениальность этого трюка.

 

[Вагиф1]

Зачем тогда вообще упоминать Facebook? Это абсолютно не обычный язык, настройка, интерпретатор/компилятор, который большинство компаний использовал бы или мог бы использовать... Что мы ДЕЙСТВИТЕЛЬНО знаем, так это то, что PHP был слишком медленным для Facebook и не отвечал их потребностям. SO FaceBook создал свою версию PHP, внутреннюю структуру и компилятор. FaceBook — это гораздо больше, чем просто PHP. Я думаю, что это ПЛОХОЕ сравнение в защиту PHP.

PHP7 — огромное улучшение по сравнению с PHP5. Это НАМНОГО быстрее и многообещающе. Учитывая слухи о скором появлении JIT для PHP8, это становится еще более многообещающим. Если PHP может последовать примеру Node, создав стабильный внутренний сервер, чтобы исключить эту старую школьную конфигурацию Apache и работать на JIT, теперь у вас может быть случай. Однако сейчас PHP не подходит для создания чего-либо, что будет привлекать большой трафик. Это правда, что вы можете масштабировать PHP, и он может прекрасно работать с веб-сайтами с высоким трафиком, но вы будете оптимизировать масштабируемость намного раньше и столкнетесь со множеством проблем, которые могут не возникнуть в более подходящих языках. Большинство компаний НИКОГДА не дойдут до этой точки... но когда вы это сделаете, с PHP это ХОРОШО! Мне нравится этот язык и нравится рабочий процесс... но, черт возьми, я не буду использовать его для серьезного проекта. Я перешел на Golang из-за того, что PHP был огромной головной болью!

 

[Angelika1]

Меня интересует числовой метод.

Таким образом, сценарий AJAX Sleeper имеет счетчик, и файл чата также имеет счетчик. Допустим, они оба начинаются с 0. Каждую секунду AJAX проверяет, больше ли счетчик файла чата, чем его собственный. Если да, перенесите данные чата на страницу и увеличьте собственный счетчик на единицу, если счетчик чата не больше, чем ничего не делать.

Когда пользователь отправляет сообщение. Сообщение записывается в файл и увеличивает значение счетчика на единицу. Теперь, когда сценарий AJAX перепроверит, он выведет данные чата на экран.

Это звучит правильно?

Это отличная концепция, и я совершенно новичок во всем этом, поэтому эти посты очень полезны. Спасибо.

 

[Shell2]

Где оно замедляется? Где узкое место? Нельзя просто сказать, что язык медленный. Erlang — очень медленный язык по сравнению с другими, но он используется в телекоммуникациях для управления большими сетями, поскольку узким местом не является процессор. Есть крупные компании, которые получают большую скорость от node.js (paypal), scala/java (twitter) и php (facebook). Facebook, вероятно, проделал большую работу, чтобы преодолеть негативные аспекты языка и повысить производительность, но он все равно может быть эффективным инструментом для большинства компаний. Откуда вы так уверены, что именно язык является узким местом? Компилятор Node.js V8 невероятно быстр, единственное, что замедляет работу node.js, — это отсутствие параллелизма, хотя для многих проектов с низким процессором на самом деле быстрее выполнять циклический перебор на одном ядре.

 

[Светлана Малинина]

Посмотрите этот простой чат jQuery: http://jsfiddle.net/chace/KVPu9/

PS вы можете взять эту идею и развить ее во что-то, отвечающее вашим потребностям.

Только что увидел эту небольшую функцию чата на github: https://gist.github.com/aponxi/4744599 для этого требуется БД, но это так просто.

 

[vseloved1]

ЕСТЬ такая вещь, как правильный инструмент для правильной работы. Есть языки, более подходящие для определенных задач, чем другие языки. Системы чата требуют большого количества запросов и транзакций с сервера. Каждый раз, когда вы отправляете и получаете сообщение, выполняются запросы. В типичной настройке PHP и веб-сервера, которую использует большинство пользователей, для этого требуется HTTP-запрос через веб-сервер, затем веб-сервер инициирует PHP, который открывает файл, анализирует его и интерпретирует код построчно, а затем возвращает выходные данные, которые веб-сервер доставляет пользователю. С Node.js он может действовать как собственный веб-сервер, минуя старую традиционную настройку, и его код не выполняется построчно. Он асинхронный... и в коде используется JIT, так что текстовый код будет скомпилирован во время выполнения. Это три ОГРОМНЫХ преимущества node.js перед PHP для системы чата. Вот почему node.js — гораздо лучший инструмент для создания приложений чата, чем PHP. Все существующие PHP-скрипты чата — это кошмар веб-серверов, использующий язык не по назначению.

 

[Zheka_Cheshev]

Вам нужны два скрипта:

1. отправка нового текста, введенного пользователем
2. спящий, который просыпается (каждую секунду) и вызывает сервер для получения нового контента. Этот скрипт отправит счетчик или метку времени и обновит окно чата только в том случае, если возвращаемое число больше, чем число, использованное при последнем обновлении - на тот случай, если кто-то задержится и вернется после более позднего обновления. Это предполагает полное обновление. Если вы хотите, чтобы оно было инкрементным, вам нужно будет разобраться, как обрабатывать отложенные сценарии.

 

[Goodmen1]

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

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

На дворе 2020 год, если не хотите так сильно, попробуйте ржавчину и веб-сборку.

 

[Gutaref]

Предложение: используйте MySQL для обработки данных вместо плоских файлов, чтобы иметь возможность правильно обрабатывать большие объемы и одновременные запросы.
AJAX подходит для обычного трафика с некоторыми оптимизациями, если управление данными на стороне сервера надежно.
WSS можно использовать для дальнейшего масштабирования, но AJAX проще реализовать на большинстве хостов и платформ, включая популярную платформу WordPress.

Например, это приложение для видеочата https://paidvideochat.com/html5-videochat/ использует комбинацию WSS, WebRTC и AJAX.
WSS используется для сигнализации потокового видео WebRTC через Wowza SE (поскольку уже доступен) и AJAX для дополнительных функций, таких как чат и сигнализация веб-сервера на платформе WP.
Кроме того, существует связь между потоковым сервером и веб-сервером для потоковой части (авторизация потоков, мониторинг сеансов), агрегированная для всех потоков (всего несколько запросов). Чат и редкие взаимодействия обрабатываются AJAX как второстепенная функция, основной из которых является потоковое видео в реальном времени.
Мы рассматриваем возможность добавления вариантов взаимодействия WSS для клиентов с большими проектами, которые могут повысить сложность проекта с помощью дополнительного узла сервера.

 

[Bombik1]

Нет, № 1 предназначен только для отправки, он может вызвать обновление содержимого чата, но не делает этого.

№2 запрашивает данные для обновления.

Чтобы увидеть, как это происходит на практике, посмотрите datatables.net с ajax.

Datatables автоматически помещает поле поиска вверху таблицы.
Когда я ввожу текст в это поле поиска (клавиша вверх), на сервер отправляется запрос результатов поиска с номером - 1, 2, 3, 4, 5.
Поскольку я могу печатать быстрее, чем могут отображаться результаты поиска, результаты возвращаются с номером. Таким образом, если я наберу «Сара», и результат №4 вернется раньше, чем №3, он будет знать, что №3 не нужно загружать.

Ваш код обновления по сути будет имитировать это.

 

[ArcisMD]

Ванильный javascript было бы легко написать — это setInterval сна(), ajax-вызов с данными публикации.

Я не нашел хороших сообщений в блоге, но этот пример ясен и прост: https://coderanch.com/t/526538/languages/refresh-DIV

 

[Rezanchik]

Должно быть, это был самый странный сравнительный «тест», который я когда-либо читал. Он никогда не использовал применимый в реальном мире код, и тесты позиционировались на первом месте, лишая Node.js преимуществ. Зачем вам работать синхронно, если преимущество асинхронно??? Лучшим тестом в РЕАЛЬНОМ МИРЕ для сравнения яблок с яблоками было бы написание кода, который использует базу данных и какой-то механизм шаблонов. У вас будет традиционный PHP, настроенный с Apache и Node.js в качестве автономного сервера (или даже работающий с обратным прокси-сервером с использованием Nginx). Я гарантирую вам, что Node.js с автономным сервером, уже постоянным подключением к базе данных при запуске, а также кодом, компилируемым и запускаемым через Chrome V8, ВСЕГДА будет превосходить запрос к Apache, сервер, открывающий файл PHP, анализирующий содержимое и чтение/ построчное выполнение через интерпретатор, подключение на лету к базе данных и возврат данных на веб-сервер, который выдает их обратно в браузер. Совершенно бессмысленно запускать рутинные вручную выбранные функции за пределами реального приложения, чтобы получить результаты, доказывающие, что PHP быстрее, чем Node.js, для веб-разработки. Это все равно, что я беру Dodge Neon с полным бензобаком, а потом говорю, что он быстрее, чем Ferrari с пустым, поэтому вам следует участвовать в гонках на Dodge Neon. Выводите машины на полосу и гоняйте по той же трассе, в тот же день и с тем же водителем. Извините... Я фанат PHP, но Node.js превосходит его по производительности.

 

[boody]

Ржавчина и вебсборка??? Что? Узкое место не на стороне клиента. Если вам не удалось заставить его работать должным образом в Java, значит, вы делаете что-то не так. Все преимущества node.js, перечисленные выше, также применимы к Java, за исключением асинхронной модели. Вы можете делать что-то асинхронно, но вам нужны библиотеки. Наилучший пользовательский опыт всегда будет связан с веб-сокетами, так что вы не будете постоянно пинговать сервер. Кроме того, весь PHP перекомпилирует файл, который уже устарел, если вы можете настроить сервер самостоятельно, и это не дешевый общий хост.

https://hub.packtpub.com/php-8-and-7-4-to-come-with-just-in-time-jit-to-make-most-cpu-intensive-workloads-run-significantly-faster/
https://www.cloudways.com/blog/integrate-php-opcache/

Лично я по-прежнему предпочитаю node.js или scala... но того большого разрыва, который вы видите, больше нет.

 

[Юрий Гребеник]

Все эти спящие потоки и постоянные проверки приведут к снижению производительности браузера и, возможно, к увеличению счетов за передачу данных для пользователей. WebSockets были разработаны для этого конкретного сценария и имеют двустороннюю связь. К сожалению, чтобы заставить его работать правильно, потребуется немало дополнительного чтения. Если вы сделаете это таким образом, это должно быть намного надежнее. Существует PHP-библиотека для серверной части веб-сокетов, называемая Ratchet.

 

[Дмитрий Донов]

В PHP есть много вещей, которые меня интересуют, например, WordPress, поэтому в настоящее время я изучаю PHP, и это всего лишь побочный проект, над которым я пытаюсь разобраться. На самом деле я не разрабатываю отдельный чат-сайт. Я тоже присмотрюсь к этому методу. Спасибо.

 

[Persei1]

У меня это работает на одном из моих веб-сайтов.
Я не использую Ajax для загрузки нового чата, а вместо этого загружаю iframe.
Однако вы можете легко использовать ajax.

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

var ajaxURL= "mydomain/newChat.php?r=" + Math.random();

Это позволит избежать кэширования браузера, и вызов каждый раз будет обращаться к php-скрипту.

Понадобятся 2 скрипта: один для чтения новых сообщений, другой для добавления новых сообщений в файл.

Кроме того, не заходите на свой сервер каждую секунду, браузер сам выйдет из строя.
Я считаю, что от 30 до 60 секунд вполне достаточно.

 

[Валерий Первов]

Я действительно согласен с вашим ответом здесь. PHP труднее масштабировать, однако Facebook открыла исходный код большей части своего кода для его масштабирования, поэтому я не считаю это невозможным. Если у вас есть веская причина использовать PHP, я бы никогда не отказался от отличной библиотеки на платформе только из-за ее недостатков. Хотя это никогда не был моим первым выбором. Java и node.js чертовски быстры, и ни один из этих пунктов недействителен.