노드js_그누보드와 연동_01

오늘 페이지 리로딩또는 관리자액션 없이 실시간으로 웹페이지에 모니터링(웹소켓사용)하는 기능이 필요하게 되었다.

즉, 일반적인 호스팅인 http 서비스는 half duplex(반쪽 양방향) 통신이라면, 호스팅 웹페이지에 + 노드js 서비스인 full duplex(전체 양방향)통신 기능(웹소켓이용)을 추가하는 것이다.

이제부터 Node js 라는 기능 웹환경의 그누보드 + 노드js(groom 노드js서버)로 구현을 시작 한다.

웹환경: 그누보드5(로컬테스트)

Node js환경: goorm IDE 무료계정

기술참조: https://sir.kr/g5_plugin/1666 (감사합니다.)

노드js지식: https://opentutorials.org/course/2136/11886, http://www.easyspub.co.kr/50_Menu/VideoView/353

1) 서버영역: 구름IDE에서 node js 콘테이너를 생성한다.

- 프로젝트 생성시 [빈 node js] 를 선택한다.

- 콘테이너실행 후 터미널화면에서 npm(Node Package Manage: 레드헷의 rpm과 같은역할)으로 3가지 패키지를 설치한다.

npm install ipaddr.js (그누보드에서 노드js URL로 ip주소를 사용할 때 필요, 구름node js는 호스트네임을 사용하므로 필요없으나, 그래도 설치한다.)
npm install express (노드js 기반의 웹프레임웍 패키지)
npm install socket.io (그누보드와 노드js 사이의 데이터 통신을 담당할 소켓 패키지)

- node로 js를 실행해서 서버를 구동시키는 server.js 파일을 노드js IDE작업화면에서 생성한다.

- 작업한 결과 화면은 아래와 같다.( npm으로 설치하면 node_modules 폴더가 생성됩니다. )

- 예) 그누보드에서 소켓패키지를 호출한다면, http://gnujs.run.goorm.io/socket.io/socket.io.js (*주, 경로에 node_modules 가 없다는...)

- 실행전 IDE화면에서 프로젝트 속성중 2가지를 체크한다.(포트를 9001으로 설정, 실행형태를 서버로...)

- server.js 파일 전문은 아래와 같다.

var port = 9001; //위 프로젝트 속성에서 설정한 포트이다.

var ipaddr = require('ipaddr.js');
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

var socket_ids = [];
var users = [];

function get_ip4(ipString){//구름nodejs에서는 ip번호대신 호스트도메인네임사용

    if (ipaddr.isValid(ipString)) {

        try {

            var addr = ipaddr.parse(ipString);

            if (ipaddr.IPv6.isValid(ipString) && addr.isIPv4MappedAddress())
                return addr.toIPv4Address().toString();

            return addr.toNormalizedString();
        }
        catch (e) {

            return ipString;
        }
    }

    return 'unknown';
}

io.on('connection', function(socket){

    socket_ids.push(socket.id);

    if (typeof users[socket.id] == "undefined") {

        io.to(socket.id).emit('get info');
    }

    socket.on('add connect', function(data){

        //data['ip'] = get_ip4(socket.request.connection.remoteAddress);//구름nodejs에서는 ip번호대신 호스트도메인네임사용
  data['ip'] = "gnujs.run.goorm.io"; //위 프로젝트 속성에서 설정한 호스트 도메인 이름 이다.
        data['referer'] = socket.request.headers.referer;
        users[socket.id] = data;

        var users2 = [];
        for (var i in users) {

            users[i]['c_id'] = i;
            users2.push(users[i]);
        }

        io.to(socket.id).emit('view connect', users2);
        socket.broadcast.emit('insert connect', users[i]);
    });

    socket.on('disconnect', function(){

        var i = socket_ids.indexOf(socket.id);

        if (!isNaN(i)) {

            socket_ids.splice(i,1);
        }

        delete users[socket.id];

        io.emit('remove connect', socket.id);
    });
});

http.listen(port, function(){

    console.log('listening on : ' + port);
});

- 마지막으로 IDE화면 상단의 실행 버튼을 클릭하면, 노드 js 서버가 실행 상태로 된다.

2) 그누보드5_노드js 커넥션 영역:

- 그누보드5 내의 plugin 디렉토리 내에 3개의 파일을 업로드 한다.(아래그림참조)

config.php ( $nc_config['server_ip'] = 'gnujs.run.goorm.io'; //노드js서버IP자리에 호스명.구름node js는 호스트명으로 실행되기 때문)

init.php ( 그누보드와 노드js 서버간에 소켓통신을 위해 커넥션을 시킨다.)

simple_view.php ( 노드js 서버에서 변경된 사항이 실시간으로 그누보드 화면에 적용되도록 코딩한다. )

3) 그누보드5 출력 확인:

- 그누보드5의 테마(basic스킨)파일에 아래 내용을 입력한다.(위치는 그림참조)

- head.sub.php 적당한 부분에 아래 한줄 추가
<?php include_once(G5_PATH .'/' . G5_PLUGIN_DIR . '/nodejs_connect/init.php'); ?>
- head.php 적당한 부분에 아래 한줄 추가
<?php include_once(G5_PATH .'/' . G5_PLUGIN_DIR . '/nodejs_connect/simple_view.php'); ?>

- 결과는 아래와 같습니다.(IE 브라우저와 크롬에서 접속시 화면 리로딩 없이 IE브라어저 오른쪽 화면에 실시간 접속자가 나타납니다.)

오늘은 여기까지 하고, 내일 부터는 작업한 내역을 실제 호스팅에 설치된 그누보드에 구현한 후, 분석한 관련 기술을 가지고,

관리자단 고정된 대쉬보드를 실시간 대쉬보드로 바꾸는 작업을 하도록 하겠습니다.

simple_view.php

0.0MB

config.php

0.0MB

init.php

0.0MB