You can create an array object of user collection as

var users = {};

then on server side you can add it as new user when you connect

socket.on('new-user', function (username) {
    users[username] = username;
});

while displaying the users, you can loop the "users" object

On Client side

var socket = io.connect();

socket.on('connect', function () {
    socket.emit('new-user', 'username');
});



http://stackoverflow.com/questions/18093638/socket-io-rooms-get-list-of-clients-in-specific-room

설정

트랙백

댓글

MouseOver MouseLeave Event

JS 2014. 5. 21. 20:02

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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'></script>
        <link rel='stylesheet' href='./ui-lightness/jquery-ui-1.10.4.css' />
        <style>
            .reverse {
                color: white;
                background-color: black;
}
        </style>
        <script src='./js/jquery-ui-1.10.4.min.js'></script>
 
        <script>
            $(document).ready(function() {
                $('div').hover(function(){
                    
                    $(this).addClass('reverse',500);
                    
                }, function(){
                    $(this).removeClass('reverse',500);
                    var temp = this;
                    setTimeout(function(){
                        $(temp).clearQueue();
                    },500);
                });
            }); //ready
        
        </script>
    </head>
    <body>
        <div>
            <h1>fuckfuck</h1>
            <p>fuckfuck</p>
        </div>
        <div>
            <h1>fuckfuckc</h1>
            <p>fufufufuckfuc</p>
        </div>
        <div>
            <h1>fuckfuck</h1>
            <p>fukcufkcu</p>
        </div>
    </body>
</html>
 


설정

트랙백

댓글

jQuery animation delay method

JS 2014. 5. 21. 18:54


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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'></script>
        <style>
            div{
                width: 100px; height: 100px;
                background-color: orange;
                position: relative;
}
        </style>
        <script>
            $(document).ready(function() {
                $('div').each(function(index) {
                    setInterval(function(){
                          $('div').eq(index).delay(index*500).animate({left: 500},'slow').animate({left:0},'slow');
                      },3000);
                });
            }); //ready
        
        </script>
    </head>
    <body>
        <div> </div><div> </div>
        <div> </div><div> </div>
        <div> </div><div> </div>
        
                        
    </body>
</html>
 


설정

트랙백

댓글

animation 2

JS 2014. 5. 21. 18:32

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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'></script>
        <style>
            div{
                width: 100px; height: 100px;
                background-color: orange;
                position: relative;
}
        </style>
        <script>
            $(document).ready(function() {
                $('button').click(function(){
                    var html = $(this).html();
                    var evalText = "$('div')." + html;
                    eval(evalText);
                });
                
                setInterval(function(){
                    $('div').animate({left: '500'},1000).animate({left:'0'},1000);
                },2000);
 
            }); //ready
            
            
    
        
        </script>
    </head>
    <body>
        <button>stop()</button>
        <button>stop(true)</button>
        <button>stop(false, true)</button>
        <button>stop(true, true)</button>
        <div> </div>
                        
    </body>
</html>
 


설정

트랙백

댓글

animiation

JS 2014. 5. 21. 17:59


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
<!DOCTYPE html>
<html>
    <head>
        <title>hello</title>
        <script src='./js/jquery-1.11.1.js'></script>
        <script src='./js/ch15.js'></script>
        <style>
            div{
                width: 50px; height: 50px;
                background-color: orange;
                position: relative;
}
        </style>
        <script>
            $(document).ready(function() {
                $('div').click(function(){
                    $(this).animate({left: '+=60'},2000).animate({width: '+=60'},2000).animate({height: '+=60'},2000);
                    //$(this).off();
                });
                
                setTimeout(function(){
                    $('div').clearQueue();
                    
                    //$('div').hide();
                },3000);
            }); //ready
            
            
    
        
        </script>
    </head>
    <body>
        <div> </div>
                        
    </body>
</html>
 


설정

트랙백

댓글