기본 콘텐츠로 건너뛰기

node.js socket.io를 활용한 영화 예매



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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
//영화 예매
var socketio = require('socket.io');
var express = require('express');
var http = require('http');
var fs = require('fs');
var seats = [       // 0 빈 공간, 1 예약가능 좌석, 2 예약이 완료된 좌석
    [1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
    [1, 1, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 1, 1],
];
//웹 서버 생성
var app = express();
//미들웨어 설정
app.use(app.router);
//라우트 수행
app.get('/', function (request, response, next) {
    fs.readFile('test1.html', function (error, data) {
        response.send(data.toString());
    });
});
app.get('/seats', function (request, response, next) {
    response.send(seats);
});
//웹서버를 실행
var server = http.createServer(app)
server.listen(52273, function () {
    console.log('Server running at http://127.0.0.1:52273');
});
//소켓 서버를 생성 및 실행합니다.
var io = socketio.listen(server);
io.sockets.on('connection', function (socket) {
    socket.on('reserve', function (data) {
        
        seats[data.y][data.x] = 2;
        io.sockets.emit('reserve', data);
    });
});
cs
cs
서버측 코드가 된다.

node를 공부하면서 느끼는 건데 서버측 코드가 생각보다 간단하다. 그냥 처리만 해주고 클라이언트에게 넘겨주기만 한다.
실질적으로 클라이언트에서 처리를 해주기 떄문에 클라이언트측 코드가 좀더 길어지는 듯 하다.


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Node.js Programming for Modern Web</title>
    <style>
        .line {
            overflow: hidden;
        }
        .seat {
            margin: 2px;
            float: left;
            width: 30px;
            height: 30px;
            vorder-radius: 3px;
        }
        .enable {
            background: yellow;
        }
        .enable:hover {
                background: black;
        }
        .disable {
            background: red;
        }
        .comeback {
            background: white;
        }
</style>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    
    <!--소켓 생성-->
    <script>
        //소켓 이벤트 실행
        var socket = io.connect();
        //이벤트 연결
        socket.io('reserve', function (data) {
            var $target = $('dic[data-x=' + data.x + '][data-y = ' + data.y + ']');
            $target.removeClass('enable');
            $target.addClass('disable');
        });
</script>
    <!--초기 좌석 생성-->
    <script>
        $(document).ready(function () {
            var onClickSeat = function () {
                var x = $(this).attr('data-x');
                var y = $(this).attr('data-y');
                if (confirm('좌석을 예약하시겠습니까')) {
                    $(this).off('click');
                    socket.emit('reserve', {
                        x: x,
                        y: y
                    });
                } else {
                    alert('취소되었습니다');
                }
                
            };
            //Ajax를 수행
            $.getJSON('/seats', { dummy: new Date().getTime() }, function (data) {
                $.each(data, function (indexY, line) {
                    var $line = $('<div></div>').addClass('line');
                    $.each(line, function (indexX, seat) {
                        var $output = $('<div></div>', {
                            'class': 'seat',
                            'data-x': indexX,
                            'data-y': indexY
                        }).appendTo($line);
                        if (seat == 1) {
                            //좌석이 비어있으면 enable 클래스와 click 리스너를 추가합니다.
                            $output.addClass('enable').on('click', onClickSeat);
                        } else if (seat == 2) {
                            //좌석이 사용 불가능 하면 disable클래스를 추가합니다.
                            $output.addClass('disable');
                        }
                    });
                    //문서 객체를 추가
                    $line.appendTo('body');
                });
            });
        });
</script>
</head>
<body>
   
</body>
</html>
cs
cs


클라이언트측 코드가 된다.
라벨:

댓글

댓글 쓰기

이 블로그의 인기 게시물

[node.js] 파일 리더기 만들기 - 사용 모듈 정리, pdf 구조, hwp 구조

pdf -> html 변환 가장 무난하다. 기본적으로 pdf는 htm와 비슷한 형태의 구조를 가지고 있다. 크게 header , body , xref table , trailer 의 구조로 되어있다. pdf는 환경에 상관없이 표현을 하기 위한 목적을 가지고 있는 파일이다. 이런 이유 때문에 무난히 진행이 된 것 같다. pdf2htmlex와 pdftohtmljs라는 모듈을 이용을 했다. var pdftohtml = require ( 'pdftohtmljs' ) ; var converter = new pdftohtml ( 'test.pdf' , "sample.html" ) ; converter . convert ( 'ipad' ) . then ( function ( ) { console . log ( "Success" ) ; } ) . catch ( function ( err ) { console . error ( "Conversion error: " + err ) ; } ) ; 이미지나, text같은 것들이 거의 100%로 변환이 된다. docx -> html 변환 docx파일을 html파일로 변환을 할 때는 style 적용과 한글이 깨지는 문제가 있다. 텍스트들을 전부 잘 읽기는 하는데 스타일 정보를 제대로 가져오지 못하기 때문에 좀 애매하다 - Headings. - Lists. - Customisable mapping from your own docx styles to HTML. For instance, you could convert WarningHeading to h1.warning by providing an appropriate style ...
댓글 쓰기
자세한 내용 보기

[css] css로 프린트 방지하기

웹에서 프린트 제어가 불가능 한 줄 알았는데 프린트 클릭 시  스크립트로 해당 이벤트를 받아올 수 있다. 하지만 스크립트를 사용하는 방법은 브라우저마다 작동을 하지 않을 수 있다. 좀 더 찾아보니 css로 인쇄되는 영역을 제어를 해줄 수 있다.  @media print 를 이용하면 된다. < html > < head > < title > print test page < / title > < style > @media print { . np { display : none ; } } < / style > < / head > < body > < div class = "np" > test < / div > < div > test1 < / div > < div > test1 < / div > < div > test1 < / div > < / body > < / html > 위 코드를 보면 np 클래스를 @media print에 넣어주었다. @media print는 인쇄됐을 때의 스타일을 지정을 해주는 것이다.  위에서는 해당 페이지를 인쇄할 때 p를 display : none으로 가려주었다. @media print를 이용하면 좀 더 멋진 인쇄물을 만들 수 ...
댓글 쓰기
자세한 내용 보기

[알고리즘] snake게임 알고리즘

막무가네로 알고리즘을 공부하면 재미가 없으니 게임을 접목하여 다루어 보도록 하겠습니다. 게임의 대상은 스네이크 게임입니다. 많은 사람들은 어릴 때 뱀게임을 많이 해봤을 것 입니다. 이번에 다뤄볼 주제는 뱀이 움직임을 어떻게 구현을 할지 알아보겠습니다. 뱀은 크게 3가지의 경우가 있습니다 1. 가장 중요한 뱀을 움직이기 2. 음식먹기 이때 뱀은 크기가 늘어나야 합니다. 3. 뱀이 움직이는 정책   - 뱀이 움직이지 못하는 경우는 : 우측방향에서 좌측 방향으로 OR 위에 아래 방향고 같이 180도 반전되는 움직임은 막겠습니다. 순수한 알고리즘을 만드는 과정이기 때문에 음식을 먹었는지 안먹었는지 판단하는 부분은 랜덤으로 판단을 하도록 하겠습니다. def is_eat(): return random.choice([1, 0]) 랜덤으로 1, 0을 반환을 해줍니다. 실제로 게임을 만든다면 해당 함수는 뱀의 머리가 음식의 좌표와 같은지 검사를 해주면 되겠습니다. key_position_map = { 'w': [-1, 0], # up 's': [1, 0], # down 'a': [0, -1], # left 'd': [0, 1] # right } direction = key_position_map.get('d') 다음으로는 키맵핑을 한 오브젝트 입니다. direction은 현재 뱀의 방향을 나타냅니다. snake_body = [[2, 3], [1, 3],[1, 2], [1, 1]] 주인공이 되는 뱀의 좌표들 입니다. while True: key = input() new_direction = key_position_map.get(key) if new_direction and direction_check(direction, new_direction): directi...
댓글 쓰기
자세한 내용 보기