NodeSocketIOChat/client.html at master · karanparikh/NodeSocketIOChat · 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
<!doctype html>
<html>
    <script src="/socket.io/socket.io.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var socket = io.connect("http://localhost:8000");

            //set our nickname
            $("#nickname").click(function(e) {
                var nickname = $("#nick").val();
                socket.emit('set_nickname', nickname);
                $("#nick").hide();
                $("#nickname").hide();
                $("#announce").append("<i>You are " + nickname + ".\n</i>");
                e.preventDefault();
            });

            //send our message to the server
            $("#send").click(function(e) {
                var content = $("#chat").val();
                if(content != ""){
                    socket.send(content);
                    $("#chat").val("");
                }
                e.preventDefault();
            });

            //display the messages
            socket.on('chat', function(data) {
                var content = "<li>" + data + "</li>";
                $("#messages").prepend(content);
                $("#messages li:first").fadeIn("slow");
            });

            //new user announcement
            socket.on('new_user', function(nickname) {
                $("#announce").prepend("<i>New user " + nickname + " connected!\n</i>");
                $("#announce li:first").fadeIn("slow");
            });
        });
    </script>
    <body>
        <form>
            <input type="text" id="nick">
            <input type="submit" value="Nickname" id="nickname">
        </form>
        <form>
            <input type="text" id="chat">
            <input type="submit" value="Send" id="send">
        </form>
        <div id="announce">
            <!-- announcements here -->
        </div>
        <ul id="messages">
            <!-- messages here -->
        </ul>
    </body>
</html>