first commit

sagarrr · sagarrr · commit 82a6715b6705 · 2017-07-24T12:57:40.000+05:30
diff --git a/index.css b/index.css
@@ -0,0 +1,74 @@
+body {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+}
+
+.header {
+    font-family: cursive;
+    margin: 0;
+    padding: 6px;
+}
+
+.messages {
+    display: inline-block;
+    padding-bottom: 30px; /* 24 + 6 px */
+    text-align: left;
+}
+
+.message {
+    margin: 6px;
+}
+
+.message .avatar {
+    float: left;
+    width: 36px;
+    height: 36px;
+    background-size: 100%;
+    background-repeat: no-repeat;
+    border-radius: 18px;
+    margin-top: 4px;
+}
+
+.message .body {
+    overflow: hidden;
+    position: relative;
+    margin-left: 42px;
+}
+
+.message .text {
+    display: inline-block;
+    padding: 6px;
+    background-color: #b5f0ff;
+    border-radius: 24px;
+}
+
+.message .text:before, .message .text:after {
+    content: " ";
+}
+
+.message .headline {
+    font-size: 9pt;
+}
+
+.message .name {
+    font-weight: bold;
+}
+
+.input {
+    display: block;
+    position: fixed;
+    bottom: 6px;
+    left: 6px;
+    right: 6px;
+    width: calc(100% - 12px);
+    box-sizing: border-box;
+    background: #eee;
+    padding: 3px 6px;
+    border: 1px solid #ccc;
+    border-radius: 12px;
+    height: 24px;
+    line-height: 24px;
+    font: inherit;
+    outline: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Chat Demo</title>
+    <meta name="author" content="https://nikita.tk">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <link type="text/css" rel="stylesheet" href="index.css"/>
+    <script type="text/javascript" src="index.js"></script>
+</head>
+<body>
+    <h1 class="header">Fun Chat</h1>
+    <div class="messages"></div>
+    <input class="input" type="text"/>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,60 @@
+const host = `ws://${ location.hostname }:57772`;
+const myName = "Nikita";
+const myAvatar = "http://nikita.tk/img/avatar.jpg";
+
+let URL = host + "/csp/user/WebCourse.ChatWebSocket.cls",
+    ws = new WebSocket(URL);
+
+ws.addEventListener("open", () => ws.send(JSON.stringify({
+    name: myName,
+    avatar: myAvatar
+})));
+
+ws.addEventListener("error", (err) => printMessage({
+    name: "System",
+    text: "Connection error: " + err.toString()
+}));
+
+ws.addEventListener("close", () => printMessage({
+    name: "System",
+    text: "We're out!"
+}));
+
+ws.addEventListener("message", (m) => {
+    let message = JSON.parse(m.data);
+    if (message["error"])
+        return console.error(`Server reporting an error: ${ message.error }`);
+    if (message["updates"] instanceof Array) message["updates"].forEach(update => {
+        if (update.type === "message")
+            printMessage(update);
+        else if (update.type === "notification")
+            printMessage(update);
+        else
+            console.warn("Unhandled WebSocket message", message);
+    });
+});
+
+function printMessage ({ date = Date.now(), name, text, avatar = "" }) {
+    let block = document.querySelector(".messages");
+    block.innerHTML += `<div class="message">
+        <div class="avatar" style="background-image: url(${ avatar })"></div>
+        <div class="body">
+            <div class="headline">
+                <span class="date">${ new Date(date).toLocaleString() }</span>,
+                <span class="name">${ name }</span>
+            </div>
+            <div class="text">${ text }</div>
+        </div>
+    </div>`;
+    document.body.scrollTop = 99999999;
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    const input = document.querySelector(".input");
+    input.addEventListener("keydown", (event) => {
+        if (input.value && event.keyCode === 13) {
+            ws.send(JSON.stringify({ "text": input.value }));
+            input.value = "";
+        }
+    });
+});
