nodechat/index.html at master · nikolay484/nodechat · GitHub

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
<!DOCTYPE html>
<html>
    <head>
        <title>Chat Node.js</title>
        <script src='/socket.io/socket.io.js' type="text/javascript"></script>
        <script src='https://code.jquery.com/jquery-1.12.0.min.js' type="text/javascript"></script>
        <script>
            $(document).ready(function() {
                $('#txtmsg').keypress(function(event) {
                    if (event.which == 13) {
                        event.preventDefault();
                        var txt = $(this).val();
                        var txt = txt.replace(/(<([^>]+)>)/ig,"");
                        $(this).val('');
                        socket.emit('send_msg', txt, function(data) {
                           console.log('msg' + data);
                        });
                    }

                });
            });

        var socket = io.connect();
            socket.on('broadcast_msg', function(data) {
                 var msg = '<li>' + data + '</li>';
                $('#msg').append(msg);
            });

            socket.on('user_connected', function(data) {
               var msg = '<li>' + data + '</li>';
                $('#msg').append(msg);
                 socket.on('number_connected', function(data) {
                     $('#connected span').html(data);
                 });
            });

            socket.on('user left', function (data) {
                 var msg = '<li>' + data + '</li>';
                $('#msg').append(data.username);
                $('#connected span').html(data.numUsers);

            });

            socket.on('connect',function() {
                console.log('connected');
                $('#btnSaveName').click(function(e) {
                    var name = $('#name').val();
                    socket.emit('set name', name);
                    $('#tools').css('display','block');
                    $('#name').attr('disabled','disabled');
                    $('#name').attr('disabled','disabled');
                    $('#btnSaveName').attr('disabled','disabled');
                });
            });
        </script>
    </head>
    <body>
        <div>
        <input type="text" placeholder="input name"  id="name" />
        <button id="btnSaveName">Enter</button>
        </div>
        <div id="tools" style="display:none">
            <input type="text" id="txtmsg" name="txtmsg" />
        </div>
        <div id="connected">In room : <span></span></div>
        <hr>
        <ul id="msg"></ul>
    </body>
</html>