Skip to content

Web chat with websocket messaging, spring security registration, email confirmation and JS frontend part

Notifications You must be signed in to change notification settings

ArturShatailo/chat-with-registration-spring-boot-websocket

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WEB CHAT APPLICATION (ChatMate)

ChatMate application

Spring boot web chat application with websocket (SockJS) messaging, Spring Security authentication and email registration confirmation. The frontend JavaScript part is also included (HTML + CSS)

Contents

Overview

This is a web chat application ChatMate that can be used to chatting with another connected users.

The fist step any user should pass through is the authentication and authorisation process that is provided by Spring Security configuration. Then, using post request, a new user record will be saved in database as well as a new registration token. This token is needed to confirm the emeil. An email message will be sent to user's specified email address and a 15 minutes period token will be included in the inner mail link, so user should just click on it and email address will be confirmed according to the token. Registration process is completed.
Now, user can use the username (email) and password to sign in the system and get access to the secured page of chat.
Dashboard page (chat page) includes personal information of the user received by fetch request to backend api with get request. The legged in user is abel to change its nickname at any time. Also, on the dashboard page the chat window is displayed and can be used to connect, disconnect and message sending/receiving. Each new connected user will be displayed in the chat window, also, the event message will be sent when any user is disconnecting. When user disconnects from the chat, messages from another user will not be received anymore. Message sending process is provided by SockJS with STOMP (simple text oriented message protocol) and backend configured WebSocketMessageBroker.

The application can be tested using the link to Heroku app: ChatMate

Technologies stack

  • Spring Boot

  • Spring Security

  • Spring Mail

  • PostgreSQL database

  • WebSocket messaging

  • JavaScript + HTML + CSS(SCSS)

  • SockJS, Stomp

  • Lombok, Slf4j

  • Maven

  • Deployed to AWS (redeployed to Heroku on Feb 2023)

Demonstration

Heroku deploy
  • LOGIN http://localhost:8095/login

    Login form connected to Spring Security

    ChatMate login
  • REGISTRATION http://localhost:8095/register

    Registration form connected to Spring Security and Confirmation email sender

    ChatMate register
  • DASHBOARD http://localhost:8095/dashboard

    Dashboard page with user interface.

    ChatMate dashboard
  • PERSONAL INFORMATION http://localhost:8095/dashboard

    User information displayed from the fetch GET request to endpoint http://localhost:8095/api/user

    ChatMate personal information
  • CHATTING http://localhost:8095/dashboard

    Chat messaging with SockJS requests to /chat endpoint. Messages are displayed according to the user information: generated avatar, nickname, generated message body that includes inputted message text.

    ChatMate chat

How to start

Download the project from GitHub (using fork is appreciated)

Start the app in your IDE (don't forget about database configuration)

Email confirmation configuration file example is attached below

Go to the link: http://localhost:8095/login

ChatMate chat