Присвоение временного имени с помощью формы для службы чата

Question

В настоящее время у меня есть служба чата, к которой вы подключаетесь, используя мой веб-сайт.Тем не менее, я не могу получить форму для запроса временного имени.В настоящее время у меня есть это Правка: тогда это имя также должно отображаться в левом верхнем углу, откуда вы отправляете свое сообщение.

Index.html

<style>

body{
    background:#3498db;
}


.box{
    background:white;
    width:60%;
    height:60%;
    border-radius:6px;
    margin: 5% auto auto auto;
    padding: 10px;
    text-align:center;
    box-shadow: 5px 5px 10px #888888;
}

.chatBox {
    background:#f4f4f4;
    border-radius:5px;
    width:90%;
    height:60%;
    margin:5% auto 5% auto;
    border:1px solid;
    border-color:#f4f4f4;
    overflow-y:scroll;
}

.chatCell {
    background:white;
    width:100%;
    height:15%;
    margin:auto auto 1px auto;
}

.btn{
    background:#2ecc71;
    height:30px;
    color:white;
    border-radius:4px;
}

.btn:hover{
    background:#2CC06B;
}


</style>



<link href="https://fonts.googleapis.com/css?family=Open+Sans:700,600" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="/socket.io/socket.io.js"></script>


<div class="box">
     <div>Chat</div>
<div class ="chatBox" id="chat-text">
</div>
<form id="chat-form">
    <input id="chat-input" type="text" style="width:30%;height:30px;" autocomplete="off">
     <input class = "btn" type="submit" value="Send"></input>
</form>
</div>
</div>

<script>

    var chatText = document.getElementById('chat-text');
    var chatInput = document.getElementById('chat-input');
    var chatForm = document.getElementById('chat-form');


    var socket = io();
    var typing = false;

    //add a chat cell to our chat list view, and scroll to the bottom
    socket.on('addToChat',function(data){

      console.log('got a chat message');
      chatText.innerHTML += '<div class="chatCell">' + data + '</div>';
      chatText.scrollTop = chatText.scrollHeight;

    });


    chatForm.onsubmit = function(e){
      //prevent the form from refreshing the page
 e.preventDefault();

        //call sendMsgToServer socket function, with form text value as argument
        socket.emit('sendMsgToServer', chatInput.value);
        chatInput.value = "";
 }


document.addEventListener('DOMContentLoaded', function() {

        document.getElementById('chat-input').addEventListener('focus', function() {
                                                                            typing = true;
                                                                                });
        document.getElementById('chat-input').addEventListener('blur', function() {
                                                                            typing = false;
                                                                                });
            });


 document.onkeyup = function(event){

        //user pressed and released enter key
        if(event.keyCode === 13){

            if(!typing){
                //user is not already typing, focus our chat text form
                chatInput.focus();

            }

            else {

                //user sent a message, unfocus our chat form 
                chatInput.blur();
            }

        }
 }

</script>

App.js

var express = require('express');
var app = express();

var server = require('http').createServer(app);

app.get('/',function(req, res) {
 res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));


console.log("Server started.");


SOCKET_LIST = {};

var io = require('socket.io')(server);
io.sockets.on('connection', function(socket){

        console.log('new user!');
        var socketId = Math.random();
        SOCKET_LIST[socketId] = socket;

        socket.on('sendMsgToServer',function(data){

            console.log('someone sent a message!');
            for(var i in SOCKET_LIST){
            SOCKET_LIST[i].emit('addToChat', data);

            }

        });

        socket.on('disconnect',function(){

            delete SOCKET_LIST[socket.id];

 });

});

server.listen(4141);

Так что где-то мне нужно будет реализовать форму, в которой вы вводите имя, а затем оно также присваивается вам при вводе сообщений.