Implementing auto scrolling into the chat application

Review how web socket works

Learn how to transfert the data between the client and the server in realtime.
We are going to work on a side project. A counter application. A server will generate a number and will share the number to the connected clients. The client will present a button that will allow us to increment the number. Once the number is incremented, it's send to the server and shared with the other clients

Continue to build the room feature of our chat application.
After seek how to use socket.io room, we saw that in order to take full of the rooms feature, we need to track which users are in which rooms with which usernames.
In this issue, we are going to focus on setting up a few functions to keep track of our users over time. We'll start tracking them in the 'join' event listener and the access that data later such as in 'sendMessage' event listener or the 'sendLocation' listener

Tasks

• create a file called users.js in src/utils/ folder
• in user.js file create an array that will be used to persist users
• create four functions in user.js file after the array declaration. 1st function is addUser to track a new user. The 2nd function called removeUser allowing us to stop tracking when a user leaves such as closing a tab
• [ ]

Learn how to render messages to the browser window as opposed to having them show up in the developer console.
To get this done we are going to use the mustache templating library. It going to provide everything we need to define HTML template and render data from javascript, so we will be able to render all sort of dynamic data to the page.

Setup websocket for our web server
We use socket.io library for that

Add timestamps for our location messages.

1. create generateLocationMessage function and export it - { url: '', createdAt: 0}
2. Use generateLocationMessage when server emits locationMessage
3. Update template to render time before the url
4. Compile the template with the URL and the formatted time
5. Test the work

Integrate styles in the Chat application with pre-created style sheet.

Goal: Create two new functions to user.js. One called getUser and another called getUsersInRoom.

Tasks

• Create getUser

  • Accept id and return user object (or undefined)

• Create getUsersInRoom

  • Accept room name and return an array of users (or empty array)

• Test the work by calling the functions!

Now we have the join page in place. Currently the username and the room name present in the query string are not used at all. In this issue we are going to fix that. We'll get access to query string data from our client side JavaScript code and we'll also talked about room in socket.io to allow to emit events to a specific set of connections, so that we can have separate chat rooms for any topics we want to talk about.

Implement the rendering for location messages

The system should render a link on the browser as opposed to rendering the URL.

Expand on our knowledge of events acknowledgment by wiring up our form and our send location button to be more useful for the user.

Example: If we type a message and we click send button, the message is indeed sent but the form is not clear and the user is not refocus on the input.
The same thing is true for send location. Depend on how recentlty it's been fetch, it can take up to two second for the location to being fetch, and the UI doesn't let the user know that something is happening.

We are going to mess around with the input of our code and disabled our button so the user can't send the location until the previous send location has finished.

setup the join page into the chat application

A user should be able to join a room by providing his username and the room he wants to join.

A user enters his username and select the chat room, and click the join button to submit the form.
The application redirect the user to the selected chat room

Tasks

1. create the chat.html file inside the public folder along side the index.html
2. index.html is the home page and is going to be the join page. That means that chat.html will contain all of the code in the index.html.

Learn how to broadcast socket.io event.
Two feature to show up.
When a new user joins the tchat, all connected users will have a little message show up saying "A new user has entered the chat room"
When a user leaves the chat room, all the connected user should have a little message saying that "a user has left the chat room"

Setup project structure for the chat app
- create a src directory
- create index.js src directory
Setup a basic web server using express

• initialize npm and install express
• setup a new express server inside src/index.js
• serve up a public directory
• listen on port 3000
  Create an index.html and render "Chat App" to the screen

Integrate time into the chat application. Along every single message that shows up in the browser, we will also see the time at which it was sent.
We are going to figure out how to generate timestamps, how to transfer them between client and server, and how to format them in a way that it useful for the users of our chat application

1. Focus on how to generate timestamp using the JS in the console
2. Generate a timestamp numbers on the server with each and every message sent to the client
3. The client will then receive that message and will be able to display the message along side the timestamp. We are also going to format the time so that it will be more useful to the user using the moment.js library

Commit the files to the main branch
- check that the node_modules folder is ignored
Open a pull request in the project page
Merge the Dev branch to the main branch
Setup a Heroku app and push the code up
Open the live app and test my work

learn about events acknowledgment using socket.io
the events acknowledgment as its name suggest allow the client to acknowledge that it has received and processed the event. An example use case for this will be sending a location or sending a message. The client sends the location or message off to the server but it is never quite sure that the server receives it and did something with it.

With the event acknowledgment, the client will be notified that the message or the location was indeed received successfully.

Add a new feature that will allow users to share their locations with one another.
To fetch the location, on the client side javascript, we are going to use the web browser geolocation API. Assuming the browser gives access to fetch its geocode location information, the application should be able to fetch the longitude and latitude of the connecter user and share that information with the server.

Populating the side bar of the chat application.
On top in the side bar we're going to show the rooms. We are also going show all the users in that room. That list will automatically get updated as the users come and go.

We already done all the heavy lifting in order to get this done. We already track when the user come and go. Also inside the user.js we already created a function that allows us to fetch a list of user by the room name.

All we need to do is to emit a new event from the server to the client when the room name changes. That will happen when someone joins and also when someone leaves

Tasks:

• In socket.on('join', ...) event listener after we broadcast a message saying that a user has joined, we write code to emit a roomData event to all the users in the room including the new users.
• We repeat the step above in the socket.on('disconnect',...) event listener