|
|
@@ -0,0 +1,58 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
+ <title>Document</title>
|
|
|
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js"></script>
|
|
|
+
|
|
|
+</head>
|
|
|
+<style>
|
|
|
+
|
|
|
+.chat__header {
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.chat__message-content {
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 7px;
|
|
|
+ background-color: #ccc;
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<body>
|
|
|
+
|
|
|
+<main class="main">
|
|
|
+ <div class="chat">
|
|
|
+ <h1 class="chat__header">Chat</h1>
|
|
|
+ <div id="content" class = "chat__header">
|
|
|
+ <div class="chat__item">
|
|
|
+ <h1 id = "chat__message-content" class="chat__message-content"></h1>
|
|
|
+ </div>
|
|
|
+ <div class="send_form">
|
|
|
+ Nick :<input type="text" id = 'nick' >
|
|
|
+ Message :<input type="text" id = 'msg'>
|
|
|
+ <button id="sendButton">Отправить</button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const socket = io('http://socketchat.ed.asmer.org.ua')
|
|
|
+ socket.on('msg', msg => {
|
|
|
+ console.log(msg)
|
|
|
+ const my_P = document.createElement("div");
|
|
|
+ my_P.innerHTML = 'nick : ' + msg.nick + " | message:" + msg.message
|
|
|
+ document.getElementById("chat__message-content").appendChild(my_P)
|
|
|
+ })
|
|
|
+
|
|
|
+ sendButton.onclick = () => {
|
|
|
+ console.log(nick.value , msg.value)
|
|
|
+ socket.emit('msg', {nick: nick.value, message: msg.value})
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
Vadym Shakhmatenko