My instructor mentioned a unique way to store user names using "localstorage" and arrays in JavaScript. This method ensures that the names are saved even if the page is reloaded. Here is the code snippet for achieving this functionality:
html:
<!doctype html>
<html>
<head>
<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: .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="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
$(function() {
var socket=io();
var nick = prompt("Enter your name");
socket.emit('name', nick);
$("form").submit(function(e){
e.preventDefault();
socket.emit('chat message', $("#m").val());
$("#m").val('');
return false;
});
socket.on('chat message',function(msg){
$("#messages").append($("<li>").text(msg));
});
});
Js:
</script>
</body>
</html>
var app=require('express')();
var http=require('http').Server(app);
var io=require("socket.io")(http);
var port=8000;
app.get('/',function(req,res){
res.sendFile(__dirname+'/index.html');
});
io.on('connection',function(socket){
socket.on('name', (username) => {
socket.username = username;
console.log('User ' + socket.username + ' has connected')
});
//using a callback to notify a connection
console.log('user connected'+socket.username);
socket.on('disconnect',function(){
console.log("User has disconnected");
});
socket.on('chat message',function(msg){
console.log(socket.username + " said: ", msg);
io.emit('chat message',socket.username + " said: "+msg);
});
});
http.listen(port,function(){
console.log("Listening on port " +port);
});