Javascript odświeżanie kilku divów

Witam.

Nie jestem pewien, czy na dobrym forum ten temat umieściłem, ale zdaje mi się ze tak.

Mam następujący problem. Potrzebuje zrobić tak jakby taki mały czat na stronię, i potrzebuje odtworzyć dźwięk gdy przyjdzie nowa wiadomość. Czat jest w php, autoodświeżanie w j query, i niestety napotkałem pewien problem.

Miałem zamiar zrobić to w ten sposób, że oddzielny setInterval ustawiony został na funkcje aktualizuj, która sprawdza ile jest wiadomości w bazie, i osobny setInterval dla funkcji update, która sprawdza ile jest wiadomości w  bazie, porównuje to z poprzednim wynikiem i jeśli będzie ich więcej niż było poprzednio to odtworzy dźwięk. Niestety, Intervale tak jakby się blokują. Jak ustawie np. setInterval(“updater();”,1200); i setInterval(“aktualizuj();”,1000); to oba się wykonują co 1200 ms. Wiecie może co jest tego przyczyną?

oczywiście każdy interval jest ustawiany przed każdą funkcją, nie obok siebie.

Pozdrawiam i czekam na odpowiedź

setInterval pobiera jako pierwszy parametr funkcję do wywołania, więc podaj jej nazwę bez cudzysłowia i nawiasów. Sprawdź przykład:

html
head
script
function updater() {
 console.log("UPDATE");
}
function aktualizuj() {
 console.log("Aktualizuj");
}
/script
/head
body
script
setInterval(updater,1200); 
setInterval(aktualizuj,1000);

/script
/body
/html

A po drugie raczej nie ten dział. Szybciej ktoś by Ci odpowiedział w dziale webowym :wink:

po pierwsze: 1200 i 1000 ms to naprawdę mała różnica czasu, może po prostu nie widzisz różnicy;

po drugie: pewnie odczytujesz dane z bazy po przez ajax. To masz czas reakcji nie zależy od tych timerów, zależy jak szybko odpowie serwer;

po trzecie: ajax i timery to ogólnie zły pomysł. Pod względem wydajności. Poczytaj sobie o websocketach i sprawdz czy twój serwer (hosting) to obsługuje. Wysłane poprzez websocket informacje są asynchronicze, nie będziesz musiał robić Interwałów - dostaniesz info o nowej wiadomości - zostanie wywołany wtedy odpowiedni event;

 

@mikolaj_s:

obydwie formy są poprawne i działają wszędzie.

nie, nie robię przez ajax?

robię przez php :smiley:

tak zawsze robiłem, ale nigdy nie miałem potrzeby do zrobienia czegoś tkaiego. Zauważam różnice, bo nawet jak ustawiłem jeden na 1000 ms a drugi na 2000 ms to i tak było co 2000 ms a nie co 1000 ms 1 a co 2000 ms drugi

@OP

Powyższy kod od @mikolaj_s nie działa tak jak ty to opisujesz. Loguj sobie czas na konsole, wszystko jest dobrze.

no to jak się odwołujesz z html do php ?

@arekk-99

To co opisałeś nie wystarcza, aby Ci pomóc. Nikt nie zgadnie w czym masz problem. Błąd nie tkwi w funkcji setInterval.

To teraz mam jeszcze inny problem. Może to jest wina tego, że strona nie leci po https.
Nie odświeża mi się nic. Napisałem krótki skrypcik w php wyświetlający tekst z bazy. Co kilka sekund mają mi się pobierać nowe wiadomości, bo skrypt jest właśnie wywoływany co kilka sekund. Jednak nie robi się nic.

Uzywanie interval aby sciagac dane to raczej zly pomysl.
Poczytaj wiecej o websockets, na przyklad tutaj:
https://www.sanwebe.com/2013/05/chat-using-websocket-php-socket

Ale to nie ma być chat, tylko pobierane z bazy pozdrowienia np

“Mam następujący problem. Potrzebuje zrobić tak jakby taki mały czat na stronię, i potrzebuje odtworzyć dźwięk gdy przyjdzie nowa wiadomość.”

“Ale to nie ma być chat, tylko pobierane z bazy pozdrowienia np”

No to albo masz problem bo robisz czat, albo nie robisz czatu.
Pozdrowienia, jezeli chcesz je wyswietlic w momencie dodania do bazy, dzialaja mniej wiecej jak czat.
set interval jest najgorszym mozliwym rozwiazaniem, poniewaz niezalezni od stanu bazy bombardujesz server kolejnymi zapytaniami, generujac dodatkowy ruch i obciazenie.
Websocket jest czyms, co pasowalo do Twojego opisu. Jezeli nie spelnia on twoich wymagan, opisz dokladniej twoj problem.
Dodatkowo, chyba myli ci sie skrypt PHP z javascript. Pobieranie nowych wiadomosci i wyswietlanie w przegladarce to wlasnie ajax/javascript, kod PHP nijak sie do tego ma.

Nie będę pisał pobierania z baz danych pozdrowień przeciążonym, beznadziejnym javascriptem. Chcę go jak najmniej na stronie, a setInterval ejst małą funkcją, która powinna to realizować dobrze.
CHodzi mi o aktualizowanie listy pozdrowień na bierząco.
I właśnie, że pobieram je skryptem php

Obczaj z jakiego roku pochodzi temat … w tedy modne było robienie wszystkiego ajaxem w pętli. Dzisiaj znaczna część “specjalistów” tak tworzy strony bo nie słyszeli jeszcze o websocketach ani webworkerach, a nawet jeśli to nie wiedzą jak to napisać na backendzie.

Prościej jest zrobić to ajaxem w pętli niż bawić się w websockety. Taka niestety jest brutalna prawda. Websoecket i webserver mają sens gdy masz wiele entry pointów, które odpytujesz ciągle. A jak na stronie masz tylko jeden taki entry point to nie wiem czy jest sens bawić się w stawianie webservera bo to przerost formy nad treścią. Na pewno będzie to wydajniejsze rozwiązanie dla klienta, ale trudniejsze w implementacji zwłaszcza po stronie backendu.

@arekk-99 niestety, ale użycie websocketu i postawienie webservera byłoby mniej obciążające dla przeglądarki niż setinterval i ajax. Wzrost wydajności rzadko kiedy idzie w parze z mniejszą linią kodu. Zwłaszcza w językach wysokiego poziomu, a co dopiero skryptowych.
Nie widzę jednak sensu w tym przypadku iść w tą stronę bo to będzie przerost formy nad treścią, chyba że masz niesamowicie duży ruch na stronie to faktycznie to się przełoży na mniejsze zużycie transferu. I w takim przypadku warto byłoby przejść na inne rozwiązanie.

Co do jednak samego problemu o jakim napisałeś to niestety wczoraj wysłałem szklaną kule do serwisu, a z fusów nie umiem wróżyć. Musisz poczekać, aż mi kulę naprawią, ewentualnie możesz pytać wróżbitę Macieja.

PS.

PHP to dane wysyłasz, a pobierasz JSem.

NIe, pobieram php
Php ciągnę dane z bazy i wyświetlam je. Js ma mi tyko odświeżać

No to w ogóle bez sensu masz to napisane. Z takim podejściem to wywal całkiem JS i odświeżaj przy pomocy HTMLa.
Przecież takie rozwiązanie przeładowuje Ci całą stronę. Co w ogóle nie jest potrzebne, a wręcz przeszkadza. Wyobraź sobie, że czytasz coś i zjechałeś scrolem w dół, nagle bez powodu odświeża ci się strona i znów musisz szukać tego co czytałeś.

Dlatego chcę tylko ten konkretny fragment strony odświeżyć.
Szczególnie, że tma jeszcze jest player na stronie,a jak będzie mi się co minutę odświeżała strona to grać przestanie.

No to musisz to przepisać chociaż na odświeżanie danych przy pomocy ajaxa, inaczej nie da rady.
Chociaż bo najlepiej zrobić to przy pomocy webservera i web socketa, ale to sobie odpuść moim zdaniem.

A jak się używa mysqla w js jakimkolwiek?

Nie używa się. Dane w formie JSON musisz zwrócić sobie odpowiednim skryptem w PHP który odczyta dane z bazy. JS nie ma i mieć nie może bezpośredniego dostępu do bazy bo każdy użytkownik mógłby w niej grzebać. Dlatego ukrywa się ją za serwerem WWW.

Poczytaj czym jest ajax i jak działa bo ewidentnie nie masz o tym pojęcia.
https://www.w3schools.com/js/js_ajax_intro.asp

EDIT:
Przy czym zamiast XMLHttpRequest użyj FetchAPI (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) bo jest prostsze.

Nie mam pojęcia bo nei potrzebowałem i raczej nie potrzebuję nadal mieć pojęcia co to za rpzeciążony zgrzyt.
Wolałbym to zrobić w taki sposób, w jaki powiedziałem. Da się tak, czy muszę czytać o tym krówsku ?