web chat

2018-07-23 10:30:37 +01:00
parent 0dc8d7d56c
commit 3f74792e84
10 changed files with 798 additions and 44 deletions
--- a/JavaScript/web-chat/client/index.html
+++ b/JavaScript/web-chat/client/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>BenChat</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js"></script>
+    </head>
+    <body>
+        <textarea name="chat" id="chat" cols="60" rows="30" readonly></textarea>
+        <input type="text" name="in" id="in" placeholder="message">
+        <input type="submit" value="Send" onclick="messagesend()">
+        <script src="main.js"></script>
+    </body>
+</html>
--- a/JavaScript/web-chat/client/main.js
+++ b/JavaScript/web-chat/client/main.js
@@ -0,0 +1,42 @@
+var socket = io.connect('http://benkyd.duckdns.org:8083');
+
+let name;
+
+window.addEventListener('keydown', (event) => {
+    if (event.code == 'Enter') messagesend();
+})
+
+function messagesend() {
+    if (!name) {
+        while (name == null || name == undefined) {
+            name = prompt('Enter your name:');
+            tempname = name.replace(/^\s+/, '').replace(/\s+$/, '');
+            if (tempname === '') {
+                name = undefined;
+            }
+        }
+    }
+
+    let message = document.getElementById('in').value;
+
+    if (message == '' || message == ' ') {
+        document.getElementById('in').value = '';
+        return;
+    }
+
+    tempmessage = message.replace(/^\s+/, '').replace(/\s+$/, '');
+    if (tempname === '') {
+        document.getElementById('in').value = '';
+        return;
+    }
+
+    socket.emit('outward', {name: name, message: message})
+    document.getElementById('in').value = '';
+}
+
+socket.on('receive', (data) => {
+    console.log(data);
+    document.getElementById('chat').value = document.getElementById('chat').value + data;
+    document.getElementById('chat').scrollTop = document.getElementById('chat').scrollHeight; 
+});
+
--- a/JavaScript/web-chat/client/style.css
+++ b/JavaScript/web-chat/client/style.css
@@ -0,0 +1,19 @@
+body {
+    background-color: rgb(245, 245, 245);
+}
+
+textarea {
+    resize: none;
+    left: 2px;
+}
+
+input {
+    position: absolute;
+    top: 60%;
+    left: 2px;
+}
+
+input[type=text] {
+    left: 70px;
+    width: 50%;
+}