illiaKozyr
/
Homework


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
							<!DOCTYPE html>
<html>
    <head>
        <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>
        <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 = '<b>' + msg.nick + ":" +"</b>" + 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>