Merge branch 'Chatte' into feat/accounts

frontend/static/js/views/AbstractView.js

@@ -3,6 +3,9 @@ export default class {
         this.params = params;
     }
 
+	async postInit() {
+	}
+
     setTitle(title) {
         document.title = title;
     }
@@ -10,4 +13,4 @@ export default class {
     async getHtml() {
         return "";
     }
-}
+}

frontend/static/js/views/Chat.js

@@ -0,0 +1,51 @@
+import AbstractView from "./AbstractView.js";
+
+export default class extends AbstractView {
+    constructor(params) {
+        super(params);
+        this.setTitle("Chat");
+
+		let url = `ws://${window.location.host}/ws/socket-server/`
+
+		this.chatSocket = new WebSocket(url)
+		this.chatSocket.onmessage = function(e){
+			let data = JSON.parse(e.data)
+			console.log('Data:', data)
+			if (data.type === 'chat') {
+				let messages = document.getElementById('messages')
+
+				messages.insertAdjacentHTML('beforeend', `
+					<div><p>${data.message}</p></div>
+				`)
+			}
+
+		}
+    }
+
+	async postInit() {
+		let form = document.getElementById('form')
+		form.addEventListener('submit', (e)=> {
+			e.preventDefault()
+			let message = e.target.message.value
+			this.chatSocket.send(JSON.stringify({
+				'message':message
+			}))
+			form.reset()
+		})
+	}
+
+    async getHtml() {
+        return `
+			<h1>Chat</h1>
+
+			<form id="form">
+				<input type="text" name="message" />
+			</form>
+
+			<div id="messages">
+
+			</div>
+
+        `;
+    }
+}