terrorboy
Recent Comments
Recent Posts
03-29 15:05
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Tags
more
Archives
Today
Total
관리 메뉴

z9n

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

NodeJS, NodeWebKit

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

terrorboy 2017. 5. 19. 12:58


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

Log

준비물

  • 작업서버
  • 로그서버
  • 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>

[NodeJS, NodeWebkit] 웹소켓을 이용한 로그 확인기 - 서버.7z

[NodeJS, NodeWebkit] 웹소켓을 이용한 로그 확인기 - 클라이언트.zip


Comments