| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>Socket.IO chat</title>
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- body {
- font: 13px Helvetica, Arial;
- }
- form {
- background: #000;
- padding: 3px;
- position: fixed;
- bottom: 0;
- width: 100%;
- }
- form input {
- border: 0;
- padding: 10px;
- width: 90%;
- margin-right: 0.5%;
- }
- form button {
- width: 9%;
- background: rgb(130, 224, 255);
- border: none;
- padding: 10px;
- }
- #messages {
- list-style-type: none;
- margin: 0;
- padding: 0;
- }
- #messages li {
- padding: 5px 10px;
- }
- #messages li:nth-child(odd) {
- background: #eee;
- }
- </style>
- </head>
- <body>
- <ul id="messages"></ul>
- <form action="">
- <input id="m" autocomplete="off" /><button>Send</button>
- </form>
- <script src="/socket.io/socket.io.js"></script>
- <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
- <script>
- $(function () {
- var socket = io();
- $("form").submit(function (e) {
- e.preventDefault(); // prevents page reloading
- socket.emit("chat message", $("#m").val());
- $("#m").val("");
- return false;
- });
- socket.on("chat message", function (msg) {
- $("#messages").append($("<li>").text(msg));
- });
- });
- </script>
- </body>
- </html>
|
