index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chat box!!</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <style>
        body{
            margin-top: 300px;
        }
    </style>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4">
                <div class="well">
                    <h3>Online Users</h3>
                    <ul class="list-group" id="users"></ul>
                </div>
            </div>
            <div class="col-md-8">
                <div class="chat" id="chat"></div>
                <form id="messageForm">
                    <div class="form-group">
                        <label>enter message</label>
                        <textarea class="form-control" id="message"></textarea>
                        <br>
                        <input type="submit" class="btn btn-primary" value="Send Message"/>
                    </div>
                </form>
            </div>
        </div>

    </div>
    <script>
        $(function(){
            var socket=io.connect();
            var $messageForm=$('#messageForm');
            var $message=$('#message');
            var $chat=$('#chat');

            $messageForm.submit((e)=>{
                e.preventDefault();
                console.log('Submitted');
               socket.emit('send message',$message.val());
               $message.val('');
            });
        });
    </script>
</body>
</html>