Chat socket App

 It is a small demo using socket communication; I built an interactive chat app; this is a simple app; I'll improve its features sometime later, so let’s start whit this prototype.

The socket communication is interactive; it doesn't need to wait to check the status; 

When you use a Rest API,  the client makes a request to obtain the response from the server, but when you need to be aware of something such as behavior wether, you have to check this status many times, so how do you avoid this activity? Sockets for rescue!

The socket communication is bidirectional; therefore, the client and server know their status;  It needs only one endpoint to send and receive messages. Stomp is a protocol for messaging; it is widely supported for uses over WebSockets; some web apps like  RabbitMq or other brokers implement these features; Stomp defines these operations:

• Connect
• Subscribe
• Unsubscribe
• Send o Publish
• Disconnect

Frontend

The frontend is made in Angular; it uses the library Stompjs; In Angular, the library Stompjs uses the function ".onConnect = frame =>{...}", it has been checked the status of the connection; likewise, the function ".onDisconnect = frame => {...}" close the link; The function "subscribe" in Stompjs, listen to the event from the broker; the arguments are:

   .subscribe(/topic-event, return-function e =>{})

The function "publish" send a message to the broker; the arguments are

      .publish({

             destination: '/name-destination',

             body: JSON.stringify(message)   

      })

Backend

The backend was built in the Spring framework as a broker; It uses the library "spring-boot-starter-websocket"; it uses the annotation @MessageMapping for listening events.

To send a message, the library uses the annotation @SendTo, which specifies the event to emit in its arguments. The app used the Mongo database to save the messages.

Architecture and deploy

The app uses tree docker images to deploy it; the first is a mongo DB container; it uses a volume named "mongodata"; The second is a java-spring application; for deploying it,  the app uses a double stage method in the Docker file, and the last is an Angular-app; this app used an Nginx container.  

To deploy the app, you need to clone the  repository; it has two submodules; therefore, you need the instruction git clone to add  --recursive option: 

git clone --recursive https://github.com/lectrapb/angular-chat-socket.git

before you need to use this instruction in the local repository:

git submodule init

After that, you can execute the docker-compose command (please don't forget to install docker and docker-compose! ):

docker-compose up -d 

The deployment of it could be lazy because this app needs to download a bunch of dependencies, but in the end, you can go to the address http://localhost:4200 and see the next:

We achieve the primary goal of this post; how do you use it and more ideas about it in the next post; goodbye!