DEV Community

Realtime Chat app using Kafka, SpringBoot, ReactJS, and WebSockets

Subhransu Maharana on April 25, 2020

In this tutorial, we would be building a simple real-time chat application that demonstrates how to use Kafka as a message broker along with Java, ...
Collapse
 
axellageraldinc profile image
Axellageraldinc Adryamarthanino

Hi, great article!
I have a question though, why use kafka at all if we're already using websocket? 'Cause websocket also streams the data to the client alright. I would really appreciate if you answer my question 😊

Collapse
 
alqaholic profile image
Rohit Krishnan

Using only websockets would be great for this application (there is no need for an additional dependancy on kafka).
Suppose you have a more complex chat application (that is safe for cats πŸ˜…); Eg:- A image you send needs to be scanned for dogs before sending it (or else it'll scare cats).
In this case you can have a dog-detection-service that listens for events on the image-topic and runs the image through a ML model that scans for dogs.
The service can then publish to a messages-topic which can then be consumed by a messages-service that exposes a websocket endpoint for the UI to consume.

This way kafka helps to isolate application logic.. the messages-service just needs to send events in the messages-topic to connected clients and the dog-detection-service just has to process events on the image-topic before publishing it to the messages-topic.

Collapse
 
nonefornothing profile image
None for Nothing

because you need websocket , if you want display data to browser.
if you only use kafka and try rest api to display to browser , then it can't be works ( data thats you transfer is null). its happen because when you produce something to kafka, kafka automatically consume that data.
btw : its happen to me :D

Collapse
 
axellageraldinc profile image
Axellageraldinc Adryamarthanino

Hi, thanks for the reply.
Though my question was about using only websocket without kafka, not the other way around.
Could you help on the question? Big thanks in advance!

Thread Thread
 
nonefornothing profile image
None for Nothing

yes , you can do it, if you only using websocket for event streaming.

Collapse
 
saiboyina profile image
SAI BOYINA

What if receiver not available? kafka works as a mediator to hold the message until receiver gets the message. In case of group message the unique message_id being used as a key and deliver to whole group of members whenever they are available by having a service which acts as a push message service for such users.

Collapse
 
wilfoderek profile image
Wilfo IvΓ‘n

Let's suppose the next scenario:
The user is chatting and suddenly he/she lost connection due a intermitation so when getting backs the internet signal the message must appears again with their respective status, so this persistence you get it with kafka.

Collapse
 
kciejek profile image
kciejek

Insead of
npm install socketjs react-stomp material-ui axios
should be
npm install sockjs react-stomp material-ui axios

and CORS have to be enabled in backend by @CrossOrigin

Beside that great basic chat tutorial!

Collapse
 
hazhayder profile image
hazhayder

I really liked the article as beginner though it elaborates the configuration of kafka with spring boot but wouldn't the article should be designed in a way that it elaborates the configuration + high end usage of Kafka?

Collapse
 
hastinag profile image
hasti-nag • Edited

Hi, great tutorial!
When I'm trying to login with username, we are facing an issue that,
TimeoutException thrown when sending to topic and Topic does not exist.But the topic is already exist when we check through list of topics through command. If anyone has idea about this, Can you please help ASAP? Thank you.

Collapse
 
fuji1405116 profile image
Info Comment hidden by post author - thread only accessible via permalink
Fuji • Edited

Just loved it.. though as a beginner at first I got lost in websocket part and workflow but later after reading some other articles it seems clear now and did it with Websocket + STOMP and Front-End(easy html+css+js).
Can you plz suggest me where should I look into after this start for building enterprise chat application with Spring+Kafka where I have to handle several Group and One-to-One messages of many users..?
Question :
Here the chatting is happening using only websocket connection :
springClientUI --websocket-- SpringBootServer --websocket-- springClientUI
I understand that the springClientUI also receives from kafka server but the sending of message is not going to kafka server.. isn't it? So if I wanna full chat using kafka message broker only, then can I do this :
springClientUI --websocket-- <--springBootServer--> (Kafka server - Topic) <--springBootServer--> --websocket-- springClientUI
by just implementing "/sendMessage" to send messages to Kafka server Topic that both are subscribed ? I am lost in here :'(
Plz help...!! and Thanx in advance <3

Collapse
 
vishalmagdum profile image
Vishal Magdum

I created one chatbot using reactjs how i want to add that in different website. can any one guide for this.

Collapse
 
allefgomes profile image
Allef Gomes

Can it generate push notifications?

Collapse
 
fqzhang profile image
alex • Edited

Great article! One quick question. Do we need one Kafka topic for each conversation for a fully functional chat app.

Collapse
 
israk_adol profile image
israk adol

Can you tell me how can I connect the websocket with my android as a client side.

Collapse
 
hadmohlam profile image
Hadmohlam

Hello, thanks for this tutorial. Is there a full tutorial for kafka message system design. I hope if you could also set a tutorial for kafka message sending per group and per user.

Some comments have been hidden by the post's author - find out more