index.html

﻿<!doctype html>
<html>
 
<head>
    <title>WebSocket Chat Application - VMSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="https://code.jquery.com/jquery-3.0.0.slim.min.js"></script>
</head>
 
<body>
    <form>
        <div id="name-div">
            <input id="name" name="name" autocomplete="off" autofocus placeholder="Enter your nickname" />
            <button>Submit</button>
        </div>
        <div id="welcome"></div>
        <ul id="messages"></ul>
        <div id="input-div">
            <input id="message" name="message" autocomplete="off" placeholder="Type your message here" />
            <button>Send</button>
        </div>
    </form>
 
    <script>
	var host = window.document.location.host.replace(/:.*/, '');
        websocket = new WebSocket('wss://' + host + '/hostingstart.js');
        $('form').submit(function() {
            name = $('#name').val() ? $('#name').val() : 'Anonymous';
            $('#name-div').hide();
            $('#welcome').text('Hello ' + name);
            websocket.send(JSON.stringify({
                name: name,
                message: $('#message').val()
            }));
            $('#message').focus();
            $('#message').val('');
            return false;
        });
 
        websocket.onmessage = function(evt) {
            $('#messages').append($('<li>').html(evt.data));
        };
 
        websocket.onerror = function(evt) {
            $('#messages').append($('<li>').text('<span style="color: red;">ERROR:</span> ' + evt.data));
        };
    </script>
</body>
 
</html>