DEV Community

Cover image for Building a chat - Browser Notifications with React, Websockets and Web-Push 🤯

Building a chat - Browser Notifications with React, Websockets and Web-Push 🤯

Nevo David on August 22, 2022

Like this article? Follow me on X: https://x.com/nevodavid What is this article about? We have all encountered chat over the web, tha...
Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Love it! 😁

Collapse
 
nevodavid profile image
Nevo David

Thank you Joel! ❤️
How are you this fine Monday? :)

Collapse
 
joelbonetr profile image
JoelBonetR 🥇

Just finished an implementation and waiting for the pipeline to finish. Hopefully I'll be out of the computer in few minutes 😆

Thread Thread
 
nevodavid profile image
Nevo David

Hopefully you won't get any errors, that can be all night 💤

Thread Thread
 
joelbonetr profile image
JoelBonetR 🥇

I can confirm it works! 😂

Now I can go buy some groceries to survive one day more.

For today I only need to move a sideproject from a VPS to another, change the CI config, test it and hopefully, I'll be free for dinner. 😅

Collapse
 
nevodavid profile image
Nevo David

The next article I am going to write about how to make the dev.to bell icon! What do you think?

Collapse
 
combarnea profile image
Tomer Barnea

Ohhhh yeah! :)

Collapse
 
nevodavid profile image
Nevo David

🚀

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Nice work! This series is going to be really exciting 🤩

Collapse
 
nevodavid profile image
Nevo David

I am excited too! What should I write about next?

Collapse
 
aycom366 profile image
Ay

thanks for this great article, I really learned alot
Please can you write on how to build a no code tool project??

basically starting from creating the widget, it can be anything
after this, we push the package to npm to be used by any frontend framework, react,vue e.t.c

I would be glad if you consider my request. Thanks once again

Collapse
 
toan1606 profile image
Toan1606

Thanks. But I have some questions.

  1. Is Your solution for chat and real time the best ?
  2. I'm a Java Developer so I can do it in Java instead of React. So Can you compare between them ?

Thanks

Collapse
 
nevodavid profile image
Nevo David • Edited

Hi Toan1606, Thank you for asking.

  1. There are many ways to write it with different libraries and different languages, but the main goal is to stick to the browser limitation. If you want two way communication between the browser and the server you have to use websockets. You can find more information about it on the first article.

  2. Unfortunately, you can't use Java for the frontend. You can change React to any other frontend or just a vanilla js. You can definetly replace Java with node.js for the websockets. I am not a big Java expert but a quick google brought this:
    github.com/TooTallNate/Java-WebSocket

Collapse
 
toan1606 profile image
Toan1606

Thanks. I will learn React and using my next project.

Collapse
 
nevodavid profile image
Nevo David

New article!!
I implemented the Dev Community Notification Center with React, Novu and Websockets 🔥

dev.to/novu/i-implemented-the-dev-...

Collapse
 
nevodavid profile image
Nevo David

Thank you Steven!
How are you? :)

Collapse
 
obaino82 profile image
Obaino82

Nice one

Collapse
 
nevodavid profile image
Nevo David

Thank you Obaino82, Have you used browser notifications before?

Collapse
 
bobbyiliev profile image
Bobby Iliev

This is awesome!

Collapse
 
nevodavid profile image
Nevo David

You are awesome!
How are you!!??

Collapse
 
rogue_rm_ profile image
Rəbbi

It is great. I'm interested that, are there any sounds for this notifications?

Collapse
 
nevodavid profile image
Nevo David

Hi Rabbi! Thank you for asking, I think there is sound by default and you can make it silent if you want.

Feel free to look at all the properties here:
developer.mozilla.org/en-US/docs/W...

Collapse
 
nevodavid profile image
Nevo David

Have you ever used browser notifications before?

Collapse
 
karthick_selvaraj profile image
Karthick Selvaraj

Hi,

I'm looking for a similar kind of solution like, whenever user is offline they might receive messages.

I need to send those messages as email notification.

Can you help us like how can we achieve this?

Chat Application platforms I'm using - AND, IOS & Web - React

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
mateuszlatka9 profile image
Mateusz Łątka

test2

Collapse
 
nevodavid profile image
Nevo David

test3

Collapse
 
browncoder profile image
Mahendra Bishnoi

where's completed app source code & deployed version 🥺

Collapse
 
attaullahkhanit profile image
Attaullahkhanit

It's amazing

Collapse
 
fsappdev profile image
fsappdev

this is so helpful, thanks!!

Collapse
 
hasannaqvi83 profile image
hasannaqvi83

Wonderful article @nevodavid
Just wondering if notification component can be used in a SharePoint app developed using SharePoint framework.

Collapse
 
nevodavid profile image
Nevo David

Hi @hasannaqvi83 do you refer to Novu or the Article? :)

Collapse
 
fernandocavill profile image
fernandocavill

Great!
How about the performance if 10,000 people are online at the same time.

Collapse
 
nevodavid profile image
Nevo David

Hi @fernandocavill,
It can hold even more, it all depends on the Devops.
If you are referring to one server, and concurrency of 10,000 people, it will probably not hold 😆

Collapse
 
hoangba02 profile image
hoangba02

if it is real, where will the message be saved on the web browser