티스토리 뷰

반응형

서버에서 간단하게 txt파일을 자바스크립트에서 읽어오는 함수이다.

php와 자바스크립트로 코딩을 하다보면, 간단한 정보를 서버에 저장하고, 그 정보를 읽어와서 처리하는 구조로 작성하고자 할때, 어떤 동작을 실행 버튼을 누르면 서버 내용을 간단히 읽어오는 프로그래밍을 할때 유용한 코드이다.

실전 코딩에서 세션의 아이디를 3시간마다 발급받아서 비교하는 구문을 작성할때 사용하였다.

<sciript>

loadFile('SESSION.txt');

</script>

콘솔에 해당 세션아이디 값을 볼 수 있었다.

function loadFile(filePath) {
  var result = null;
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", filePath, false);
  xmlhttp.send();
  if (xmlhttp.status==200) {
    result = xmlhttp.responseText;
  }
  console.log(result);
  return result;
}

콘솔에 찍힌 SESSION.txt 값

 

그럼, 자바스크립트로 서버에 써 넣을 수도 있을까?

자바스크립트는 클라이언트 언어라서 직접할 수 있는 방법은 없습니다. (nodejs나 기타 자바스크립트 서버가 있는 경우는 제외)

그래서 ajax기법을 사용해서 php로 처리하는 방법이 제일 좋다고 생각합니다.

위와 같이 시간, 그리고 세션ID 두가지를 저장하는 TXT파일을 서버에 저장한다고 하면, 아래와 같이 실전코드를 작성할 수 있습니다.

<?php
header("Content-Type: application/json");  //json을 사용하기 위해 필요한 구문

isset($_REQUEST["SESSIONID"])  ? $SESSIONID=$_REQUEST["SESSIONID"] :   $SESSIONID=''; 
isset($_REQUEST["recordDate"])  ? $recordDate=$_REQUEST["recordDate"] :   $recordDate=''; 
$myfile = fopen("SESSION.txt", "w") or die("Unable to open file!");
$result =   $recordDate . ',' . $SESSIONID ;
fwrite($myfile, $result );   // date + , + SESSIONID 형태 저장
fclose($myfile);

//각각의 정보를 하나의 배열 변수에 넣어준다.
$data = array(
	"SESSIONID" =>    $SESSIONID,
	"recordDate" =>   $recordDate
);
   
//json 출력
echo(json_encode($data, JSON_UNESCAPED_UNICODE));

?>

php의 json 형태로 저장해서 돌려줍니다.

실전 코딩에서 정상적으로 시간과 세션ID가 저장되었음을 확인했습니다.

시간과 API에서 리턴한 세션기록들이 남아있는 코딩이 완성되었습니다.

자바스크립트로 위의 구간코드를 공유합니다.

// API 로그인은 공통사항이고, 세션아이디를 발급 후 분기함. // 품목등록, 거래처 등록은 함수 밖에서 실행하고 나머지는 여기서 실행함.
Ecount_login_click = function(selitem) {
console.clear();
const sessionDate = loadFile('SESSION.txt');
console.log(sessionDate);
let getID = sessionDate.split(',');

const lastDate = getID[0];
let SESSIONID = getID[1];
$('#sessionTime').val(lastDate);
$('#sessionID').val(SESSIONID);

let curDate = getCurrentDate();
console.log(curDate);
$('#loading').show();   // 화면에 로딩중 열기	
if(Number(lastDate) < Number(curDate) - 10000)
{
console.log('3시간 경과',curDate);
// 기본 로그인 모듈						 
fetch("https://oapiCD.ecount.com/OAPI/V2/OAPILogin", {
method: "POST",
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', 
headers: {
"Content-Type": "application/json",		                                
},						     
body: JSON.stringify({
"COM_CODE" : "자신의 회사코드" ,                						 // USER COM_CODE input 
"USER_ID" : "자신의 아이디" ,              						   // USER USER_ID input
"API_CERT_KEY" : "자신의 Key입력" ,     // USER API_CERT_KEY input  (테스터 API키)
"LAN_TYPE" : "ko-KR" ,                					   // USER LAN_TYPE input   
"ZONE" : "CD"                         					   // USER ZONE input
}),
})								
.then((response) => response.json())
// .then((data) => console.log(data.Data.Datas.SESSION_ID));		 // console에 SESSION_ID 출력해주는 구문						 
.then((data) =>  	{
const par = JSON.parse(JSON.stringify(data));
console.log(par);	  
const status = par.Status;
console.log('에러메시지' + status);	
// const result_error= par.Data.ResultDetails[0].TotalError;								  
if(status=='200')
{
const returndata = data.Data.Datas.SESSION_ID;
console.log('SESSION_ID : ' + returndata);
if(selitem=='estimate')  Ecount_inputEstimate(returndata);   // 견적서
if(selitem=='order')   Ecount_order_go(returndata);     	 // 주문서입력 함수 load
if(selitem=='saleinput')   Ecount_saleinput_go(returndata);     	 // 판매입력
if(selitem=='regist_item')  Ecount_regist_item_go(returndata);     	// 품목등록
if(selitem=='inquire_item')  Ecount_inquire_item_go(returndata);       // 품목조회
if(selitem=='regist_company')  Ecount_regist_company_go(returndata);   // 구매처등록

let tmp = { "recordDate": curDate , "SESSIONID": returndata  };		

$.ajax({
url: "saveSession.php" ,
type: "post",		
data: tmp, 
dataType:"json",
}).done(function(data){
resultcode = data;
console.log('session save date and ID');	
console.log(data);											
$('#sessionTime').val(curDate);
$('#sessionID').val(returndata);								
});
}
else
{										 
Swal.fire({ icon: 'error', // Alert 타입  error
title: '전송 실패', // Alert 제목 
text: status , // Alert 내용 
}); 
}

});		

}
else   // 기존 세션ID 처리함
{
console.log('3시간 미도달',curDate);
// 세션을 3시간 넘었으면 새로운 세션을 구하고 아니면 기존 세션ID 활용함.	  				
if(selitem=='estimate')  Ecount_inputEstimate(SESSIONID);   // 견적서
if(selitem=='order')   Ecount_order_go(SESSIONID);     	 // 주문서입력 함수 load
if(selitem=='saleinput')   Ecount_saleinput_go(SESSIONID);     	 // 판매입력
if(selitem=='regist_item')  Ecount_regist_item_go(SESSIONID);     	// 품목등록
if(selitem=='inquire_item')  Ecount_inquire_item_go(SESSIONID);       // 품목조회
if(selitem=='regist_company')  Ecount_regist_company_go(SESSIONID);   // 구매처등록	

}

$('#loading').hide();   // 화면에 로딩중 닫기		
}

 

참고로 위의 코드는 Ecount에 품목등록, 견적서 등록, 주문서 등록, 판매 등록을 위한 프로그램을 구현하고 있습니다.

처음에는 많은 삽질을 했지만, 잘 구현되서 사용하고 있습니다.

반응형
댓글