Chatroom

A Realtime Browser Chat Application,
by TomCo (Technology & Online Media Company).

Documentation »
View Demo · Report Bug · Request Feature

Contents

1. About
   • Tech Stack
2. Startup
   • Prerequisites
   • Installation
3. Usage
   • Screenshots
4. Roadmap
5. Changelog
6. Contributing
7. Contact
8. Acknowledgements

---

About This Project

A Chatroom Application with User Authentication & Accounts. Login & Register to join a Chatroom, which is powered in realtime and dynamically, for all concurrently connected users. Also has the options to manage your chatting account, such as changing password or username (both of which are needed to register, or login), as well as display name. All Account information is queried and stored in a MySQL database, with passwords securely hashed first.

_{A locally hosted http REST API, made in Typescript and Node, with Express and Socket IO frameworks, supported by a MySQL database. Uses EJS template engine for client page serving.}

Tech Stack

• Typescript
• NodeJS
• Socket.io
• Express
• MySQL
• EJS
• Rollbar
• SimpleTxtLogger
• ESLint
• MochaChai

---

Startup

For help or guidance in downloading and running the application, see the following subsections.

Prerequisites

You must have npm (node package manager) and Nodejs installed on your system!

1. Setup npm:

npm install npm@latest -g

Installation

1. Clone/Download:

git clone https://github.com/tberey/ts-node-chatroom.git

2. Install:

npm install && npm update

3. Start:

npm run start:app

---

Usage

Endpoint	Action/Desc.	Full URI (hosted locally, on some port; e.g.: 3000)	Request Type
"/"	Home Page: The client-side landing page. Login or Register.	"http://localhost:3000/"	GET
"/chat"	Chatroom: If logged in, this is the url for the chatroom. if not logged in, redirects to home page.	"http://localhost:3000/chat"	GET
"/login"	Post request to login a user, with supplied credentials. If successful, redirects to chatroom.	"http://localhost:3000/login"	POST
"/register"	Post request to register a user, with supplied credentials.	"http://localhost:3000/register"	POST
"/changeUsername"	Post request to update a logged in user's username.	"http://localhost:3000/changeUsername"	POST
"/logout"	Post request to log out a user and redirect to home page.	"http://localhost:3000/logout"	POST
"/changePassword"	Put request to update a logged in user's password.	"http://localhost:3000/changePassword"	PUT
"/delete"	Delete request to delete and hence log out a user, and redirect to home page. Hard delete of account.	"http://localhost:3000/delete"	DELETE

Screenshots

Chatroom (Logged-in):

Landing Page (Register and/or Login):

Multiple Users (All Logged-in):

---

Roadmap

Below is the refined and confirmed roadmap, that has been planned for completion. See open issues and also the project board, for any other proposed features or known issues, which may not be listed below.

Feature/Task/Bugfix	Details	Version (if released)	Notes
Bug#1	Bug details...	0.0.1	example#1
Feature#4	Feature details...		example#2
Automatic Database Startup & Configuration	Auto-build database and table(s), and auto-populate data or test account (seeding).
Fix ID=0, On Register and Login	User's ID is shown as 0, but only when registering and logging in for first time, (re-log fixes, & no DB issues seen).
Remove SQL From Server.ts	Remove any sql/db related stuff from Server.ts class and add into Database.ts class.
Add Promises	Add Promises etc.

---

Changelog

Version	Date	Changes
Version 0.0.1	[2020-03-08]	Initial Commit. Add initial directory structure and files. Build enables users to join, set a name (or not) and chat with each other. Add dynamic 'who is typing' live indicator Set un-changeable unique ID to users, to trace all messages back to users. Add logging/informative details about who connects/disconnects. Add timestamp and further styling to messages. Add Screenshots dir, and image screenshot files. Add README.md
Version 0.0.2	[2020-03-09]	Add new set to store chat/conversation history, which is sent to newly connected clients (enables full chat when client joins later/last). Remove 'dist' and 'modules' folders. (After adding gitignore.) Update README.md
Version 0.1.0	[2020-03-10]	Add connected users list to client-side. Add new IUser type for user's details, and create new set to hold these (and amend IMessage type to accept this new type in place of existing props). Update front-end DOM and appearance, to be more coherent. Update public script to accept newly updated types/interfaces. Update README.md
Version 0.2.0	[2020-03-11]	Update connected users list on client-side, plus styling. Update chatroom/message-list to have a scroll (overscroll) feature, for large amounts of messages. Add feature to always scroll to bottom of chatroom/messages-list. Update the user set list to remove contacts on disconnection, and send updated list out to remaining. General code sharpening. Update 'Screenshots' dir, with new images. Update README.md
Version 0.2.1	[2020-03-12]	Add feature to show all users who may be typing concurrently (so more than one at a time). Add server messages feature, to alert connected users of updates to other connected users. I.e. connecting/disconnecting. Fix bug, where when any user sends a message it would clear all user's input field of text. General code sharpening/tidying, and minor client-side DOM adjustments. Update README.md
Version 0.2.2	[2020-03-13]	Friday the 13th Update, spoooky. Add basic mySQL database infrastructure and connection. Update Screenshots. Update README.md
Version 0.2.3	[2020-03-17]	Add further mySQL database infrastructure, including add a new entry row comprised of ID(Pri Key), Username and Password(Hashed). Add new front-end form, for use to make a post request on register button, to add new user details to db. Add new dependency/module, for parsing request body. Update README.md
Version 0.3.0	[2020-03-20]	Big Update - Full SQL Database Integration and Support. Add full user authentication to login client page, in order to access chatroom. Complete the login client page registration feature, including adding new users as a row to sql db. Full chatroom username and unique ID integration with sql db - all details are pulled from db. Add my account section to chatroom client page, with an account overview. Ability to change password in the my account section of chatroom, reflected into db also. Update change username to also update account section and sql database entry. Redirection: When not logged in, always redirect too the login client page. When logged in, always redirect to chatroom client page. Update README.md
Version 0.3.1	[2020-03-21]	Add full catch and redirection system, built up from previous implementation: Now catches any attempted unresolved urls, or unauthorized access (not logged-in), and redirects appropriately. Upgrade Account section, when logged in: A further check on changing password, and also move change username to this section. Also add collapsing menu, for all options currently available. Adjusted and refine code all around, as well as check and sure up comments. Adjusted so all data now come from server too. Bug Fixes and Testing. Update README.md
Version 0.4.0	[2020-03-23]	Picture Day Update! Redesign front-end/client-side: Updated better visuals and slightly altered chatroom layout. Adjust css/html for better scaling - Now much more viewable across a range devices/screen sizes. Add logout button/feature to account section in ChatRoom which disconnects from chat, logs user out (clears session data), to be returned to login page. Adjusted sockets to use session data, rather than exported variables, for login status and username/id. Minor routing changes. Bug Fixes and Tidy-up. Moves sensitive/destructive data to external json file (git-ignored), that is imported and read from. Updated all screenshots in Screenshot Directory. Update README.md
Version 0.4.1	[2020-03-24]	Minor request type changes (post -> delete/put, etc). CSS/HTML minor adjustments and fine-tune. Add Delete account check and action (with route and request), to delete account from db, log user out and redirect to login/register page. Update README.md
Version 0.4.2	[2020-03-25]	Add check/feature to prevent multiple instances (or log-in) of the same account. Add further error handling/catching for requests/socket-connections, preventing db changes or chatroom/account access, if user is no longer logged in. Update README.md
Version 0.4.3	[2020-03-26]	Add check/feature to registering, requiring the user to confirm chosen password when signing up, and accompanying client-side error handling (not necessary to be done on server-side, as it is not damaging/deleting any assets if the user is able to skip this check). Update README.md
Version 1.0.0	[2020-04-02]	1.0 Release! Update Types in routing. Update README.md
Version 2.0.0	[2020-05-18]	TypeScript & Class Update - Whilst already a TypeScript project, it has been further updated to make more and better use of TypeScript features, as well as reconstructed into a more object oriented and class based design. Also sharpened up the code, fixing any mistakes, inconsistencies, or general improvements. Update README.md
Version 2.1.0	[2020-05-19]	EJS Update - Whilst already a EJS Templated project, it has been further updated to make more and better use of ejs engine features, as well as compacting the code, fixing any mistakes/bugs, inconsistencies, and general improvements. Update README.md
Version 2.1.1	[2020-05-20]	EJS Update - Further and general improvements. Client-side Scripting restructure & tidy-up. Update README.md
Version 2.2.0	[2020-05-20]	Final EJS Update & Cleanup Further client-side Scripting restructure & tidy-up. CSS stylesheets consolidation (2=>1). Comments rewriting and tidy. Final check over and tidy up + Testing. Update README.md
Version 2.2.0	[2020-05-20]	Renaming and descriptions editing. Update README.md
Version 3.0.0	[2021-07-29]	Project-wide update, reformat and clean-up, including modules. Update README.md
Version 3.0.1	[2021-07-31]	Updates to session management implementation, plus a new interface. Updates to database interactivity and infrastructure, creating new separate class. Update README.md
Version 3.0.2	[2021-08-01]	Differentiate SocketServer further, into it's own service class, rather than a parent class of the server infrastructure. Minor updates to Database class and implementation. Update README.md
Version 3.0.3	[2021-08-03]	Fix spelling. Update README.md
Version 3.0.4	[2021-08-04]	Update README.md

---

Contributing

Contributions are welcomed and, of course, greatly appreciated.

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/Feature)
3. Commit your Changes (git commit -m 'Add some Feature')
4. Push to the Branch (git push origin feature/Feature)
5. Open a Pull Request.

---

Contact

Tom Berey; Project Manager, Lead Developer, Principal Tester & Customer Services;
tomberey1@gmail.com;

• Issues & Requests
• My Other Projects
• Personal Website
• Linked In

Acknowledgements

• Me

---

TomCo™ (Technology & Online Media Company ©)