Sergei-Levshnia
/
socketchat
forked from gitgod/socketchat


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
							<!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>
        <div id="msgField"></div>
        <div id='formContainer'>
            <input
                id="nickbox" 
                type="text"
                placeholder="nickname"
            >
            <br>
            <textarea 
                name="messagebox"
                id="msgbox"
                cols="30"
                rows="5"
                placeholder="message"
            ></textarea>
            <br>
            <button id="sendBtn">Send</button>
        </div>
        <script>
            const socket = io()
            let nickbox = document.getElementById('nickbox') || 'default_user'
            let msgbox = document.getElementById('msgbox') || '...'

            const letter = {
                nick: '',
                message: ''
            }

            socket.on('msg', drawMsg)

            function doEmit() {
                socket.emit('msg', letter)
            }

            function drawMsg(msg) {
                console.log('drawing')
                document.getElementById('msgField').insertAdjacentHTML('beforeend', `
                                                                        <div 
                                                                            style="
                                                                                border-top: 1px solid white;
                                                                                margin: 5px;
                                                                                padding: none;
                                                                                width: fit-content
                                                                            "
                                                                        >
                                                                            <h4 style="color: yellow;"><span style="color: chartreuse">${msg.nick}</span> says:</h4>
                                                                            <p style="background-color: indigo; padding: 5px;">${msg.message}</p>
                                                                        <div>
                                                                    `)
                clearAll()
            }

            function clearAll() {
                nickbox.value = '' 
                msgbox.value = ''
                letter.nick, letter.message = ''
            }

            nickbox.addEventListener('input', (e) => letter.nick = nickbox.value)
            msgbox.addEventListener('input', (e) => letter.message = msgbox.value)
            document.getElementById('sendBtn').onclick = doEmit
        </script>
        <style>
            body {
                font-family: 'Courier New', Courier, monospace;
            }

            #msgField {
                background-color: black;
                min-height: 200px;
                height: 500px;
                border: 1px solid turquoise;
                margin-bottom: 10px;
                padding: 5px;
                color: white;
                overflow: auto;
            }

            #formContainer {
                width: fit-content; 
                text-align: center;
            }

            input, textarea {
                width: 100%; 
                margin-bottom: 5px;
            }
        </style>
    </body>
</html>