| 12345678910111213141516171819202122232425262728293031 |
- <!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='formContainer'>
- <p><input id='nickId' style="font-weight: 600"> Your nick </p>
- <p><input id='messageId' style="height: 100px"> Your message</p>
- <p><button id='sendBtn' onclick="sendBtnFnc()">Send</button></p>
-
- <section id='outputSection'></section>
- </div>
- <script>
- const socket = io()
- </script>
- <script>
- socket.on('msg', msg => outputSection.insertAdjacentHTML('afterbegin',`<div style='margin-top:10px; border: 2px solid purple; border-radius:3px; width:300px; padding:px'>${msg.nick}: ${msg.message}</div>`))</script>
- <script>
- const sendBtnFnc = () => {
- socket.emit('msg', { nick: String(nickId.value), message: String(messageId.value) })
- messageId.value='';
- }
- </script>
- </body>
- </html>
|
