기본 콘텐츠로 건너뛰기

node.js BingoGame





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
var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var socketio = require('socket.io');
 
var app = express();
 
app.configure(function () {
    app.set('port', process.env.PORT || 33333);
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'jade');
    app.use(express.favicon());
    app.use(express.logger('dev'));
    app.use(express.bodyParser());
    app.use(express.methodOverride());
    app.use(app.router);
    app.use(express.static(path.join(__dirname, 'public')));
});
 
app.configure('development', function () {
    app.use(express.errorHandler());
});
 
//development only
if ('development' == app.get('env')) {
    app.use(express.errorHandler());
}
 
app.get('/', routes.index);
app.get('/main', routes.main);
app.get('/users', user.list);
 
var server = http.createServer(app);
 
var io = socketio.listen(server);
 
server.listen(app.get('port'), function () {
    console.log("express server listening on port " + app.get('port'));
});
 
var users = {};
var user_count = 0;
var turn_count = 0;
 
io.sockets.on('connection', function (socket) {
    
    socket.on('join', function (data) {
        var username = data.username;
        
        
        socket.username = username;
        
        users[user_count] = {};
        users[user_count].name = username;
        users[user_count].turn = false;
        
        io.sockets.emit('update_users', users);
        
        user_count++;
    });
    
    socket.on('game_start', function (data) {
        socket.broadcast.emit ("game_started", data);
        users[turn_count].turn= true;
 
        io.sockets.emit('update_users', users);
    });
    
    socket.on('select', function (data) {
        console.log('select');
        socket.broadcast.emit("check_number", data);
 
        users[turn_count].turn = false;
        turn_count++;
        if (turn_count >= user_count) {
            turn_count = 0;
        }
        users[turn_count].turn = true;
 
        io.sockets.emit('update_users', users);
    });
    
    socket.on('disconnect', function (data) {
        delete users[socket.username];
        
        io.sockets.emit('update_users', users);
 
        user_count--;
    });
});
 
 
cs
cs
서버 코드이다.

서버는 데이터만 뿌려주는 역할을 한다. 단지 경유지점 같은것. ㅎㅎ
사실 서버라는게 클라이언트들을 연결을 해주기 위해 있는것이다(직접적으로 연결이 안되있으니... 경유지점을 만들었느데, 그것이 서버)
그냥 특정 이벤트에 대해서 그에 맞게 데이터를 적절히 뿌려주면 된다.

그럼 이제 클라이언트 소스들을 봐야겠다.

1
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
extends layout
 
block content
    h1= title
    p Welcome! #{username}
 
    #game
        #bingo
            table.bingo-board
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
                tr
                    td
                    td
                    td
                    td
                    td
            #user
                #list
                #logs
                input#start_button(type='button', value='Game Start!')
                input#username(type='hidden', value='#{username}')
                inpup#chat(type='text', value='chat')
cs

cs
main.jade

이건 html처럼은 생겼는데 html이 아니다.
jade라는 템플릿 엔진.

jade라는 놈은 html과 다르게 동적으로 표현이 가능하다.
태그는 html과 같다.


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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
var bingo = {
    is_my_turn: Boolean,
    socket: null,
    
    init: function () {
        var self = this;
        
        this.is_my_turn = true;
        
        this.socket = io.connect();
        
        this.socket.on("check_number", function (data) {
            self.where_is_it(data.num);
            self.print_msg(data.username + "checked'" + data.num + "'");
        });
        
        this.socket.on("game_started", function (data) {
            self.print_msg(data.username + " started this game.");
            $("#start_button").hide();
        });
        
        this.socket.on("update_users", function (data) {
            self.update_userlist(data);
        });
        
        //join
        this.socket.on("connect", function () {
            self.socket.emit("join", { username: $("#username").val() });
        });
        
        var numbers = [];
        for (var i = 0; i <= 25 ; i++) {
            numbers.push(i);
        }
        
        numbers.sort(function (a, b) {
            var temp = parseInt(Math.random() * 10);
            var isOddOrEven = temp % 2;
            var isPosOrNeg = temp > 5? 1:-1;
            return (isOddOrEven * isPosOrNeg);
        });
        
        $("table.bingo-board td").each(function (i) {
            $(this).html(numbers[i]);
            
            $(this).click(function () {
                self.select_num(this);
            });
        });
        
        $("#start_button").click(function () {
            self.socket.emit("game_start", { username: $("#username").val() });
            alert('start');
            self.print_msg("You started this game.");
            $("#start_button").hide();
        });
    },
    
    select_num: function (obj) {
        if (this.is_my_turn && !$(obj).attr("checked")) {
            
            this.socket.emit("select", {username: $("#username").val(), num: $(obj).text() });
 
            this.check_num(obj);
            
            this.is_my_turn = false;
        }
        else {
            this.print_msg("it is not your turn");
        }
    },
    
    where_is_it: function (num) {
        var self = this;
        var obj = null;
 
        $("#table.bingo-board td").each(function (i) {
            if ($(this).text() == num) {
                self.check_num(this);
            }
        });
    },
    
    check_num: function (obj) {
        $(obj).css("text-decoration", "line-through");
        $(obj).css("color", "#ccc");
        $(obj).attr("checked", "true");
    },
    
    update_userlist: function (data) {
        var self = this;
        $("#list").empty();
        
        console.log(data);
        
        $.each(data, function (key, value) {
            var turn = "(-) ";
            if (value.turn == true) {
                turn = "(*) ";
                console.log(value.name);
                console.log($("#username").val());
                if (value.name == $("#username").val()) {
                    self.is_my_turn = true;
                }
            }
            $("#list").append(turn + value.name + "
");
        });
    } ,
    
    leave: function () {
    },
    
    print_msg: function (msg) {
        $("#logs").append(msg + "
");
    }
};
 
$(document).ready(function () {
    bingo.init();
});
cs
 cs
main.js

이넘 덕분에 main.jade는 동적인 페이지가 된다. 하하......ㅋㅋㅋ

머 암튼 근데 이렇게 파일들이 분리가 되있는데 어떻게 하나로 될까?

영상에서 보시다시피 이런 파일을 그냥 불러온다.



1
2
3
4
5
6
7
8
9
10
11
doctype 
html
    head
       title= title
       link(rel='stylesheet', href='/stylesheets/style.css')
       script(src='/javascripts/jquery-2.1.4.min.js')
       script(src='/javascripts/main.js')
       script(src='/socket.io/socket.io.js')
    body
        block content


layout.jade

이것도 jade파일이다 실질적으로 이넘이 main.jade위에 붙게 된다.
머 암튼...
잘보면 css파일도 불러온다.


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
body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
  color: #00b7ff;
}
#game {
    width: 320px;
    height: 300px;
}
#bingo {
    float:left;
}
#user {
    float:right;
}
#list {
    border: 1px solid gray;
    width: 140px;
    height: 50px;
    overflow: auto;
    margin-bottom: 10px;
}
#logs {
    border: 1px solid gray;
    width: 140px;
    height: 50px;
    overflow: auto;
    margin-bottom: 10px;
}
.bingo-board {
    border-left: 1px solid gray;
    border-top: 1px solid gray;
    border-spacing: 0px;
    margin-bottom: 10px;
}
.bingo-board td {
    width: 25px;
    height: 25px;
    border-right: 1px solid gray;
    border-bottom: 1px solid gray;
}
#input_box {
    width: 140px;
    height: 50px;
    margin-bottom: 10px;
}
#user_input {
    border: 1px solid gray;
    width: 140px;
}
cs
style.css

css는 이렇게 구상이 되있다.

 

/은 state code가 200이다 정상적으로 출력이 됬다는 말이다.

그아래에 있는 아이들
css
main.js
jquery들은 status code가 304네?

정상이다.
404, 505만 안뜨면 된다
URL 경로가 잘못됬거나, 파일을 찾을수 없을 때 에러가 나타난다. ㅋ
처음에 삽질하느라 404, 500에러를 겁나봤다 ㅋㅋㅋ 이 두 에러는 각각 노랑 적색으로 나타난다.


304는 redirect 됬다는 말
그냥 파일을 불러왔다는거로 이해하면 될듯하다.

이렇게 main.jade위에 코드를 붙인다. 잘 보면 링크가 걸려있는데 링크를 들어가면 
위에 친 소스가 나타난다.

라벨:

댓글

댓글 쓰기