|
|
@@ -0,0 +1,39 @@
|
|
|
+<!DOCTYPE HTML>
|
|
|
+<html>
|
|
|
+
|
|
|
+<head>
|
|
|
+ <h1>message chat</h1>
|
|
|
+ <title>
|
|
|
+ Static File Index.HTML
|
|
|
+ </title>
|
|
|
+ <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
|
|
|
+</head>
|
|
|
+
|
|
|
+<body>
|
|
|
+
|
|
|
+ <div id='formContainer'> </div>
|
|
|
+ <input type="text" id="nick" name="name" /><br>
|
|
|
+ <input type="text" id="msg" name="name" /><br>
|
|
|
+ <button type="button" id="btn"> SEND</button>
|
|
|
+ <script>
|
|
|
+ const socket = io("http://socketchat.ed.asmer.org.ua");
|
|
|
+ socket.on('msg', (msg) => {
|
|
|
+ console.log(msg);
|
|
|
+ // document.createElement
|
|
|
+ const div = document.createElement('div')
|
|
|
+ div.innerHTML = `<strong> ${msg.nick}</strong>: ${msg.message}`
|
|
|
+ formContainer.append(div);
|
|
|
+
|
|
|
+ });
|
|
|
+ document.getElementById('btn').onclick = () => {
|
|
|
+ console.log(
|
|
|
+ `${document.getElementById('nick').value}: ${document.getElementById('msg').value}`
|
|
|
+ );
|
|
|
+ socket.emit('msg', { nick: nick.value, message: msg.value });
|
|
|
+ };
|
|
|
+ </script>
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+</html>
|
