ajax를 실시간으로 하고싶다.

php에서 sql을 다루어야 하는데 

js에서는 php를 인식하지않고 그렇다고 js에서 sql을 사용하기에는 

보안상 너무 취약하고.

 

흠.. 그래서 ajax(XMLHttpRequest) 를 사용하여서 비동기 방식으로 

php를 실행시켜서 sql값 (나는 url이라는 데이터 값을 가져오고 싶다)을 가져오는 것으로 하였다.

 

여기까지는 좋은데..흠..

데이터를 실시간으로 업데이트하고 싶다.

웹소켓처럼 실시간으로 데이터를 가져와서 반영할 수 있을까?

 

비동기도 결국에는 한번 호출되기 때문이다.

 

그럼 비동기 호출을 1초마다 계속 불러오면?

실시간이 된다.

		//get_url 에서 'url' 데이타를 가져오는 ajax 구문
		var prev_url = "";
		function update_video(){
			var xhr = new XMLHttpRequest();
			xhr.open("GET", "get_url.php");

			xhr.onreadystatechange = function(e){
				const {target} = e;
				//status 를 가져와서 현재 상태를 가저온다. 재귀함수로서 에러가 나지않을때 url을 가져옵니다.
				if(target.readyState === XMLHttpRequest.DONE){
					const {status} = target;
					if(status === 0 || (status >= 200 && status < 400)){
						var url = e.target.responseText;
						if(url != "" && url != prev_url){
							set_video(video, url);
							prev_url = url;
						}
					} else {
						console.log("error", e);
					}
				}
			}
			xhr.send();
		}

		update_video();

		//update faster
		setInterval(update_video, 1000);

 

get_url.php

<?php
	header('Content-Type: text/plain; charset=euc-kr');

	require("user.php");

	$sql = "SELECT * FROM switchdata WHERE flag=1 limit 1; ";
	$result = mysqli_query($conn, $sql);

	if(mysqli_num_rows($result) == 0){
		exit();
	}
	$row = mysqli_fetch_array($result);

	echo $row['url'];
?>