chat_multisala_nodejs/index.html at master · CarmaZone/chat_multisala_nodejs · 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
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
    var socket = io.connect('http://localhost:3000');

    socket.on('connect', function() {
    });

	// cada vez que el servidor emite 'updatechat' se actualiza el cuerpo del chat
    socket.on('updatechat', function(username, data) {
		if(data === null || data === ""){
			alert('Escriba un mensaje');
		}else{
			$('#conversation').append('<b>' + username + ':</b> ' + data + '<br>');
		}

    });

	socket.on('updateusers', function(list_users) {

        $('.users').empty();
        $.each(list_users, function(key, value) {
            $('.users').append(value +'<br />');
        });
    });

    $(function() {
        // envio del mensaje
        $('#datasend').click(function() {
            var message = $('#data').val();
            $('#data').val('');
            socket.emit('sendchat', message);
        });

    });

</script>

<div style="float:left;width:100px;border-right:1px solid black;height:300px;padding:10px;overflow:scroll-y;">
    <b>USUARIOS</b>
    <div id="users" class="users"></div>
</div>

<div style="float:left;width:300px;height:250px;overflow:scroll-y;padding:10px;">
    <div id="conversation"></div>
    <input id="data" style="width:200px;" />
    <input type="button" id="datasend" value="send" />
</div>