Shulou(Shulou.com)06/01 Report--

This article shows you how to carry out the principle analysis of Web real-time on-screen comment. The content is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Don't say much nonsense, first of all, put up the effect picture.

Effect picture

Use

During activities and annual meetings, messages and complaints are displayed on the big screen in real time.

On the video website, show everyone's complaints in real time.

Principle

The other principle is quite simple, which is to display everyone's messages in real time.

Note: real-time, animation effects, data storage.

Real-time performance

First of all, we will think that Ajax round robin is simple and rough.

There is a constant connection between the client and the server, asking about it at regular intervals.

The client will poll to see if there is any new news.

There will be a large number of connections in this way, one to accept and one to send.

And every time a request is sent, there will be a Header of Http, which will consume a lot of traffic and consume the utilization of CPU.

Therefore, this proposal is not advisable.

Can be achieved through a long connection, socket.io.

Socket.IO official address: http://socket.io/

Socket.IO supports the WebSocket protocol, a framework for real-time communication and cross-platform.

The goal of Socket.IO design is to build real-time applications that run well on different browsers and mobile devices.

Such as real-time analysis system, binary stream data processing application, online chat room, online customer service system, comment system, WebIM and so on.

At present, Socket.IO already supports mainstream PC browsers (IE, Safari, Chrome, Firefox, Opera, etc.).

Browsers on mobile platform (Safari under iOS platform, Webkit-based browser under Android platform, etc.).

Socket.IO implements real-time, bi-directional and event-based communication mechanism, which solves the problem of real-time communication and unifies the programming mode of server and client.

After starting Socket, it is like establishing a pipeline between the client and the server, and the two sides can communicate with each other.

The use of Socket.IO and Workerman combination, the combination of two swords.

Workerman official address: http://www.workerman.net/

Animation effect

CommentCoreLibrary

Http://jabbany.github.io/CommentCoreLibrary/demo/

GoEasy

Http://goeasy.io/www/demo/barrage

Jquery.barrager.js

Jquery.barrager.js is an elegant on-screen comment plugin that supports the display of pictures, text and hyperlinks.

Support customization of speed, height, color, quantity, etc.

Link: http://yaseng.org/jquery.barrager.js/

You can browse the Demo provided above and modify and optimize it according to your actual needs.

Data storage

Remember not to insert data into the database in real time every time you send data, you can use asynchronous processing.

First, the data is stored in the cache, and the cached data is synchronized to the database asynchronously.

The realization method of the effect picture:

Socket.IO + Workerman + jquery.barrager.js

The above content is how to analyze the principle of Web real-time on-screen comment. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.