[NodeJS, NodeWebkit] 웹소켓을 이용한 로그 확인기

Terrorboy·2021년 1월 13일

구자료

목록 보기

8/9

[NodeJS, NodeWebkit] 웹소켓을 이용한 로그 확인기

준비물

작업서버
로그서버
nodejs (express, http, url, ws, colors 필요)
nodewebkit (nodejs의 ansi-to-html필요)

동작 방식

PHP 또는 웹에서 로그 발생->서버로 http통신->서버에서 웹소켓으로 자료 전달-> 콘솔로그 클라이언트에서 출력

탄생 배경

안드로이드와 php 통신을 하는 경우가 발생을 하는데 실시간으로 안드로이드에서 어떤값이 전달되는지... 어떤 값이 반환 되는지 확인이 되지 않아 제작 하게 되었다.

작업중 비화

처음에는 직접 적으로 웹소켓으로 로그 자료를 발송하게 처리 하였으나.. 브라우져가 최신이 아닌경우(html5 미지원 브라우져) 사용 할 수 없다는 결론에 도달 하였다. 이에 머리를 굴리기 시작 했다. 좀 더 여러 디바이스에서 사용 가능 한 방법이 없을까? 결국 현재의 소스형태를 취하게 되었다 1차적으로 파라미터 형식으로 로그서버로 정보를 보내고 파라미터를 분해하여 따로 배열화 한다음 해당 서버에서 웹소켓으로 발송 하는것이다. 작업 후 윈도우 node 콘솔로 wecat -c 통신도 귀찮아져서 node webkit으로 웹소켓 서버에 접속하여 자료를 받아오도록 작업 되었다.

작업서버 PHP함수

// 콘솔 (TB서버로 로그 날림)
function TBConsole($Data='', $HeaderInfo='') {

    $server = 'test.com'; // 콘솔서버 주소
    $port = 7000; // 콘솔 포트

    if(is_array($Data)) $Data = http_build_query($Data);
    if($HeaderInfo == 1) {

        $RData = $Data.'&RemoteAgent='.urlencode($_SERVER['HTTP_USER_AGENT']).'&RemoteAddr='.urlencode($_SERVER['REMOTE_ADDR']).'&RemoteDomain='.urlencode($_SERVER['SERVER_NAME']).'&RemotePort='.urlencode($_SERVER['SERVER_PORT']).'&RemoteUri='.urlencode($_SERVER['REQUEST_URI']).'&RemoteReferer'.urlencode($_SERVER['HTTP_REFERER']);
    }
    else {

        $RData = $Data;
    }

    $handle = @fopen('http://'.$server.':'.$port.'?'.$RData, 'r');
    @fclose($handle);
}

로그서버 nodejs

var app = require('express')();
var http = require('http').Server(app);
var url = require('url');
var WebSocketServer = require('ws').Server
  , wss = new WebSocketServer({port: 7001});
var colors = require('colors');



// 접속자 전체 출력 하기 위한 broadcast 설정
wss.broadcast = function(data) {

  for (var i in this.clients)
    this.clients[i].send(data);
};


app.get('/', function(req, res){

    res.send('<h1>ready</h1>');

    var url_parts = url.parse(req.url, true);
    var query = url_parts.query;

    console.log(query);
    console.log('-------------------------------------------------------');

    var clientIp = req.connection.remoteAddress;

    wss.broadcast(('['+clientIp+']\n').green);
    wss.broadcast(JSON.stringify(query).cyan);
    wss.broadcast('-------------------------------------------------------'.rainbow);
});

wss.on('connection', function(ws) {


    wss.broadcast(('NewUser').rainbow);

    ws.on('message', function(message) {

        console.log('received: %s', message.magenta);
        wss.broadcast(message.magenta);
    });
});

http.listen(7000, function(){

    /*
    console.log('color test: bold'.bold);
    console.log('color test: italic'.italic);
    console.log('color test: underline'.underline);
    console.log('color test: inverse'.inverse);
    console.log('color test: yellow'.yellow);
    console.log('color test: cyan'.cyan);
    console.log('color test: white'.white);
    console.log('color test: magenta'.magenta);
    console.log('color test: green'.green);
    console.log('color test: red'.red);
    console.log('color test: grey'.grey);
    console.log('color test: blue'.blue);
    console.log('color test: rainbow'.rainbow);
    console.log('color test: zebra'.zebra);
    console.log('color test: random'.random);
    */
    console.log('TBConsole server is ready!!'.yellow);
});

클라이언트 소스(nodewebkit 접속기)

conf.conf

host=서버 주소
port=포트

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>FoxRain Log</title>
        <meta charset="utf-8">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
        // ========================================== //
        // 윈도우 기본설정
        // ========================================== //
        var gui = require('nw.gui');
        //gui.Window.get().showDevTools();
        // ========================================== //
        // 윈도우 기본설정 END
        // ========================================== //


        // ========================================== //
        // 환경설정 호출
        // ========================================== //
        var fs = require('fs');
        var ConfigData = fs.readFileSync('./config.conf', 'utf8');
        var temp = new Array();
        var host;
        var port = 0;
        temp = ConfigData.split('\n');
        temp['host'] = temp[0].split('=');
        temp['port'] = temp[1].split('=');
        host = temp['host'][1];
        port = temp['port'][1];
        temp = '';
        // ========================================== //
        // 환경설정 호출 END
        // ========================================== //


        // ========================================== //
        // 소켓설정
        // ========================================== //
        // 터미널 생상 코드 모듈
        var Convert = require('ansi-to-html');
        var convert = new Convert();

        // 스크롤 제어
        function scrollB() {

            $('body').animate({
                scrollTop:$('#grid').height()
            }, 1);
        }

        // 웹소켓
        var ws = new WebSocket('ws:'+host+':'+port);
        ws.onmessage = function(e) {

            var data = e.data;
            data = convert.toHtml(data);

            $('#grid').append('<div class="item"><span style="color#fff">> </span>'+ data +'</div>');
            //console.log(e.data);
            scrollB();
        }
        ws.onopen = function(e) {

            var mg = host+':'+port;
            $('#grid').append('<div class="item">'+mg+' 접속완료</div>');
            //console.log('ws:'+host+':'+port)
            scrollB();
        }
        ws.onclose = function(e) {

            var mg = host+':'+port;
            $('#grid').append('<div class"item">'+mg+' 접속종료</div>');
            scrollB();
        }
        // ========================================== //
        // 소켓설정 END
        // ========================================== //
        </script>
        <style type="text/css">
            body {
                background-color:#101010;
                color:#fff;
                margin:0;
                padding:0;
            }
            header {
                background-color:#2c3e50;
                width:100%;
                position: fixed;
                top:0;
            }
            footer {
                background-color:#1d2935;
                width:100%;
                position: fixed;
                bottom:0;
                height:50px;
                line-height:50px;
                padding: 0 10px 0 10px;
                text-align:center;
                font-size:12px;
            }
            .title {
                font-family: 'NanumGothic', 'dotum', 'Raleway', sans-serif;
                margin-top: 0px;
                text-align:center;
                height:50px;
                line-height:50px;
                font-size:25px
            }
            .tools {
                background-color:#1d2935;
                width: 100%;
                height:50px;
                line-height:50px;
                padding:0 10px 0 10px;
            }
            .container {
                margin-top:100px;
                margin-bottom:50px;
                padding:10px;
            }
        </style>
    </head>
    <body>
        <header>
            <div class="title">FoxRain Console Log</div>
            <div class="tools">
                <input type="button" value="새로고침" onclick="location.reload();">
                <input type="button" value="화면 지우기" onclick="$('#grid').html('');">
            </div>
        </header>
        <div id="grid" class="container"></div>
        <footer>
            <div>
                Copyright (C) FoxRain. All rights reserved.
            </div>
        </footer>
    </body>
</html>