← Back to branch summary

~nskaggs/+junk/xenial-test

« back to all changes in this revision

Viewing changes to src/github.com/gorilla/websocket/examples/chat/home.html

  • Committer: Nicholas Skaggs
  • Date: 2016-10-24 20:56:05 UTC
  • Revision ID: nicholas.skaggs@canonical.com-20161024205605-z8lta0uvuhtxwzwl
Initi with beta15

Show diffs side-by-side

added added

removed removed

Lines of Context:
src/github.com/gorilla/websocket/examples/chat/home.html
 
1
<!DOCTYPE html>
 
2
<html lang="en">
 
3
<head>
 
4
<title>Chat Example</title>
 
5
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
 
6
<script type="text/javascript">
 
7
    $(function() {
 
8
 
 
9
    var conn;
 
10
    var msg = $("#msg");
 
11
    var log = $("#log");
 
12
 
 
13
    function appendLog(msg) {
 
14
        var d = log[0]
 
15
        var doScroll = d.scrollTop == d.scrollHeight - d.clientHeight;
 
16
        msg.appendTo(log)
 
17
        if (doScroll) {
 
18
            d.scrollTop = d.scrollHeight - d.clientHeight;
 
19
        }
 
20
    }
 
21
 
 
22
    $("#form").submit(function() {
 
23
        if (!conn) {
 
24
            return false;
 
25
        }
 
26
        if (!msg.val()) {
 
27
            return false;
 
28
        }
 
29
        conn.send(msg.val());
 
30
        msg.val("");
 
31
        return false
 
32
    });
 
33
 
 
34
    if (window["WebSocket"]) {
 
35
        conn = new WebSocket("ws://{{$}}/ws");
 
36
        conn.onclose = function(evt) {
 
37
            appendLog($("<div><b>Connection closed.</b></div>"))
 
38
        }
 
39
        conn.onmessage = function(evt) {
 
40
            appendLog($("<div/>").text(evt.data))
 
41
        }
 
42
    } else {
 
43
        appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"))
 
44
    }
 
45
    });
 
46
</script>
 
47
<style type="text/css">
 
48
html {
 
49
    overflow: hidden;
 
50
}
 
51
 
 
52
body {
 
53
    overflow: hidden;
 
54
    padding: 0;
 
55
    margin: 0;
 
56
    width: 100%;
 
57
    height: 100%;
 
58
    background: gray;
 
59
}
 
60
 
 
61
#log {
 
62
    background: white;
 
63
    margin: 0;
 
64
    padding: 0.5em 0.5em 0.5em 0.5em;
 
65
    position: absolute;
 
66
    top: 0.5em;
 
67
    left: 0.5em;
 
68
    right: 0.5em;
 
69
    bottom: 3em;
 
70
    overflow: auto;
 
71
}
 
72
 
 
73
#form {
 
74
    padding: 0 0.5em 0 0.5em;
 
75
    margin: 0;
 
76
    position: absolute;
 
77
    bottom: 1em;
 
78
    left: 0px;
 
79
    width: 100%;
 
80
    overflow: hidden;
 
81
}
 
82
 
 
83
</style>
 
84
</head>
 
85
<body>
 
86
<div id="log"></div>
 
87
<form id="form">
 
88
    <input type="submit" value="Send" />
 
89
    <input type="text" id="msg" size="64"/>
 
90
</form>
 
91
</body>
 
92
</html>