O'Reilly에서 개최하는 웹 기술 컨퍼런스인 Fluent 2013이 미국 샌프란시스코에서 5월말에 열린다. 거기를 내가 갈 수 있는 것은 아니지만, 온라인으로 맛보기 컨퍼런스, 이른바 Fluent 2013 Preview를 하기에 잠도 안자고 들어봤는데, 꽤 들을만한 주제들이었다.

발표한 주제와 발표자들은 아래와 같다.

  • "this" in JavaScript: How It Really Works - Martha Girdler
  • Hardware Access and Device APIs with JavaScript & HTML5 - Wes Bos
  • Prototyping à la Node with Express – Pam Selle
  • Principles of AngularJS – Brad Green & Shyam Seshadri

Martha의 발표는 자바스크립트가 어렵게 느껴지는 사람에게 꼭 필요한 내용이었고, Wes의 Device API소개는 이런 것도 된다는 데모 위주의 발표였다. Pam의 발표는 node.js와 express를 사용하면 쉽게 프로토타입을 만들 수 있다는 그냥 뻔하게 느껴지는 발표여서 좀 실망했지만, 그래도 (발표의 의도와는 동떨어졌지만) JustinmindMixture.io라는 프로토타이핑 툴을 알게된 것은 소득이었다. 마지막 AngularJS 발표는 뭔가 문제가 있는지 진행 중에 슬라이드가 제대로 넘어가지 않아서 내용에 집중하기 어려웠고, 시간이 짧다보니 몇몇 특징들만 소개하는 것으로 끝났다. 발표 슬라이드는 O'Reilly에서 배포한 아래 링크에서 PDF로 다운로드 가능하다.

Device API는 발표 내용을 바탕으로 한번 시험해보면 재미있을 것 같고, AngularJS는 실제로 사용할만한지는 아직도 의문이긴 하지만, 제대로 살펴봐야겠다.

웹개발을 하다보면, 테스트 용도로 잠시 간단한 웹서버가 필요할 때가 자주 있다. 하지만, 이럴때마다 APMSETUP이나 XAMPP같은 것들을 설치하기는 조금 부담스러울때가 있다. 다양한 기능이 필요할때는 어쩔수 없지만, HTTP 요청/응답을 위해서 저걸 받아서 설치하자니 삽으로 할 일을 대형 장비를 가져다 쓰는 느낌이다. 그럴때 파이썬만 설치되어있다면 다음과 같이 간단하게 웹서버를 띄울 수 있다.

$ python -m SimpleHTTPServer 8000

8000은 원하는 포트 번호로 바꿔주면 되고, 실행한 경로를 웹 루트로 설정한다.

php

PHP에서 PDF 문서를 만들기 위한 방법에는 다음과 같은 것이 있다.

1. PDFlib

PHP 공식 사이트의 문서에 나와있는 PDF 생성방법이다. PHP 공식 사이트에 소개되어있는 만큼 가장 문서화가 잘 되어있다고 봐야할 것 같고, 제공하는 기능도 괜찮아 보인다. 하지만, PDFlib 자체는 유료 소프트웨어이므로 정식으로 사용하기 위해서는 라이센스를 구매해야한다.(구매하지 않으면, 생성하는 모든 페이지 위에 데모 문구가 찍혀서 나온다고 한다.) 비 상업적 용도로 사용한다면, PDFlib Lite 7을 사용하는 방법도 있다.(현재 유지보수는 하지 않고 있으며, 무료답게 기술 지원도 없다고 한다. 참고로 현재 PDFlib의 버전은 8이다.)

참고

2. FPDF

FPDF는 무료로 용도에 상관없이 사용할 수 있다. PDFlib에서 라이브러리를 설치해야하는 것과는 달리, PHP 라이브러리만 설치하면 되기때문에 설치도 쉽다. 게다가 ubuntu를 사용한다면, 저장소에 이미 있기때문에 더욱 간편하게 끝난다. 문서는 FPDF 공식 사이트에서 함수 설명과 예제를 제공한다.

참고

3. TCPDF

FPDF처럼 TCPDF도 무료로 용도에 상관없이 사용가능한 자유소프트웨어이다. 설치도 다운로드해서 파일을 include해서 사용하는 간편한 방식이다. 다만, FPDF가 ubuntu 패키지로 존재하는 것에 비해서 TCPDF는 별도로 다운로드 받아야한다. 그러나, FPDF가 기본적으로는 유니코드를 지원하지 않는 것에 비해서, TCPDF는 기본 지원한다.(FPDF의 경우, 한글은 CP949 코드셋을 사용한다.) 문서는 공식 사이트에서 PHPDoc과 예제를 제공한다.

참고

  1. 검색하다가 2019.03.04 15:21

    tcpdf
    위에 tcpdf 사이트에서 예를 보다가 같이 보면 괜찮은 사이트가 있어서~

    http://tcpdf.penlabo.net/

    a b c d ... 명령어 앞글자에 해당하는 걸 모아두었네요
    w // writeHTML 들어가보면 어떻게 사용하는지 잘 알수있습니다, (번역해서 보세요~)

  2. 검색하다가 2019.03.04 15:25

    비슷한 사이트 하나 더..

    https://www.rubydoc.info/gems/rfpdf/1.17.1/TCPDF

"패러디 웨이브가 어떤 것인지 빨리 한번 돌려보고 싶은 사람들을 위해서 간단한 사용방법을 적어보려고 한다. 먼저 프로그램및 발표 자료를 첨부한다.

ParodyWave-0.1a.zip 패러디 웨이브 0.1a
websocket.pdf 발표자료

먼저 Node.js 설치가 필요하다. Linux 등을 사용한다면 설치에 큰 어려움이 없겠지만, Windows를 사용한다면, cygwin을 먼저 설치하는 등 손이 좀 갈 것이다. 설치방법은 Node.js 웹사이트를 참고하여 다음과 같이 하면 된다.(Windows에서 설치해보고 싶은 사람은 여기를 참고하자.)

./configure
make
make install

설치가 끝나면 "패러디 웨이브" 파일을 다운로드 받아서 적당한 곳에 풀어놓고 다음과 같이 실행한다.

node WebSocketServer.js

그 뒤에 웹브라우저를 열고, 주소표시줄에 'http://localhost:8888'을 입력해서 다음과 같은 화면이 나오면 성공이다.

혹시 8888포트를 다른 곳에서 사용중이거나 다른 서버를 다른 곳에서 실행해서 접속 정보를 바꾸고 싶다면 다음 코드를 수정하면된다.

WebSocketServer.js 175줄
server.listen(8888);
ParodyWave.html 66줄
ParodyWaveClient.conn = new WebSocket("ws://localhost:8888");


이번에는 마지막으로 클라이언트 부분이다. 이 부분은 HTML5에서 제공하는 WebSocket API대로만 작성하면 되기때문에 크게 어려운 부분은 없다.

<!doctype html> 
<html> 
<head> 
    <meta charset="UTF-8" />
    <title>패러디 웨이브 version 0.1a</title>
	<style type="text/css"> 
		* { margin: 0; padding: 0; font-family: Helvetica; font-size: 9pt; }
		body { width: 100%; height: 100%; color; #444; overflow: hidden; }
		ul { list-style: none; }
		li { padding-left: 5px; font-weight: normal; color:#aaa; border-bottom: 1px dotted #ddd; padding-top: 5px; padding-bottom: 5px; }
		li:first-child { font-weight: bold; color: #000; }
		#thread-list { margin-top: 20px; }
		#thread-list li { border-style: none; display: inline; margin-right: 10px; }
		#welcome { position: fixed; width: 100%; height: 60px; margin-top: 200px; text-align: center; background-color: #888; padding-top: 30px; background: -moz-linear-gradient(center top, #444 0%,#222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444),color-stop(1, #222));}
		#home { position: fixed; width: 100%; height: 200px; margin-top: 200px; text-align: center; background-color: #888; padding-top: 30px; background: -moz-linear-gradient(center top, #444 0%,#222 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444),color-stop(1, #222));}
		#header { display: none; position: fixed; width: 100%; height: 30px; left: 0; top: 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444),color-stop(1, #222));}
		#header > h1 { color: #fff; font-weight: bold; font-size; 16px; float: left; margin-left: 10px; margin-top: 8px;}
		#join-count { float: right; height: 12px; margin-right: 5px; margin-top: 4px; background-color: #666; color: #ddd; padding: 3px; padding-left: 10px; padding-right: 10px; -webkit-border-radius: 10px 10px; font-size: 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #111),color-stop(1, #555)); }
		#input-container { position: fixed; width: 90%; height: 30px; bottom: 0; left: 10px; }
		#thread-container { width: 100%; height: 100%; overflow: auto; background-color: #fff; padding: 10px; padding-top: 30px;}
		input[type=text] { border: 1px solid #ccc; height: 25px; font-size: 14px; }
		input[type=button] { padding: 5px; padding-left: 15px; padding-right: 15px; font-size: 14px; border: 1px solid #e0a903; border-radius: 6px 6px; text-shadow: rgba(255,255,255,.5) 0 1px 0; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ffc000),color-stop(1, #e0a903)); background: -moz-linear-gradient(center top, #ffc000 0%,#e0a903 100%);}
		#thread > div { display: block; float: left; width: 180px; height: 250px; margin-right: 10px; margin-top: 5px; border: 1px solid #ddd; -webkit-box-shadow: 5px 5px 5px #aaa; -webkit-border-radius: 10px 10px;}
		#thread > div .title { background-color: #eee; padding: 3px; border-bottom: 1px solid #bbb; -webkit-border-top-left-radius: 10px 10px; -webkit-border-top-right-radius: 10px 10px; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff),color-stop(1, #ccc));}
		#thread > div .title .msg-count { float: right; height: 12px; margin-right: 5px; margin-top: 3px; background-color: #fff; border: 1px solid #bbb; color: #444; padding-left: 3px; padding-right: 3px; -webkit-border-radius: 10px 10px; font-size: 10px; }
		#thread > div .title .msg-count:hover { background-color: #444; border: 1px solid #222; color: #ccc; cursor: pointer;  }
		#thread > div .title > h1 { display: inline; text-align: right; margin-right: 10px; text-overflow: ellipsis; font-size: 14px; }
		#thread > div div.article-container { clear: both; padding: 5px; height: 205px; overflow: hidden; }
		#thread > div .article { font-size: 12px; }
		#thread > div .article .before { color: #bbb; }
		#thread > div .article .current { color: #444; font-weight: bold; }
		#thread > div .article hr { stroke-width: 1px; margin-top: 5px; margin-bottom: 5px; }
		#line { width: 90%; }
	</style> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script> 
    var ParodyWaveClient = {
        conn: null,
        user: "",
        thread: false,
        line: null,
        writing: false,
        currentValue: "",
		threadStore: null
	}
 
    $(document).ready(function () {
		var docWidth = $(document).width();
		var docHeight = $(document).height() - 30;
		
		$("#thread-container").css("height", docHeight+"px");
		
        $("#new-thread").click(openThread);
        $("#connect").click(function () {
            if (! ParodyWaveClient.conn) login();
            else logout();
        });
    });
 
    window.onunload = function () {
        if (ParodyWaveClient.conn) ParodyWaveClient.conn.close();
    }
    function login() {
        if("WebSocket" in window) {
            debug("connecting...");
            ParodyWaveClient.conn = new WebSocket("ws://localhost:8888");
            ParodyWaveClient.conn.onopen = function () {
                debug("connection established");
                ParodyWaveClient.user = $("#userid").val();
                $("#welcome>input").attr("disabled",true);
                $("#connect").val("LogOut").attr("disabled",false);
                $("#home").show();
				$("#welcome").hide();
				
                sendMsg({cmd: "status"});
                sendMsg({cmd: "list"});
 
				ParodyWaveClient.threadStore = new Array();
				
                setInterval(function() {
                  ParodyWaveClient.conn.send('HB');
                }, 60000);
            }
            ParodyWaveClient.conn.onmessage = onWebSocketMessage;
            ParodyWaveClient.conn.onclose = onWebSocketClose;
        }
        else {
            alert("This web browser doesn't support WebSocket!");
        }
    }
    function logout() {
        ParodyWaveClient.conn.close();
    }
    function openThread() {
        sendMsg({cmd: "open", user: $("#userid").val(), title: $("#title").val()});
    }
    function joinThread(idx) {
        sendMsg({cmd: "join", user: $("#userid").val(), id: idx});
    }
    function debug(str) {
        if ($("#chk-debug").attr("checked"))
            console.log(str);
    }
    function sendMsg(msg) {
        if (ParodyWaveClient.conn) ParodyWaveClient.conn.send(JSON.stringify(msg));
    }
    function onWebSocketMessage(e) {
        console.log(e.data);
        var msg;
        try {
            msg = JSON.parse(e.data);
        }
        catch (e) {
            debug("Invalid message");
            msg = {type: "error"};
        }
        switch (msg.type) {
            case "status":
                $("#join-count").text("Connection: "+msg.connections);
                break;
            case "join":
                if (msg.data) {
                    for (var i = 0 ; i < msg.data.length ; i ++) {
						addThreadData("new", msg.data[i][0], i, msg.data[i][1], msg.data[i][2]);
					}
                }
                $("#input-container").show();
                $("#home").hide();
 
				$("#header > h1").html("패러디 웨이브 version 0.1a");
				$("#header").show();
				
                ParodyWaveClient.currentValue = "";
                
                $("#line").bind("keyup", function (event) {
                    cmd = {cmd: 'update'};
                    if (! ParodyWaveClient.writing) {
                        ParodyWaveClient.writing = true;
                        cmd.cmd = 'new';
                    } else if (event.keyCode == 13 && event.srcElement.value != "") {
                        cmd.cmd = 'submit';
                        event.srcElement.value = "";
                        ParodyWaveClient.writing = false;
                    } else if (ParodyWaveClient.currentValue == event.srcElement.value) return;
                    cmd.value = ParodyWaveClient.currentValue = event.srcElement.value;
                    sendMsg(cmd);
                });
                break;
            case "list":
                $("#thread-list").html("");
                for (var i = 0 ; i < msg.threads.length ; i ++) {
                    if (! msg.threads[i]) continue;
                    $("#thread-list").append("<li><input type='button' onclick='joinThread(" + msg.threads[i][0] + ")' value='"+msg.threads[i][1]+"방에 조인' /></li>");
                }
                break;
            case "update":
                if (typeof msg.value != "string") addThreadData("new", msg.id, msg.line, msg.user, msg.value);
                else addThreadData("update", msg.id, msg.line, msg.user, msg.value);
        }
    }
 
	function addThreadData(type, id, lineNo, user, msg) {
		if (msg == undefined) msg = "<img src='wait.png' align='absmiddle'>";
		if (!$.isArray(ParodyWaveClient.threadStore[id])) {
			ParodyWaveClient.threadStore[id] = new Array();
			ParodyWaveClient.threadStore[id].push(new Array(lineNo, user, msg));
		} else {
			var matchLineNo = false;
			
			for (i = 0; i < ParodyWaveClient.threadStore[id].length; i++) {
				if (ParodyWaveClient.threadStore[id][i][0] == lineNo) { 
					matchLineNo = true;
					ParodyWaveClient.threadStore[id][i][2] = msg;
					break;
				}
			}
			
			if (!matchLineNo) ParodyWaveClient.threadStore[id].push(new Array(lineNo, user, msg));
		}
		
		if (ParodyWaveClient.threadStore[id].length == 1 && type == "new") { // new 
	        $("#thread").append('<div id="fdata'+id+
				'"><div class="title"><img src="person.png" align="absmiddle"><h1>'+ParodyWaveClient.threadStore[id][0][1]+
				'</h1><div class="msg-count" boxid="'+id+'" onclick="toogleHistory(this);">1</div></div><div class="article-container"><ul class="article"><li class="line-'+lineNo+'">'+ParodyWaveClient.threadStore[id][0][2]+
				'</li></ul></div></div>');
		} else {
			for (i = 0; i < ParodyWaveClient.threadStore[id].length; i++) {
				if ($("#fdata"+id+" .article li.line-"+lineNo).length <= 0)
					$("#fdata"+id+" .article").prepend("<li class='line-"+lineNo+"'>"+ParodyWaveClient.threadStore[id][i][2] + "</li>");
				else 
					$("#fdata"+id+" .article li.line-"+lineNo).html(ParodyWaveClient.threadStore[id][i][2]);
			}
			
			$("#fdata"+id+" .title .msg-count").text(ParodyWaveClient.threadStore[id].length);
		}
	}
	
	function toogleHistory(f) {
		var idf = "#fdata"+$(f).attr("boxid")+" .article-container";
		if ($(idf).css("overflow-y") == "auto")
			$(idf).css("overflow-y", "hidden");
		else 
			$(idf).css("overflow-y", "auto");
	}
 
    function onWebSocketClose() {
        debug('Disconnected');
        $("#welcome>input").attr("disabled",false);
        
        // initiate text input
        $("#userid").val("");
        $("#title").val("");
        $("#line").val("");
        $("#connect").val("LogIn")
        
        // close others
        $("#home").hide();
        $("#input-container").hide();
        $("#thread").html("");
        $("#users").text("");
        $("#welcome").show();
 
        // initiate status
        ParodyWaveClient.conn = null;
        ParodyWaveClient.user = "";
        ParodyWaveClient.thread = false;
        ParodyWaveClient.line = null;
        ParodyWaveClient.writing = false;
        ParodyWaveClient.currentValue = false;
        
        // unbind event
        $("#line").unbind();
    }
    </script> 
</head> 
<body> 
    <div id="welcome"> 
 
        <input type="text" id="userid" placeholder="대화명을 입력해주십시오."/> 
        <input type="button" id="connect" value="로그인" /> 
        <input type="checkbox" id="chk-debug" title="Show Debug Message"/> 
    </div> 
 
    <div id="home" style="display:none;"> 
        <input type="text" id="title" placeholder="생성할 방제목을 입력해주십시오."/> 
        <input type="button" id="new-thread" value="Create!" /> 
        <div> 
 
            <ul id="thread-list"></ul> 
        </div> 
    </div> 
 
	<div id="header"> 
		<h1>패러디 웨이브</h1> 
		<div id="join-count"></div> 
	</div> 
 
	<div id="thread-container"> 
    	<div id="thread"></div> 
	</div> 
 
    <div id="input-container" style="display:none;"> 
        <img src="chat.png" align="absmiddle"> <input type="text" id="line"/> 
    </div> 
    <div id="status" style="display:none;"> 
        <p id="users"></p> 
 
    </div> 
</body> 
</html>

login 메소드가 WebSocket 접속을 시도하는 부분인데, 64줄의 조건문으로 웹브라우저가 WebSocket을 지원하는지 여부를 판단할 수 있다. 66줄에는 접속하는 호스트 주소가 들어가는데, 환경에 따라서 적당히 바꾸면 되겠다.

80줄에는 타이머 설정이 있는데, 접속 유지를 위한 HeartBeat 코드가 들어가 있다. 서버에서 임의로 적용해놓은 타임아웃 설정 이외에도 웹브라우저에서 기본으로 적용하는 타임아웃이 있기때문에 사용중에 접속이 끊겨버리는 일을 방지하기 위해서는 이러한 코드가 필요하다. 현재 WebSocket Protocol에는 타임아웃에 대한 처리는 없다.

67, 84, 85줄에서는 각각 open, message, close 이벤트에 대한 핸들러를 지정하고 있다. 역시 대부분의 동작은 message 이벤트 핸들러에서 수행하게 된다.

이전 포스트에서 올린 서버에서 WebSocket 요청을 처리하는 부분에 이어서 이번에는 "패러디 웨이브" 서비스를 제공하는 부분이다. 정리가 제대로 안되서 코드가 보기에 좀 너접하지만, 이것 역시 참고 자료 삼아서 올린다.

ParodyWave.js
var ParodyWave = {
    totalcount: 0,
    clients: [],
    status: function () {
        var response = {type: 'status',
            connections: ParodyWave.clients.length};

        return JSON.stringify(response);
    },
    list: function () {
        var response = {type: 'list'}
        response.threads = ParodyWave.threads.list();

        return JSON.stringify(response);
    },
    newThread: function (title, conn) {
        var response = {type: 'join'};
        if (conn.activity.thread) {
            response = {type: 'error', text: 'already joined.'}
        } else {
            response.thread = conn.activity.thread = ParodyWave.threads.add(title);
        }
        return JSON.stringify(response);
    },
    joinThread: function (id, conn) {
        var response = {type: 'join'};
        if (conn.activity.thread) {
            response = {type: 'error', text: 'already joined.'}
        } else if (ParodyWave.threads.join(id)) {
            response.thread = conn.activity.thread = id;
            response.title = ParodyWave.threads._list[id].title;
            response.data = ParodyWave.threads._list[id]._data;
        } else {
            response = {type: 'warning', text: 'cannot joined'};
        }
        return JSON.stringify(response);
    },
    exit: function (msg, conn) {
        ParodyWave.threads.exit(msg.id);
        conn.activity.thread = null;
    },
    newLine: function (conn) {
        var l = ParodyWave.threads._list[conn.activity.thread].append(conn.activity.id, conn.activity.user);
        conn.activity.line = l;
        return JSON.stringify({type: "update", id: conn.activity.id, line: l, user: conn.activity.user});
    },
    update: function (v, conn) {
        ParodyWave.threads._list[conn.activity.thread].update(conn.activity.line, v);
        return JSON.stringify({type: "update", id: conn.activity.id, line: conn.activity.line, value: v});
    },
    submit: function (conn) {
        conn.activity.line = null;
    },
    notify: function (msg, conn, area) {
        for (var i = 0 ; i < ParodyWave.clients.length ; i ++) {
            var cond;
            switch (area) {
                case -1: // all, exclude same thread
                    cond = (conn.activity.thread !== ParodyWave.clients[i].activity.thread);
                    break;
                case 1: // same thread
                    cond = (conn.activity.thread === ParodyWave.clients[i].activity.thread);
                    break;
                case -2: // all, not in a thread
                    cond = (ParodyWave.clients[i].activity.thread === null);
                    break;
                case 2: // all in a thread
                    cond = (ParodyWave.clients[i].activity.thread !== null);
                    break;
                default:    // all, exclude me
                    cond = (conn !== ParodyWave.clients[i]);
                    break;
            }
            if (cond) ParodyWave.clients[i].write(msg);
        }
    }
};
ParodyWave.threads = {
    _list:[],
    count: 0,
    add: function (title) {
        var th = {}
        th.title = title;
        th.count = 1;
        th._data = [];
        th.append = function (id, user) {
            return th._data.push([id, user, ""]) - 1;
        }
        th.update = function (line, value) {
            th._data[line][2] = value;
        }
        th.get = function (line) {
            return th._data[line][2];
        }
        ParodyWave.threads.count ++;
        return ParodyWave.threads._list.push(th) - 1;
    },
    join: function (id) {
        if (ParodyWave.threads._list[id]) {
            ParodyWave.threads._list[id].count ++;
            return true;
        } else {
            return false;
        }
    },
    exit: function (id) {
        if (ParodyWave.threads._list[id] && -- ParodyWave.threads._list[id].count <= 0) {
            ParodyWave.threads._list[id] = null;
            ParodyWave.threads.count --;
        }
        ParodyWave.notify(ParodyWave.list());
    },
    list: function () {
        var l = [];
        for (var i = 0 ; i < ParodyWave.threads._list.length ; i++) {
            if (ParodyWave.threads._list[i] == null) continue;
            l.push([i, ParodyWave.threads._list[i].title, ParodyWave.threads._list[i].count]);
        }
        return l;
    }
};

exports.service = function(socket) {
    socket.on("open", onOpen);
    socket.on("message", onMessage);
    socket.on("close", onClose);
    socket.on("error", onError);

    function onOpen() {
        socket.activity = {id: null, user: null, thread: null, line: null};
        ParodyWave.clients.push(socket);
        socket.activity.id = ++ParodyWave.totalcount;
        ParodyWave.notify(ParodyWave.status(), socket);
    }

    function onMessage(data) {
        var msg;
        try {
            msg = JSON.parse(data);
        } catch (e) {
            if (data != 'HB') { // HeartBeat
                console.log(e);
                console.log("DATA: " + data);
            }
            return;
        }
        console.log(msg);   // Debug
        switch (msg.cmd) {
            case "user":
                break;
            case "status":
                socket.write(ParodyWave.status(msg));
                socket.write(ParodyWave.list());
                break;
            case "open":
                socket.activity.user = msg.user;
                socket.write(ParodyWave.newThread(msg.title, socket));
                ParodyWave.notify(ParodyWave.list(), socket, -2);
                break;
            case "join":
                socket.activity.user = msg.user;
                socket.write(ParodyWave.joinThread(msg.id, socket));
                ParodyWave.notify(ParodyWave.list(), socket, -2);
                break;
            case "exit":
                ParodyWave.exit(msg, socket);
                break;
            case "new":
                ParodyWave.notify(ParodyWave.newLine(socket), socket, 1);
                if (msg.value) ParodyWave.notify(ParodyWave.update(msg.value, socket), socket, 1);
                break;
            case "update":
                ParodyWave.notify(ParodyWave.update(msg.value, socket), socket, 1);
                break;
            case "submit":
                if (msg.value) ParodyWave.notify(ParodyWave.update(msg.value, socket), socket, 1);
                ParodyWave.submit(socket);
                break;
        }
    }

    function onClose() {
        for (var i = 0 ; i < ParodyWave.clients.length ; i ++) {
            if (socket === ParodyWave.clients[i]) {
                ParodyWave.clients.splice(i, 1);
            }
        }
        var idx = socket.activity.thread;
        ParodyWave.threads.exit(idx);
        ParodyWave.notify(ParodyWave.status(), socket);
    }

    function onError(exception) {
        console.log("ERROR: " + exception);
        for (var i = 0 ; i < ParodyWave.clients.length ; i ++) {
            if (socket === ParodyWave.clients[i]) {
                ParodyWave.clients.splice(i, 1);
            }
        }
    }
};

124~127줄의 부분을 보면 open, message, close, error라는 네가지의 이벤트에 대한 핸들러를 지정하는 부분이 있다. 원래 Node.js에서 WebSocket 접속이 이루어진다고 해도 HTML5 표준에 있는 WebSocket API에 정의된 이런 이벤트가 발생하지는 않지만, 서비스 구현시의 편리를 위해서 클라이언트와 비슷하게 임의로 저 이벤트를 발생하도록 WebSocket 요청 처리부분에서 구현했다. 따라서, 이전 포스트의 프로그램을 사용한다면, 서비스 부분에서는 HTML5에서 사용하는 것처럼 저 네가지 이벤트와 write(), end() 등의 메소드를 사용하면 된다.

지난 주에 'WebSocket & Node.js' 라는 주제로 발표하면서 예제로 준비했던 WebSocket을 사용한 간단한 채팅 프로그램을 여기에 올려보려고한다. 이 프로그램은 Google의 Wave서비스에서 아이디어를 얻어서, 훨씬 적은 부하로 Wave와 비슷한 기능을 구현할 수 있다는 것을 보여주려고 만들었기에 "패러디 웨이브"라고 이름을 지었는데, 어쩌다보니 Wave와는 전혀 다른 모습이 되었다.



사용해보신 분들의 요구 사항도 좀 적용하고 코드를 좀 더 정리해서, 실제로 사용할만한 모양을 좀 만든 뒤에 공개할 생각이었는데, 웹브라우저의 WebSocket 지원에 대한 이야기도 있고해서 정리한다고 시간 보내는 것보다는 기록 삼아서라도 되도록 빨리 공개하는 것이 좋다는 판단에서 그냥 공개하게 됐다.(필요한 사람이 있을까 싶긴 하지만...)

발표에서 이야기했지만, "패러디 웨이브"는 다음과 같이 구성되어 있다.

  • 클라이언트 : ParodyWave.html
  • 서버
    • 웹 소켓 요청 처리 : WebSocket.js
    • "패러디 웨이브" 서비스 : ParodyWave.js

위에서 볼수 있는 것처럼, 프로그램은 서버와 클라이언트로 되어 있고, 서버는 웹소켓 요청을 처리하는 부분과 실제 채팅 서비스를 제공하기 위한 부분으로 나뉘어있다. 각각 파일로 나뉘어 총 3개 파일로 구성되어 있는데, 한 부분씩 세차례에 걸쳐서 여기에 포스트할 예정이다. 오늘은 그 첫번째 부분으로 Node.js로 구현한 웹 소켓 요청을 처리하는 서버 프로그램을 올린다.

웹 소켓 요청 처리 부분은 간단하게나마 HTTP요청도 처리할 수 있도록 되어있고, 웹 소켓 요청의 경우에는 조금만 수정하면 요청 URL에 따라서 여러 서비스도 제공할 수도 있다. 어디까지나 예제 수준의 코드이므로 Node.js를 이용하면 현재의 웹브라우저에서 지원하는 WebSocket을 이런식으로 구현할 수 있다는 참고자료 정도로 보기 바란다.

WebSocketServer.js
var WebSocketServer = function (options) {
    require('http').Server.call(this);
    
    this.on('connection', onConnect);
    this.on('request', onRequest);  // HTTP Request Handler
    this.on('upgrade', onUpgrade);  // WebSocket Request Handler
    
    this.WebSocketResponse75 = [
        'HTTP/1.1 101 Web Socket Protocol Handshake', 
        'Upgrade: WebSocket', 
        'Connection: Upgrade',
        'WebSocket-Origin: {origin}',
        'WebSocket-Location: {protocol}://{host}{resource}',
        '',
        ''
    ]
    this.WebSocketResponse76 = [
        'HTTP/1.1 101 Web Socket Protocol Handshake', 
        'Upgrade: WebSocket', 
        'Connection: Upgrade',
        'Sec-WebSocket-Origin: {origin}',
        'Sec-WebSocket-Location: {protocol}://{host}{resource}',
        '',
        '{data}'
    ]
    
    function onConnect() {
    }
    
    function onRequest(req, res) {
        var fileName = '.'
        if (req.url == '/') fileName += '/ParodyWave.html';
        else fileName += req.url;
        require('fs').readFile(fileName, function (err, data) {
            if (err) {
                res.writeHead(404);
                res.end();
                console.log(fileName);
                return;
            } else {
                res.writeHead(200, {'Content-Length': data.length});
                res.write(data);
                res.end();
            }
        });
    }

    function onUpgrade(req, socket, head) {
        if ("sec-websocket-key1", "sec-websocket-key2" in req.headers) { // 76
            var key = calcResponseKey(req.headers["sec-websocket-key1"],
                                    req.headers["sec-websocket-key2"], head);
            if (key) {
                var res = socket.server.WebSocketResponse76.join('rn')
                            .replace(/{origin}/,req.headers.origin || '')
                            .replace(/{protocol}/,'ws')
                            .replace(/{host}/,req.headers.host || '')
                            .replace(/{resource}/,req.url || '')
                            .replace(/{data}/,key);
            } else {
                socket.end();
                return;
            }
        } else {    // 75
            var res = socket.server.WebSocketResponse75.join('rn')
                        .replace(/{origin}/,req.headers.origin || '')
                        .replace(/{protocol}/,'ws')
                        .replace(/{host}/,req.headers.host || '')
                        .replace(/{resource}/,req.url || '')
        }
        
        try {
            socket.write(res, "binary");
            var client = initiateWebSocket(socket);
            
            var action = require('./ParodyWave');
            action.service(client);
            client.ready(); // "open" event for action
            setTimeout(socket.end, 300 * 1000);
        } catch (e) {
            socket.destroy();
        }
    }

    function calcResponseKey(key1, key2, key) {
        var md5 = require('crypto').createHash('md5');
        [key1, key2].forEach(function (k) {
            var n = parseInt(k.replace(/[^d]/g,'')),
                space = k.replace(/[^ ]/g,'').length;
            
            if (space === 0 || n % space !== 0) {
                return null;
            }
            
            n = parseInt(n/space);
            var result = '';
            result += String.fromCharCode(n >> 24 & 0xFF);
            result += String.fromCharCode(n >> 16 & 0xFF);
            result += String.fromCharCode(n >> 8 & 0xFF);
            result += String.fromCharCode(n & 0xFF);
            
            md5.update(result);
        });
        md5.update(key);
        return md5.digest('binary');
    }
    
    function initiateWebSocket(socket) {
        var c = new process.EventEmitter();
        socket.on("data", onData);
        socket.on("end", function () { socket.end(); });
        socket.on("close", onClose);
        socket.on("error", onError);
        socket.wsBuffer = "";
        
        // WebSocket readyState status
        // 0: CONNECTING, 1: OPEN, 2: CLOSING, 3:CLOSED
        c.readyState = 0;
        c.ready = function() {
            if (c.readyState === 0) {
                c.readyState = 1;
                c.emit("open");
            }
        }
        c.write = function (data) {
          try {
            socket.write("u0000", "binary");
            socket.write(data, "utf8");
            socket.write("uffff", "binary");
          } catch(e) {
            socket.end();
          }
        };
        
        c.end = function () {
            socket.end();
            c.readyState = 2;
        };
        
        return c;
        
        function onData(data) {
            socket.wsBuffer += data;
            
            var chunks = socket.wsBuffer.split("ufffd"),
                count = chunks.length - 1;
            
            for (var i = 0 ; i < count ; i ++) {
                var chunk = chunks[i];
                if (chunk[0] == "u0000") {
                    c.emit("message", chunk.slice(1));
                } else {
                    socket.end();
                    return;
                }
            }
            
            socket.wsBuffer = chunks[count];
        }
        
        function onClose() {
            c.emit("close");
            c.readyState = 2;
        }
        
        function onError(exception) {
            if (c.listeners("error").length > 0) {
                c.emit("error", exception);
            } else {
                throw exception;
            }
        }
    }
};
require("sys").inherits(WebSocketServer, require("http").Server);

var server = new WebSocketServer();
server.listen(8888);

간단한 설명을 덧붙여보자면, 5~6줄에서 HTTP 요청과 WebSocket 요청시에 발생하는 Request 이벤트와 Upgrade 이벤트에 대한 핸들러를 등록한다. 엄연히 구분하자면, Upgrade 이벤트 발생시에 이것이 웹소켓 접속으로 프로토콜을 변경할 것인지 구분하는 과정이 있어야겠지만, 생략했다.

30줄부터 시작되는 onRequest 메소드가 HTTP 요청을 처리하는 부분인데, 웹서버 기능을 보강하려면 여길 고치면 되겠다. 현재는 요청한 url에 아무런 처리도 하지않고 그대로 현재 디렉토리에서 해당 파일을 찾아서 보내준다. 파일이 없을 경우에만 404 에러로 처리한다.

45줄부터 나오는 onUpgrade 메소드는 WebSocket 요청을 처리하는 부분으로 HandShake를 옛 방식과 새 방식을 모두 지원하게 해놓았고, 이 접속을 "패러디 웨이브" 서비스로 연결해주는 기능을 한다. 75줄을 적당히 고치면 여러가지 서비스를 요청 경로에 따라서 제공하는 것도 가능할 것이다.

php

PHP에서 MYSQL을 연결할때 사용하는 것이 mysql_connect() 함수인데, 하나의 세션/파일에서 여러개의 연결이 필요할때는 이 함수의 네번째 매개변수인 $new_link를 True로 설정해줘야한다. 그렇지 않으면 기존의 연결을 계속 재사용하게 되므로 의도와는 다르게 동작한다.

참고 : php.net


/*
ID: ****
LANG: C
TASK: dualpal
*/

/*#define __DEBUG__*/
#define TRUE 1
#define FALSE 0
#define MAX 100

#include 

int isDualPalindrome(int num);
int checkPalindrome(int num[], int pos);

int main()
{
	int N;
	int S;
	int i;
	int count = 0;

#ifndef __DEBUG__
	FILE *fin;
	FILE *fout;

	fin = fopen("dualpal.in","r");
	fout = fopen("dualpal.out","w");
	fscanf(fin, "%d", &N);
	fscanf(fin, "%d", &S);
#else
	printf("how many do you want to get palindromes : ");
	scanf("%d", &N);
	printf("what number do you want to palindromes that greater than? : ");
	scanf("%d", &S);
#endif

	for (i = S + 1 ; ; i++)
	{
		if (isDualPalindrome(i) == TRUE)
		{
#ifndef __DEBUG__
			fprintf(fout, "%dn", i);
#else
			printf("%dn", i);
#endif
			count++;
		}
		if (count == N) break;
	}

#ifndef __DEBUG__
	fclose(fin);
	fclose(fout);
#endif

	return 0;
}

int isDualPalindrome(int num)
{
	int i;
	int changedNum[MAX];
	int pos;
	int temp;
	int palCount = 0;
	
	for (i = 2 ; i < = 10 ; i++)
	{
		pos = 0;
		temp = num;

		do
		{
			changedNum[pos++] = temp % i;
		} while(temp = temp / i);

		if (checkPalindrome(changedNum, pos) == TRUE)
		{
			palCount++;
			if (palCount >= 2)
			{
				return TRUE;
			}
		}
	}
	
	return FALSE;
}

int checkPalindrome(int num[], int pos)
{
	int i;

	for (i = 0 ; i < = pos / 2 ; i++)
	{
		if (num[i] != num[pos-i-1])
		{
			return FALSE;
		}
	}

	return TRUE;
}

주어진 수보다 큰 수 중에서 2~10진수로 표현했을때 두번 이상 palindrome(회문) 이 되는 수를 구하는 문제였다. 상당히 어렵게 생각하고 있었는데 실제로 해보니 의외로 쉽게 풀린 문제다.

'Developing' 카테고리의 다른 글

PHP에서 MySQL 다중 연결시 조심할 것  (0) 2008.12.30
USACO Training - Dual Plindromes  (0) 2007.12.15
USACO Training - Milking Cows  (0) 2007.11.24
파이썬 문자열 뒤집기  (0) 2007.11.17
/*
ID: ****
LANG: C
TASK: milk2
*/

/*#define __DEBUG__*/
#define MAX 1000000

#include 

int main()
{
	int N;
	int start, end;
	int **time;
	int count = 0;
	int modified = 0;
	int i,j;
	int milkTime = 0;
	int restTime = 0;
	int temp;

#ifndef __DEBUG__
	FILE *fin;
	FILE *fout;

	fin = fopen("milk2.in","r");
	fout = fopen("milk2.out","w");
	fscanf(fin, "%d", &N);
#else
	printf("input the number of farmers : ");
	scanf("%d", &N);
#endif

	time = (int**)malloc(sizeof(int*)*N);

	for(i=0 ; i < N ; i++)
	{
		time[i] = (int*)malloc(sizeof(int)*2);
#ifndef __DEBUG__
		fscanf(fin, "%d %d", &start, &end);
#else
		printf("input start time and end time.n[start time] [end time]n");
		scanf("%d %d", &start, &end);
#endif
		for (j=0 ; j < count ; j++)
		{
			if (start <= time[j][1] && end >= time[j][1])
			{
				time[j][1] = end;
				modified = 1;
			}
			if (end >= time[j][0] && start < = time[j][0])
			{
				time[j][0] = start;
				modified = 1;
			}
		}

		if (modified == 0)
		{
			time[j][0] = start;
			time[j][1] = end;
			count ++;
		}
		modified = 0;
	}

	for (i=0 ; i < count ; i++)
	{
		for (j=0 ; j < count ; j++)
		{
			if (time[i][0] <= time[j][1] && time[i][1] >= time[j][1])
			{
				time[j][1] = time[i][1];
			}
			if (time[i][1] >= time[j][0] && time[i][0] < = time[j][0])
			{
				time[j][0] = time[i][0];
			}
		}
	}

	for (i=0 ; i < count ; i++)
	{
		temp = time[i][1] - time[i][0];
		if (temp > milkTime)
		{
			milkTime = temp;
		}
	}

	for (i=0 ; i < count ; i++)
	{
		temp = MAX;
		for (j=0 ; j < count ; j++)
		{
			if (time[j][0] > time[i][1] && temp > time[j][0])
			{
				temp = time[j][0];
			}
		}

		if (temp == MAX)
		{
			continue;
		}

		temp = temp - time[i][1];

		if (temp > restTime)
		{
			restTime = temp;
		}
	}

#ifndef __DEBUG__
	fprintf(fout, "%d %dn", milkTime, restTime);
	fclose(fin);
	fclose(fout);
#else
	printf("the longest continuous time of milking : %dnthe longest idle time : %dn", milkTime, restTime);
#endif
	return 0;
}

매번 뻔한 코딩만하다보니 문제해결능력이 많이 떨어졌다는 것을 느낀다. 이번 문제는 여러 젖소가 우유를 짜는 시각이 주어지고, 최소한 한 젖소에서 우유를 짜는 가장 긴 시간과 전혀 우유를 짜지 않는 가장 긴 시간을 구하는 문제였다.

최소한 한 젖소에서 우유를 짜는 가장 긴 시간은 금새 구할 수 있었지만, 우유를 짜지 않는 가장 긴 시간을 구하는 것은 쉽게 나오지 않았다.

'Developing' 카테고리의 다른 글

USACO Training - Dual Plindromes  (0) 2007.12.15
USACO Training - Milking Cows  (0) 2007.11.24
파이썬 문자열 뒤집기  (0) 2007.11.17
이클립스에서 EUC-KR 문서 이용  (0) 2007.11.08

+ Recent posts