socketiosample/client.html at master · honjo2/socketiosample · 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
<!DOCTYPE html>
<html lang="ja">
<meta charset="utf-8">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.socket.io/stable/socket.io.js"></script>
<script>
$(function() {

    var socket = new io.Socket('localhost', { port: 8124 });
//    var socket = new io.Socket('socketiosample.duostack.net, { port: 80 }');
    socket.connect();

    socket.on('message', function(message) {
        var json = JSON.parse(message);
        if (json.connections) {
            $("#connections").html(json.connections);
        }
        if (json.message) {
    	    $("#message").append(json.message + '<br>');
        }
    });

    socket.on('disconnect', function(message) {
    	$('#message').append('切断されました');
    });

    $('#form1').submit(function(e) {
        socket.send(JSON.stringify({ message: $('#text1').val() }));
        return false;
    });
});
</script>
</head>

<body>
接続クライアント数&nbsp;<span id="connections"></span>
<br/><br/>
<div id="message"></div>
<br/>
何か入力してください
<form id="form1">
    <input id="text1" type="text"/><input type="submit"/>
</form>

</body>
</html>