chat/index.html at master · cbialobos/chat · 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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Socket.io</title>
        <style>
            strong {
                text-decoration: none;
                background-color: black;
                color: rgb(255, 255, 255);
                margin: 15;
                }
            em {
                font-style: italic;
                color:grey;
            }
        </style>
    </head>

    <body>
        <h1>Communication avec socket.io !</h1>

        <form action="/" method="post" id="formulaire_chat">
            <input type="text" name="message" id="message" placeholder="Votre message..." size="50" autofocus />
            <input type="submit" id="submit" value="Envoyer" />
        </form>

        <ul id="result" style="list-style-type:none">
        </ul>

        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="/socket.io/socket.io.js"></script>
        <script>
            var socket = io();

            var pseudo = prompt('Quel est votre pseudo ?');
            socket.emit('join', pseudo);
            document.title = pseudo + ' - ' + document.title;

            socket.on('join', function(nickname) {
                $('#result').prepend('<p><em>' + nickname + ' joigned</em></p>');
            })

            .on('left', function(nickname) {
                $('#result').prepend('<p><em>' + nickname + ' has left</em></p>');
            })

            .on('message', function(source) {
                insereMessage(source.username, source.message);
            });

            $('#formulaire_chat').submit(function () {
                var message = $('#message').val();
                socket.emit('message', message); // Transmet le message aux autres
                insereMessage(pseudo, message); // Affiche le message aussi sur notre page
                $('#message').val('').focus(); // Vide la zone de Chat et remet le focus dessus
                return false; // Permet de bloquer l'envoi "classique" du formulaire
            });

            function insereMessage(nickname, message) {
                $('#result').prepend('<p><strong>' + nickname + '</strong> ' + message + '</p>');
            }
        </script>
    </body>
</html>