LINUX.ORG.RU

Взаимодействие двух веб страниц.

 ,


0

2

Добрый день!

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

Сделал на php + sql, но это громоздко. Есть какое то более простое решение?

Подсмотрел здесь, но кнопка «Send» не работает. Тест делаю на своей машине тут

php не подходит для этих целей, потому как он рожден чтобы умирать (or die('Hacking attempt!'))))))))))))))) ну те это не долгоживузее приложение, а скрипт который запускается каждый раз в случае CGI, сейчас там байт-кодхранится в памяти и запускается, но не об этом речь. короче

tz4678 ★★ ()
Последнее исправление: tz4678 (всего исправлений: 1)
Ответ на: комментарий от gruy

Да. находил это решение. Но не понимаю, как оно работает (ссылки выше, чат не работает). Есть ссылка на НОРМАЛЬНУЮ! пошаговую инструкцию?

Схема простая: две страницы, на одной 3 кнопки на другой 3 квадрата. Кнопку нажал, квадрат цвет поменял.

stslit ()
Ответ на: комментарий от gruy

Да у него совсем простое требование. Хватит обычного CGI на баше. Раз в секунду делать запрос и получать актуальную информацию…

А еще можно тупо iframe забабахать. Но ТС же молчит, что конкретно ему нужно!

anonymous ()
Ответ на: комментарий от stslit

Кнопку нажал, квадрат цвет поменял. Тогда действительно проще всего на баше CGI накалякать. В файле хранить состояние (например, btn0=0\nbtn1=1\nbtn2=0). При изменении кнопки отправляешь запрос POST к CGI, который вносит изменения в этот файл. А другая веб-страница каждую секунду делает POST-запрос к другому CGI, который читает этот файл и передает жабоскрипту его содержимое. Тупо делаешь eval и получаешь значения переменных!

anonymous ()
Ответ на: комментарий от anonymous

Т.е. в создать общую переменную в памяти нельзя, например, с помощью jquery?

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

stslit ()
Ответ на: комментарий от stslit

Нет, нельзя. Но никто тебе не мешает файл в оперативке (/dev/shm или tmpfs) держать.

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

Вот тебе первое приближение:

#!/bin/sh
#Converts Data sent by method Post or Get
# into stdout like param1 name1 param2 name2 etc.

echo -e "Content-type: text/html\n"

if [ "$REQUEST_METHOD" = "POST" ] ; then
    QUERY_STRING=`cat -`
fi

line=`echo $QUERY_STRING|sed 's/&/ /g'`

for pair in $line
do
    name=`echo $pair|sed 's/=/ /g'|awk '{print $1}'`
    type=`echo $pair|sed 's/=/ /g'|awk '{print $2}'|sed -e 's/%\(\)/\\\x/g'|sed 's/+/ /g'`
    printf "${name}=\"${type}\"<br>\n"
done

anonymous ()
Ответ на: комментарий от anonymous

Спасибо!

Правильно ли понимаю, что выше приведенный файл должен быть сохранен как index.cgi находится в папке с остальными файлами first.html и second.html?

Обращение к index.cgi из first.html записывает данные, second с определенным интервалом обновляется считывает данные через index.cgi?

Пытаюсь разобраться здесь https://documentation.help/Bash-CGI-ru/6.html

stslit ()
Ответ на: комментарий от stslit

ну буквально первые ссылки в гугле, например https://socket.io/get-started/chat

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

Noob_Linux ★★★ ()
Ответ на: комментарий от stslit

Hint: search pub-sub system using browsers

Это к примеру, там среди первых ссылок оффлайновое решение: https://reposhub.com/javascript/misc/olerichter00-offline-browser-pub-sub.html

Можно по подробнее или ссылку на решение?

Если только ссылку на курс по вебне. Есть serverless решения, есть облачные rest и graphql, есть google api наконец. Как-то до php + sql ты сам дошёл, все решения в этом направлении.

Огонь ответ! Где бы лайк поставить!?

Ехидство является самым непродуктивным способом общения. Скажи спасибо, что я пообедал и добрый.

vvn_black ★★★★★ ()
Последнее исправление: vvn_black (всего исправлений: 4)
Ответ на: комментарий от vvn_black

Спасибо за ответ! И прошу прощения за ехидство. Иногда напрягает, когда просишь помочь, а тебе отвечают: «конечно помогу, здесь все просто» и идут дальше.

Решение по ссылке говорит об одном браузере, одной системе. Здесь локально! развернутый сервер на debian, на который можно заходить с разных устройств и открывать две страницы «результат» и «управление».

Из рассмотренных мною примеров пока кажутся рабочими:

  • php + sql (наверное + jquery) (уже работает, но SQL много кушает)
  • обмен через файл в ОЗУ html + cgi (в процессе разбора)

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

stslit ()
Ответ на: комментарий от stslit

Здесь локально! развернутый сервер на debian, на который можно заходить с разных устройств и открывать две страницы «результат» и «управление»

локально

Так, разницы то нет особой локально или нет. Присоединяюсь тогда к посоветовашим socket.io

Вот, пример в связке с redis - https://stackoverflow.com/questions/8089725/how-can-i-have-different-web-browsers-subscribe-to-separate-channels-in-a-redis

vvn_black ★★★★★ ()

Решение без сервера вообще:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input id="value">
  <script>
    const input = document.getElementById('value');
    const storage = window.localStorage;

    input.value = storage.getItem('value');

    input.addEventListener('input', e => {
      storage.setItem('value', e.target.value);
    });

    window.addEventListener('storage', () => {
      input.value = storage.getItem('value');
    });
  </script>
</body>
</html>
static_lab ★★★★★ ()
Последнее исправление: static_lab (всего исправлений: 1)

сделать передачу информации от одной станицы к другой

ЯННП что ты хочешь. Ты бы лучше расписал свои хотелки подробно, а не выдумывал какие-то гипотетические решения.

no-such-file ★★★★★ ()

О, кстати, я делал когда-то давно в компьютерном классе чатик на CGI (баш). Можно поискать, хотя, эти архивы уже мхом поросли!..

anonymous ()

Надеюсь, это лаба, а не тестовое задание.

Если нужно взаимодействие между клиентами на разных машинах, то напрашивается обмен данными через сервер.

Nervous ★★★★★ ()

Всем спасибо за помощь и советы! Они помогли мне лучше разобраться в современных web технологиях.

Как говориться: «старый друг лучше новых двух!» Поэтому остаюсь на php + mysql + fetch/ajax

Объяснение работы тут

Отличный пример тут

Писать о работе php и mySQL, думаю, будет лишним.

P.S. Пока шел мозговой штурм, узнал об огромном количестве появляющихся и умирающих «самопильных костылей», которые продолжают дырявить безопасность и нагружать сервера. Решения предложенные профессионалами, часто, оказываются слишком очевидными(?) Было бы интересно собрать граф технологий которые сейчас можно интегрировать в HTML код типа такого но более полное и более удобном представлении.

Еще раз всем спасибо!

stslit ()
Ответ на: комментарий от stslit

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

Подробности, пожалуйста.

vvn_black ★★★★★ ()
Ответ на: комментарий от stslit

Этот «отличный пример» - параша дикая. Весь мир давно уже ушёл от flat php (смешивание html, php и css в одних и тех же файлах), а там это в примерах показывают. Надеюсь, ты из этого примера почерпнёшь именно идею, а сделаешь по-нормальному с помощью Twig хотя бы.

dimuska139 ★★ ()
Ответ на: комментарий от dimuska139

Спасибо за очень правильное направление! Для «поделки на коленке», хватит и голого php, но впереди большой openSource проект, где нужно много визуализации и работы с БД в интранет сегменте.

stslit ()
Ответ на: комментарий от vvn_black

Можно посмотреть выше. Так же гугл в помощь.

На мой взгляд использовать самописные платформы, где нет сообщества и последняя версия была выпущена 2 года назад. Довольно рисковано. За подробностями сюда: модель Миллса

stslit ()
Ответ на: комментарий от stslit

Если «много визуализации», то фронтенд от бэкенда отделите, и сделайте так, чтобы бэк был в виде API, работающим с JSON. А html весь на фронтенде (React/Angular/Vue). Если не последуете этому совету, получите кашу))

dimuska139 ★★ ()

Если тебе просто нужна синхронизация страничек и не подразумевается многопользовательская история, то можно использовать localStorage. В таком случае даже бэк не пригодится.

anonymous ()