websocket/examples/chat/home.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Chat Example</title>
<script type="text/javascript">
window.onload = function () {
    var conn;
    var msg = document.getElementById("msg");
    var log = document.getElementById("log");

    function appendLog(item) {
        var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;
        log.appendChild(item);
        if (doScroll) {
            log.scrollTop = log.scrollHeight - log.clientHeight;
        }
    }

    document.getElementById("form").onsubmit = function () {
        if (!conn) {
            return false;
        }
        if (!msg.value) {
            return false;
        }
        conn.send(msg.value);
        msg.value = "";
        return false;
    };

    if (window["WebSocket"]) {
        conn = new WebSocket("ws://" + document.location.host + "/ws");
        conn.onclose = function (evt) {
            var item = document.createElement("div");
            item.innerHTML = "<b>Connection closed.</b>";
            appendLog(item);
        };
        conn.onmessage = function (evt) {
            var messages = evt.data.split('\n');
            for (var i = 0; i < messages.length; i++) {
                var item = document.createElement("div");
                item.innerText = messages[i];
                appendLog(item);
            }
        };
    } else {
        var item = document.createElement("div");
        item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
        appendLog(item);
    }
};
</script>
<style type="text/css">
html {
    overflow: hidden;
}

body {
    overflow: hidden;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    background: gray;
}

#log {
    background: white;
    margin: 0;
    padding: 0.5em 0.5em 0.5em 0.5em;
    position: absolute;
    top: 0.5em;
    left: 0.5em;
    right: 0.5em;
    bottom: 3em;
    overflow: auto;
}

#form {
    padding: 0 0.5em 0 0.5em;
    margin: 0;
    position: absolute;
    bottom: 1em;
    left: 0px;
    width: 100%;
    overflow: hidden;
}

</style>
</head>
<body>
<div id="log"></div>
<form id="form">
    <input type="submit" value="Send" />
    <input type="text" id="msg" size="64" autofocus />
</form>
</body>
</html>
Initial commit 2013-10-16 20:41:47 +04:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<title>Chat Example</title>`
			`<script type="text/javascript">`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`window.onload = function () {`
Initial commit 2013-10-16 20:41:47 +04:00			`var conn;`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`var msg = document.getElementById("msg");`
			`var log = document.getElementById("log");`
Initial commit 2013-10-16 20:41:47 +04:00
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`function appendLog(item) {`
Improve examples - Remove jQuery dependency in command example. - Fix auto scroll on new content in chat and command example. - Update chat and command example to use a static HTML file. 2017-02-16 04:01:07 +03:00			`var doScroll = log.scrollTop > log.scrollHeight - log.clientHeight - 1;`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`log.appendChild(item);`
Initial commit 2013-10-16 20:41:47 +04:00			`if (doScroll) {`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`log.scrollTop = log.scrollHeight - log.clientHeight;`
Initial commit 2013-10-16 20:41:47 +04:00			`}`
			`}`

Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`document.getElementById("form").onsubmit = function () {`
Initial commit 2013-10-16 20:41:47 +04:00			`if (!conn) {`
			`return false;`
			`}`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`if (!msg.value) {`
Initial commit 2013-10-16 20:41:47 +04:00			`return false;`
			`}`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`conn.send(msg.value);`
			`msg.value = "";`
Cleanup js in chat example 2016-05-26 20:19:40 +03:00			`return false;`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`};`
Initial commit 2013-10-16 20:41:47 +04:00
			`if (window["WebSocket"]) {`
Improve examples - Remove jQuery dependency in command example. - Fix auto scroll on new content in chat and command example. - Update chat and command example to use a static HTML file. 2017-02-16 04:01:07 +03:00			`conn = new WebSocket("ws://" + document.location.host + "/ws");`
Cleanup js in chat example 2016-05-26 20:19:40 +03:00			`conn.onclose = function (evt) {`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`var item = document.createElement("div");`
			`item.innerHTML = "<b>Connection closed.</b>";`
			`appendLog(item);`
Cleanup js in chat example 2016-05-26 20:19:40 +03:00			`};`
			`conn.onmessage = function (evt) {`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`var messages = evt.data.split('\n');`
Coalesce outbound messages in chat example 2016-06-07 02:20:22 +03:00			`for (var i = 0; i < messages.length; i++) {`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`var item = document.createElement("div");`
			`item.innerText = messages[i];`
			`appendLog(item);`
Coalesce outbound messages in chat example 2016-06-07 02:20:22 +03:00			`}`
Cleanup js in chat example 2016-05-26 20:19:40 +03:00			`};`
Initial commit 2013-10-16 20:41:47 +04:00			`} else {`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`var item = document.createElement("div");`
			`item.innerHTML = "<b>Your browser does not support WebSockets.</b>";`
			`appendLog(item);`
Initial commit 2013-10-16 20:41:47 +04:00			`}`
Improve chat example - Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables. 2016-07-19 02:08:34 +03:00			`};`
Initial commit 2013-10-16 20:41:47 +04:00			`</script>`
			`<style type="text/css">`
			`html {`
			`overflow: hidden;`
			`}`

			`body {`
			`overflow: hidden;`
			`padding: 0;`
			`margin: 0;`
			`width: 100%;`
			`height: 100%;`
			`background: gray;`
			`}`

			`#log {`
			`background: white;`
			`margin: 0;`
			`padding: 0.5em 0.5em 0.5em 0.5em;`
			`position: absolute;`
			`top: 0.5em;`
			`left: 0.5em;`
			`right: 0.5em;`
			`bottom: 3em;`
			`overflow: auto;`
			`}`

			`#form {`
			`padding: 0 0.5em 0 0.5em;`
			`margin: 0;`
			`position: absolute;`
			`bottom: 1em;`
			`left: 0px;`
			`width: 100%;`
			`overflow: hidden;`
			`}`

			`</style>`
			`</head>`
			`<body>`
			`<div id="log"></div>`
			`<form id="form">`
			`<input type="submit" value="Send" />`
input autofocus (#564) 2020-03-19 16:50:48 +03:00			`<input type="text" id="msg" size="64" autofocus />`
Initial commit 2013-10-16 20:41:47 +04:00			`</form>`
			`</body>`
			`</html>`