Aplikacja w czasie rzeczywistym

pytanie zadane 23 kwietnia 2018 w JavaScript przez BielikTM Początkujący (310 p.)
edycja 23 kwietnia 2018 przez BielikTM

Witajcie,

zacznę od tego kim jestem.

Mam 16lat i od jakiegoś czasu zajmuję się programowaniem w takich językach jak: HTML5 (wiem, że to jest język, który opiera się na znacznikach, ale nadal język), CSS i PHP, w którym dopiero zaczynam

Niedawno zacząłem realizację mojego projektu, który tworzę w dwóch kierunkach - muszę oddać mojemu nauczycielowi od informatyki do końca czerwca i samorealizacji. Napisałem już po części front-end w 100%, lecz nadal są małe poprawki, ale nie w tym problem.

Przejdę do sedna. Moim problemem jest to, że nie mogę odświeżyć danych bez przeładowania strony. Próbowałem już wielu kodów ze stron w internecie, lecz żaden z nich nie działał - a jak działał to odświeżało treśc... tylko, że z przeglądarką. :/

Dodam tylko zrzut tego, jak to wygląda: "Czas do wygaśnięcia usług:" - zależy mi na tym, żeby odświeżał się automatycznie - czyli, żeby odliczał czas bez przeładowania strony.

I chciałbym również dodać, że wszystko tworzę na razie na localhoscie - (XAMPP)

https://imgur.com/yl3ABqW

Pozdrawiam,

Bielik

<div class="border-user" style="box-shadow: 1px 1px 50px #e00000;height: 44px;text-align: center;margin-top: 12px;">
	    <div id="user-name" style="margin-left: 110px;margin-right: 120px; color: #ccc6c6;font-size: 14px;display: contents;display: contents;text-align: center;font-weight: bold;">
		 <div style="margin-left: 110px;margin-right: 120px;color: #ccc6c6;font-size: 14px;display: contents;text-align: center;font-weight: bold;">
		 
		 <?php   
		     $dataczas = new DateTime();
			 $koniec = DateTime::createFromFormat('Y-m-d H:i:s', $_SESSION['koniecuslug']);
			 $roznica = $dataczas->diff($koniec);
			 if($dataczas<$koniec)
	         echo "Czas do wygaśnięcia usług: </br>".$roznica->format('%y lat, %m mies, %d dni, %h godz, %i min, %s sek');
	          else
	         echo "Usługi nieaktywna od: </br>".$roznica->format('%y lat, %m mies, %d dni, %h godz, %i min, %s sek');	
		 ?>
	   </div>
	  </div>
	 </div>

komentarz 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Niestety zmartwię Cię, że nie zrobisz tego po stronie php. Owszem, możesz ustawić refresh co n czasu, ale to jest nie wygodne w tym przypadku od strony użytkownika.

Co robisz??

1. Tworzysz sobie endpoint (np: time-service.php bądż jeżeli Ci zależy na routingu (i masz projekt skonfigurowany pod routing np: service/time)

2.tworzysz skrypt AJAX pobierasz dane GET-em.

3.Zaczynasz obliczać po stronie klienta. (Dla bezpieczestwa dorzuć zmienną czasem ważności usługi do sesji).

4.Koniec czasu. Wysyłasz AJAX post rozkazem wykonania czegoś.

5.Pijesz drink.

komentarz 23 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Dziękuję za odpowiedź,

jednakże nie wiem, jak mam rozumieć punkt pierwszy. :/

Mogę prosić o objaśnienie?

komentarz 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

miejsce do którego AJAX ma "pukąc"

komentarz 23 kwietnia 2018 przez BielikTM Początkujący (310 p.)

No to łatwo zrozumiec, a te sformułowania "routing" "service/time"?

komentarz 23 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Jak ich nie rozumiesz to nie masz projektu dosotosowanego do niego :).

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Witam, napisałem już skrypt pobierania danych metodą GET w ajax dzięki poradnikowi na yt. Mógłbyś mnie naprowadzić, jak teraz wyświetlać te dane w moim pliku logged_in.php?

skrypt ajaxa:

function mysql_query(query, args = null) {
	
	var json = null; 
	$.ajax({
		type: "GET",
		async: false,
		url: "wyslij.php",
		data: {query : query, args : args},
		success: function(response) {
			json = JSON.parse(response)
		}
		
	});
	
	return json;
}

wyslij.php

<?php
  
  require_once ("connect.php");
  
  $query = $_POST['query'];
  $args = $_POST['args'];
  
  $real_query = null;
  
  if($query == "players_ingame") {

     $real_query = mysqli_query($mysqli, "SELECT uzytkownik, uslugi FROM nazwabazy");
	}
    
   if($real_query !=null) {
	
	$results = [];
	
	while($data = mysqli_fetch_array($real_query)) {
		array_push($results, $data);
	}
	
	echo json_encode($results);
	
}

?>

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Jeżeli wszystko prawidłowo zorbiłeś, nie wiem czy nie powinen być GET zamiast POST, to wchodzisz do logged_in.php no i odpowiednią komunikację odpalasz. Chyba, ze nie rozumiem do końca do twojego problemu.

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Ten kod działa, na pewno. Powiesz mi tylko, jak zrobić, żeby nie pokazywały się dane z bazy danych w divie?

<script type="text/javascript">
		$(document).ready(function() {
			setInterval(function () {
				$('#user-name').load('data.php')
			}, 100);
		});
	</script>

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

eee? A co ma się pokazywać?

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Wszystko w porządku, powiesz mi tylko co mam zrobić, żeby te dane z przyniesionych ajaxem nie wyświetlały się w id diva?

<script type="text/javascript">
		$(document).ready(function() {
			setInterval(function () {
				$('#user-name').load('data.php')
			}, 100);
		});
	</script>

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)
edycja 25 kwietnia 2018 przez BielikTM

Przepraszam za to, że są to "multiposty", ale ostatnio w mój modem internetu uderzył piorun (dwa dni temu) i dostałem wczoraj nowy - taki, który nie jest tak szybki i ma co chwilę jakieś problemy.

Wracam do skryptu.

W logged_in.php pokazuje mi dane pobrane z bazy:

screen: https://imgur.com/a/rbOPkBt

co mam zrobić, żeby nie pokazywało tych danych?

$result = $conn->query("SELECT uzytkownik, email FROM nazwabazy");
if ($result->num_rows > 0) {
	while ($row = $result->fetch_assoc()) {
		echo $row['uzytkownik'] . '<br>';
	}

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

To ja zadam inne pytanie, to po co chcesz sie komunikować z php?

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Po to, żeby wyciągać dane z bazy i np. po edycji w bazie danych danego rekordu od razu była odświeżana wartośc zaakutalizowanego rekordu na stronie bez przeładowania.

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

To po Co ci to na górze. ;p

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Sam już nie wiem, oświecisz mnie? Proszę :/

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

Nie bardzo, bo nie wiem co masz na myśli

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Dobrze.

Zależy mi na tym, żeby wszystkie informacje, które są zmieniane w bazie danych (przeze mnie) były automatycznie odświeżane bez przeładowania strony.

zdj: https://imgur.com/R4UvkSC

Dajmy na to, że chcę zmienić nazwę admin na admin2 i zmieniłem w bazie danych.. niestety, muszę przeładować stronę, żeby zaaktualizowało nazwę użytkownika. Chciałbym również dodać, że chcialbym, aby to odliczanie czasu się automatycznie odswiezalo.

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

A dlaczego ma wyjść poza div??

komentarz 25 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Nic ma nie wychodzić za div, po prostu zależy mi na odświeżaniu. :/

komentarz 25 kwietnia 2018 przez ShiroUmizake Nałogowiec (46,300 p.)

AJAXEM pobierasz przygotowane dane.

1 odpowiedź

odpowiedź 23 kwietnia 2018 przez marcin99b Szeryf (82,080 p.)

Poczytaj o Ajax i socketach
np socket.io

Jedno pozwala na komunikacje bez odświeżania
Drugie... kto powiedział że tylko klient może wysyłać żądania? dzięki temu serwer może wysłać ci np powiadomienie
Fajna opcja w przypadku powiadomień albo chatu

Co do PHP poczytaj o frameworkach, np Symfony albo Laravel (sporo tego jest)
Jeśli dopiero zaczynasz z php albo nie masz czasu na przenoszenie tego projektu, przynajmniej postaraj się oddzielić html od php, bo bardzo szybko się w tym wszystkim pogubisz

Wiele poradników dla początkujących pokazuje mieszanie html z php co jest ogromnym błędem, jednak tak najszybciej jest pokazać cokolwiek
Do czegoś większego niż kalkulator lepiej to oddzielać
Do czegoś większego niż projekt na weekend, lepiej użyć frameworka (nie jest niezbędny, ale nie musisz pisać podstawowych elementów typu obsługa żądań albo trasowanie)

komentarz 23 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Dziękuję za Pańską odpowiedź.

Czytałem wiele o websocketach, aczkolwiek nigdzie nie znalazłem poradnika, w którym objasniono wszystko od podstaw, najgorsze jest to, ze nie wiem, jak "zaincludowac" te websockety do XAMPP, a co dopiero używac ich. :/

komentarz 23 kwietnia 2018 przez marcin99b Szeryf (82,080 p.)

nie pisze w php (kiedyś coś grzebałem) ale znalazłem takie coś
https://stackoverflow.com/questions/1361925/how-to-enable-socket-in-php

zasada dodawania podobna jak w przypadku dodawania m.in xdebug

komentarz 23 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Super, dziękuję.

Postaram się zrobic to jutro. :)

komentarz 23 kwietnia 2018 przez BielikTM Początkujący (310 p.)

Super, dziękuję.

Postaram się zrobic to jutro. :)

A co do tego websocketa to chyba nie wystarczy tylko włączenie go w php.ini?

Będę musiał pisac jakiś kod?

komentarz 24 kwietnia 2018 przez Assasz Nałogowiec (30,460 p.)
edycja 24 kwietnia 2018 przez Assasz

Oj tak :) Będziesz musiał napisać serwer, który będzie obsługiwał sockety i jakiś skrypcik odpalający ten serwer np. poprzez konsolę. Do tego dochodzi obsługa socketów po stronie klienta.

Dla PHP niezłą biblioteką do WebSockets jest np. Ratchet, na którego stronie jest wszystko dokładnie (no prawie) opisane, co zrobić. Do tego może być Autobahn.js dla klienta. Inną opcją jest też skorzystanie z jakiegoś micro frameworka wyspecjalizowanego na WebSockets jak Sandstone i budowanie RESTowych endpointów działających na sockatach :)