How to make a chat?

Question

JavaScript

Hello. Here's how it would be more correct to make a chat in the layout of the site. There is a server part: so far only processing and sending messages.

Question to the experts, or to those who generally understand anything about this.

How to really make the right chat? There are some generally open examples with code, which can be taken as a basis for example - so as not to “nagovnokodit” so to speak.

Here is a chat I did. Starts to lag a lot when there are a lot of messages. It slows down text input. I understand that the issue here is in layout. Update messages: 1 second interval, or 0.5 seconds.

How is it generally more correct to implement receiving messages, or showing the history of messages. How would it be more correct to load a little bit, or load the entire history at once (somehow making it so that text input does not slow down). I would like to hear the opinion of every person who understands this. Where to begin? What is the best way to do all this? How to do it in general, so that it goes not only for the mobile version, but also for the full version (for a computer)

How to interact with messages (delete, edit)? What is the best way to write part of the code in JS.

I'm not asking you to throw a bunch of code here, I just want to learn from people who understand this how to really do everything right, and not make it worse for yourself later with your chat. Thank you!

Answer 1

Use any reactive framework to chat. Angular.js, React.js, Vue.js, or its Nuxt.js second-level framework.
1. Messages should be given page by page.
2. Pagination is carried out by scrolling.
3. New messages must arrive via WebSocket. For example, ready websocket - https://github.com/centrifugal/centrifugo
4. Through the framework, a constant length of the array with messages is maintained. For example, 100 messages. Let's say another message arrives on the websocket. It is added to the end of the array, and the first element is removed. If the user scrolls the posts to the first one shown, the script sends a request to the site: give me a page with 50 posts older than this last one. The server gives the page, it is inserted at the beginning of the array, after which the last 50 elements are removed from it. Scrolling to newer messages should work similarly. Since the frameworks are reactive, you don't need to insert anything into the HTML: it will render itself.