Implementing ajax to make a functioning live chat

Question

I'm trying to build a simple live chat for my website, I already have everything set up, meaning databases, login and log out system, forms, displaying the database values in chat form.

The only thing I'm missing is implementing the live refresh function so users don't have to manually refresh the site to see new messages. I'm a little lost, could you give me some guidance? I'm guessing I have to add a specific javascript call whenever a message is sent, or the "send" button is pressed to be more specific, then that would call back a function to refresh the chat for every participant. Not sure where to start or which code to use.

Answer 1

Essentially, you have 2 ways to implement this.

1. Using a polling technique with ajax request which will grant you a greater compatibility, but you will have to much more work to implement it. I don't really consider it for most cases nowadays, because it could be very inefficient.

2. Using a socket mechanism, you can use web sockets for a out of the box solution, most browsers have support for it nowadays For third party libraries you can use socket.io which can fall back to web socket yet it grants a little bit for features out of the box, like channels, which you would benefit from. Lastly, for a third party service, you can use firebase/firestore which they have a realtime database, so whenever a change happens, you get notified.

I would recommend using either the web socket approach (native) or using a wrapper/library like socket.io. If you go with Socket.io, there are a lot of tutorials out there that build chats with that library, so you can get a working sample really fast.