Published on

Node Chat App

Last Modified on
Last modified on
Authors
Node Chat App
Photo by Maria D. Campbell on Interglobalmedia

chattr

Built with websockets library socket.io, Node.js, and Express, and React

What is it for?

  • For friends, family, and/or colleagues to connect in real time and communicate with each other. Messages were timestamped. chattrbox used to also use the geolocation API and Google Maps API Maps Url. The geolocation API allowed users to provide their location IF they want to. They can always choose to DENY access to their location. For privacy reasons, the user was asked permission to report location information when clicking on the Send Location button. chattrbox used the Google Maps API along with the geolocation API so that a user not only shared his/her latitude and longitude, but an actual Google Map with his/her exact location and directions how to get there. That was possible because of the implementation of Google Maps API dir (directions) mode as opposed to search mode, which was a bit less accurate.

    However, in this current iteration of the application, I chose not to add the Google Maps API and geolocation API features because of the increased awareness and global support of individuals' privacy on the web. Messages are also no longer timestamped for the same reason.

Are chats private?

  • It used to be that chats in each chat room that was created by a user when he/she logged in, were private within the confines of that room. However, now there are no longer private chat rooms, but private chats between two users at a time.

If every user can create their own private chat, how does that work?

  • Each socket in Socket.io is identified by a random, unguessable, unique identifier Socket#id. Therefore, each socket automatically joins a "room" identified by its own id. This makes it easy to create private messages between two users/browser window (tab) instances. I found this to be a better use of this Socket.io feature than creating a room that multiple users can join. As a result, one can create either a public chat in which the messages are shared with everyone everywhere, or create a private chat with one user at a time.

How can I tell whether I am creating a private or public message?

  • Once you have entered your name in the input field containing the placeholder text "Enter name" and hit the return/enter key on your device's keyboard, your name appears among the list of users who have also joined Chattr, if there are any. If there is at least one other user present, you can click on their name, and you will be directed to an input field containing the placeholder text "Type your message (private)". In addition, when you click on the user you want to have a private chat with, their name will become underlined, indicating they are the current (selected) user you are chatting with privately. An input field with the placeholder text "Type your message (public)" also appears when you first input your name in the input field with the placeholder text "Enter name", which is present when you first land on the application.


    Chattr public message input field
    Photo by Maria D. Campbell on Interglobalmedia

    Chattr public and private message input fields
    Photo by Maria D. Campbell on Interglobalmedia

How can I invite others to chat with me?

  • By sharing the link to the site.

Are chats persistent?

  • No. Once a browser tab or window is closed, the user associated with that tab or window instance is erased along with any messages associated with the user. But you can re-use the link to the application on Heroku if you like and share it with others so that they can join you there.

Will the url always remain the same?

It could, but I might change it from time to time at my discretion so as to prevent abuse of the site for potentially nefarious reasons or for profit. I will share the url only with those that I would like to share the space with.

Project Includes

create-react-app, eslint, express, heroku, heroku cli, homebrew, husky, git, git hooks, nodejs, prettier, react, sass, socket.io, stylelint, websockets