노드js_그누보드와 연동

노드js_그누보드와 연동_02

PHP(Class)

by 김일국 2017. 7. 18. 15:58

오늘은 그누보드와 연동하기 전에 노드JS와 일반 호스팅의 홈페이지와 데이터 전송에 대해서 기본기술을 공부해 보기로 한다.

예제는 LED전구를 켜고 끄는 자바스크립트를 기준으로 하였다.

- 순수 자바스크립트로 구현된 파일 -> 노드js를 이용해서 실시간 현황파악이 가능하게 구현된 파일

장점은 시설 관리자입장에서 사용자가 전구를 켜거나, 끈 사항을 관리자 웹화면에서 화면 재로딩 없이 확인 가능한 현황판 역할을 할 수 있다.

http://timespace7.dothome.co.kr/index.html -> http://timespace7.dothome.co.kr/nodejs.html

지난 포스트( http://blog.daum.net/web_design/476 )에서 노드js서버를 goorm.io의 무료 계정을 사용한다고 공지하였다.

(*주) 무료계정은 작업할때만, 노드js서버가 살아 있고, 로그아웃하면, 노드서버가 중지된다.

어찌되었든, 여기서는 노드js와 호스팅의홈페이지사이의 소켓통신 방법을 정리하는 시간을 가져보겠습니다.

-노드서버의 app.js 전문(주석을 참조하면서 보세요)

------------------------------------------------

var port = 9001;
var app = require('express')();//express 웹프레임웍의 일반적인 사용과정.
var http = require('http').Server(app);//http서버 객체생성 시 app(express) 프레임웍을 전달.
var io = require('socket.io')(http);//socket.io 소켓통신 객체생성 시 http서버 객체를 전달.
var msg = {//전역변수로 설정. 이유는,신규사용자가 페이지로딩시 현재상태를 가져갈수 있도록 처리
   msg: '' //초기에는 실행상태를 갖지 않게 한다.
  };
//.listen은 클라이언트에서 서버로 접속을 받기위해 대기하는 명령.
http.listen(port, function(){//노드js서버 실행여부 확인, 정상실행되었다면, 익명콜백함수 실행.
    console.log('Socket IO server listening on port : ' + port);//서버콘솔에 listening on...이 출력.
});

//.on은 클라이언트에서 서버로 소켓통신(명령또는 데이터를 주고받기)위해 대기하는 명령
io.on('connection', function(socket){//클라이언트에서 connect 소켓연결이 발생하면 callback(socket)함수를 실행.
console.log('a user connected');//서버콘솔에 a user connected를 출력.
// 접속된 모든 클라이언트에게 메시지를 전송한다
    io.emit('onOff', msg);//아무버튼액션이 없을때인 초기접속시 전역변수에 저장된 현재 상태값을 클라이언트에 전송한다.
socket.on('disconnect', function(){//클라이언트에서 disconnect 소켓연결끊김이 발생하면, 익명콜백함수 실행.
  console.log('user disconnect');//서버콘솔에 user disconnect 출력.
});

//클라이언트에서 메세지가 수신되면
socket.on('onOff', function(data){
  console.log('누르신 버튼은 %s', data.msg);
  msg = {
   msg: data.msg //전송할 데이터가 1개 이기 때문에 꼭 이럴 필요는 없다. 그래도 Json튜플형식으로 보내는 방식을 설명하기 위해...
  };
  // 메시지를 전송한 클라이언트를 제외한 모든 클라이언트에게 메시지를 전송한다
    //socket.broadcast.emit('onOff', msg);
  // 접속된 모든 클라이언트에게 메시지를 전송한다
    io.emit('onOff', msg);//여기에서 범위를 유추해 볼 수 있다. io > socket
});
});

------------------------------------------------------------------------------------------------------------------------

-클라인트(웹호스팅용) 홈페이지인 nodejs.html 전문

-----------------------------------------------

<?php
$remot_file_name = "http://gnujs.run.goorm.io/socket.io/socket.io.js";

function remoteFileExist($filepath) {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL,$filepath);
    curl_setopt($ch, CURLOPT_NOBODY, 1);
    curl_setopt($ch, CURLOPT_FAILONERROR, 1);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    if(curl_exec($ch)!==false) {
        return true;
    } else {
        return false;
    }
}
?>
<? if(remoteFileExist($remot_file_name) == 1) { ?>
    원격지에 파일이 존재합니다.(노드js서버 실행여부확인)
<? } else { ?>
    원격지에 파일이 존재 하지 않습니다.
<? } ?>

<!doctype html>
<html>
<head>
    <title> NodeJs GPIO INPUT/OUTPUT DEMO </title>
    <meta charset="UTF-8">
<style>
body {
    background-color: black;
    text-align: center;
}
p {
  font-size: 50px;
  color : yellow;
}
#state {
    font-size: 80px;
    color : red;
    text-decoration: none;
}
</style>
    <script src='http://gnujs.run.goorm.io/socket.io/socket.io.js'></script>
    
    <script>
    var serverUrl = 'http://gnujs.run.goorm.io';
    var socket = io.connect(serverUrl);
    </script>
</head>

<br/>
<p> LED is now <span id="state"> </span> state. </p>
<script type="text/javascript">
    var state = "off";
document.getElementById("state").innerHTML = state;
    //클라이언트에서 -> 노드서버로 메세지전송.
document.getElementById(on").onclick = function(){
        <? if(remoteFileExist($remot_file_name) == 1) { ?>
        var $msgOnOff = this.id;
        socket.emit(onOff", {msg:$msgOnOff} );//노드서버로 메세지를 전송(on).
        <? }else{ ?>
         alert('노드js서버가 실행중이 아닙니다.\n따라서 실시간으로 onOff가 보이진 않게됩니다.');
            document.getElementById("state").innerHTML = this.id; //디버그
        <? } ?>
}
    document.getElementById("off").onclick = function(){
        <? if(remoteFileExist($remot_file_name) == 1) { ?>
            var $msgOnOff = this.id;
            socket.emit(onOff", {msg:$msgOnOff} );//노드서버로 메세지를 전송(off).
  <? }else{ ?>
            alert('노드js서버가 실행중이 아닙니다.\n따라서 실시간으로 onOff가 보이진 않게됩니다.');
            document.getElementById("state").innerHTML = this.id; //디버그
        <? } ?>
}
    //노드서버에서 -> 클라이언트로 메세지 수신.
    socket.on(onOff", function(data){
    document.getElementById("state").innerHTML = data.msg;
    });
</script>
</body>
</html>

----------------------------------------------------------------------------

위 2개의 파일 app.js(노드js서버), nodejs.html(호스팅용홈페이지) 2개로 실시간 데이터변환(소켓통신)을 구현할 수 있음을 확인 할 수 있다.

그리고, 관련 기술은 주석으로 파악하실 수 있습니다.

다음 포스트에서는 이제 본격적으로 첫번째 포스트인 노드js_그누보드와 연동_01 내용을 분석해 보도록 합니다.

'PHP(Class)' 카테고리의 다른 글

워드프레스 테이블내용을 일반PHP로 출력하기01_리스트화면 (0)	2017.08.05
노드js_그누보드와 연동_03 (0)	2017.07.23
노드js_그누보드와 연동_01 (0)	2017.07.13
부트스트랩3.x 용 레이아웃 퍼블리싱_부가기능2(끝) (0)	2017.06.06
부트스트랩3.x 용 레이아웃 퍼블리싱_부가기능1(네이버xe레이아웃을위한) (0)	2017.06.05