I modified the chat server example Shawn gave us here. I started with an animated “Loading…” message which is obviously superfluous, but I dug it in a 90’s kind of way. This builds anticipation and gives the impression that something significant is happening/has happened. It’s based on a number of <code>setInterval()</code> loops and end with a <code>clearInterval();</code>command after a certain number of loops and a callback function to trigger a “Welcome” message.
The “Welcome” message is a short line and a fun bit of Beavis and Butthead ASCII art. I loaded this <code>.txt</code> from the server using the <code>ajax.js</code> example that Shawn provided and had to use the <code><pre> </pre></code> tag from this Stackoverflow disucssion around the ASCII art in the text file to get the format right.
I also wanted to track user names, which I was able to do based on the <code>socket.id</code> value in the <code>server.js</code> file. Cassie was able to help me troubleshoot my issues with sending the <code>socket.id</code>. I did not realize that I needed to kill to server process on my droplet in order to upload a new <code>server.js</code> file. I was under the impression that it acted the same as uploading a new <code>index.html</code> file. So I would see the changes on the front end, but nothing would change on the back end. Cassie showed me the <code>ps -aux</code> bash command which lists all the running processes on my server. From there we used <code>ps -aux | grep “node server.js”</code> to get the process ID of the running server and then killed it with <code>kill -9 "<process id>”</code>. This was very helpful as I had been making changes and not seeing any results!!
So now when a new user sends a message, their <code>socket.id</code> is prepended to it. I would like to give users a way to enter a user name and have it be stored to their unique <code>socket.id</code>, but I didn’t have enough time before class. Cassie suggested creating a <code>const userList = { };</code> object and having the user input their own username and store the value in a key/value pair as <code>userList[socket.id] = “<username">”</code>.