Socket.ioLearning
/
index.html

<!doctype html>
<html>

<head>
    <title>Socket.IO chat</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font: 13px Helvetica, Arial;
        }

        .flex-container {
            display: flex;
            flex-direction: row;
            min-height: 100vh;
        }

        .flex-container>.flex-item {
            flex: 1;
            justify-content: space-around;
            align-items: flex-end;
            display: flex;
            flex-direction: column;
            padding: 5px;
        }

        form {
            display: flex;
            flex-direction: row;
            flex: 0 1 auto;
            width: 100%;
            border: 2px solid #000;
        }

        form input {
            flex: 1;
            border: 0;
            padding: 10px;
        }

        form button {
            flex: 0 1 auto;
            padding: 5px;
            background: rgb(130, 224, 255);
            border: none;
        }

        .messages {
            flex: 1;
            width: 100%;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        .messages li {
            padding: 5px 10px;
        }

        .messages li:nth-child(odd) {
            background: #eee;
        }
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            var socket = io();
            $('#form1').submit(function (e) {
                e.preventDefault(); // prevents page reloading
                socket.emit('chat message1', $('#m1').val());
                $('#m1').val('');
                return false;
            });
            $('#form2').submit(function (e) {
                e.preventDefault(); // prevents page reloading
                socket.emit('chat message2', $('#m2').val());
                $('#m2').val('');
                return false;
            });
            socket.on('chat message1', function (msg) {
                $('#messages1').append($('<li>').text(msg));
            });
            socket.on('chat message2', function (msg) {
                $('#messages2').append($('<li>').text(msg));
            });
        });
    </script>
</head>

<body>
    <div class="flex-container">
        <div class="flex-item">
            <ul class="messages" id="messages1"></ul>
            <form action="" id="form1">
                <input id="m1" autocomplete="off" /><button>Send1</button>
            </form>
        </div>
        <div class="flex-item">
            <ul class="messages" id="messages2"></ul>
            <form action="" id="form2">
                <input id="m2" autocomplete="off" /><button>Send2</button>
            </form>
        </div>
    </div>
</body>

</html>