Share a chat room for real-time online communication based on persistent connections, long polling, and Native JS and AJAX.

Share a chat room for real-time online communication based on persistent connections, long polling, and Native JS and AJAX.

There are many ways to implement online chat rooms on the web page. Before coming to HTML5, common methods include: regular polling, persistent connections + long polling, and third-party plug-ins (such as FLASH Socket ), for HTML5, WebSocket can be used directly. Of course, HTML5 is not supported by all browsers on PC, therefore, this chat room is still based on the persistent connection + long polling + native JS and AJAX Implementation of Multiplayer Online instant messaging chat rooms. This chat room was actually completed last weekend and has simple functions, there may be some shortcomings, but they can meet the needs of online instant chat. Sharing also provides an idea for you to achieve better online instant chat tools.

Chat Room features:

1. Multiple users can access the same chat room;

2. When entering or going offline, notifications are automatically generated and displayed in the chat room, so that the chat people will know who has come in and who has left;

3. Displays online personnel columns in real time;

4. No database support is required, and all data is stored in the memory. Of course, if conditions are met, you can use distributed cache or add a database to store the data. Here we use the memory to store the data.

Next I will share my code. Because the native JS and AJAX are used, it is easy to understand. The code is WEB Front-end and server-end respectively (a little nonsense)

The source code of the WEB Front-end is as follows: (ChatPage.html)

<! DOCTYPE html> 
The code is relatively simple. The implementation principle is as follows:
1. Chat message: obtains unread messages cyclically. When a read message is taken out, it is marked as read, and all read messages are deleted. -- Here I use two methods, the second method has been commented out. You can try to cancel the annotation, which is more intuitive than the first method. We recommend that you use it;
2. Send a message: instantiate a message instance and add it to the chat message set;
3. Status switch: Online is added to the online staff collection, and an online message is generated and put into the chat message collection. offline is removed from the online staff collection, an offline message is generated and put into the chat message set;
Note: thread synchronization is important because Global static sets are used.
The final implementation result is as follows:
John:

Li Si:

Xiaomei:

If you think it is good, give me a suggestion. Your support is the motivation for pushing me forward and the source of writing. I have always insisted: sharing knowledge, I am also growing at the same time. I hope to grow together with you. Thank you!