utn-chat/index.html at master · FRMDP/utn-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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Socket.IO chat</title>
    <link rel="stylesheet" type="text/css" href="estilo.css">
    <link rel="stylesheet" type="text/css" href="materialize.css">
    <link rel="stylesheet" type="text/css" href="materialize.min.css">
</head>
<body>

    <div class="container">
        <div>
            <h2><i>Chat increible</i></h2>
            <h6 id="showUser"></h6>
            <div class="chatbox">
                <ul id="messages"></ul>
            </div>
            <form class="align-bottom">
                <input id='userName' type='text' placeholder='Pone tu nick'/>
                <input id="newMessage" autocomplete="off" placeholder="Escriba su mensaje..." />
                <button class="btn pad" id="send">Enviar</button>
            </form>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">

        const socket = io();
        const newMessage = document.getElementById('newMessage');
        const userName = document.getElementById('userName');
        const send = document.getElementById('send');
        const messages = document.getElementById('messages');
        const showUser = document.getElementById('showUser');

        function sendMessage(event) {
            event.preventDefault();

            const payload = {
              username : userName.value,
              msj : newMessage.value
            }
            socket.emit('chat.message', payload);
            newMessage.value = '';
            showUser.innerHTML = 'Vos sos <b>' + userName.value +'</b>';
        }

        function receiveMessage(msg) {
            let li = document.createElement("li");
            let div = document.createElement("div");
            div.className = ("chip");
            div.innerHTML = '<i><b>' + msg.username + ':</i></b> ' + msg.msj;
            li.appendChild(div);
            messages.appendChild(li);
        }

        socket.on('chat.message', receiveMessage);
        send.addEventListener('click', sendMessage);
    </script>
</body>
</html>