Natarov
/
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>
        <style>
            * {
                box-sizing: border-box;
            }
            .wrap {
                width: 800px;
                height: 600px;
                margin: 0 auto;
            }
            #chat {
                width: 100%;
                height: 100%;
                text-align: center;
                display: flex;
                flex-direction: column;
                overflow: scroll;
            }
            input {
                width: 200px;
                height: 40px;
            }
            button {
                width: 150px;
                height: 30px;
            }
        </style>
    </head>
    <body>
        <div id='formContainer'>
        </div>
        <div class="wrap">
            <input type="text" id="nick" placeholder="Nicename">
            <input type="text" id="message" placeholder="Message">
            <button id="send">ЖМИ</button>
            <div id="chat">
                
            </div>
        </div>
        <script>
            const socket = io('http://localhost:4000')
            // let out = document.querySelector('.chat')
            
            socket.on('msg', msg => chat.innerHTML += msg.nick + ': ' + msg.message + '</br>')
            send.onclick = () => socket.emit('msg', {nick: nick.value, message: message.value});
        </script>
    </body>
</html>