node.js를 이용해서 피시방 또는 가게안의 자리를 볼 수 있는 웹페이지를 만들고있습니다.

우선 블럭들을 자리모양으로 만들어서 클릭을하면 색이 바뀌도록 만들었습니다.

제가 node.js를 처음해봐서 http://blog.naver.com/PostView.nhn?blogId=hyoun1202&logNo=220671500986

여기있는 영화예매 만들어보기를 기준으로 만들었습니다. 여기서  socket 쓰는 부분만 json으로 post하도록 바꾸었습니다.

근데, 제가 만든 사이트에서는 누르면 바로바로 색이 바뀌는것이아니라 누르고 새로고침을 해줘야지만 색이바뀝니다.

해당 프로그램을 똑같이만든 다른사람들의 시연영상을보면 누르는 즉시 바뀌는거 같은데, 제꺼는 왜 안바뀌는지 계속 해봐도 잘안됩니다...


우선 index.js는
----------------------------------------------------
var express = require('express');
var router = express.Router();

global.seats = [       // 0 빈 공간, 1 예약가능 좌석, 2 예약이 완료된 좌석
    [1, 2, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 3, 3, 3],
    [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 3, 3, 3],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1],
    [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1],
    [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    [1, 1, 1, 1, 1, 1, 1, 0, 1, 1, 1, 1, 1, 1],
];


/* GET home page. */
router.get('/', function(req, res, next) {
  console.log(global.seats);
  res.render('index');
});

router.use('/reserve', function(req, res){
  var x = req.body.x;
  var y = req.body.y;
  global.seats[y][x] = 2;
  console.log(global.seats);
  res.end();
}) ;
router.use('/release',function(req, res){
  var x = req.body.x;
  var y = req.body.y;
  global.seats[y][x] = 1;
  res.end();
});
module.exports = router;
-------------------------------------------------
seats.js
var express = require('express');
var router = express.Router();


/* GET users listing. */
router.get('/', function(req, res, next) {
  //요청
    //req  --> x, y
    // seat[x,y] = 2;
  res.send(global.seats);
});

module.exports = router;
----------------------------------------------------
controller.jade
script.
        var onClickSeat = function () {
            var x = $(this).attr('data-x');
            var y = $(this).attr('data-y');

            $.ajaxSettings.traditional = true;
            $.ajax({
                type: 'POST',
                url: '/reserve',
                data: {x: x, y: y},
                success: function (data) {

                }
            })
        };
        var onClickRelease = function () {
            var x = $(this).attr('data-x');
            var y = $(this).attr('data-y');

            $.ajaxSettings.traditional = true;
            $.ajax({
                type: 'POST',
                url: '/release',
                data: {x: x, y: y},
                success: function(data){
                }
            })

        };

        $.getJSON('/seats', {dummy: new Date().getTime()}, function (data) {
            $.each(data, function (indexY, line) {
                var $line = $('').addClass('line');
                $.each(line, function (indexX, seat) {
                    var $output = $('', {
                        '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').on('click', onClickRelease);
                    }
                    else if (seat == 3) {
                        $output.addClass('counter');
                    }
                });
                $line.appendTo('body');
            });
        });