Introduction:

2021 Tencent Games annual press conference held online. This year, with the strategic concept of “super digital scene” as the core, the conference delivers constructive thinking on game cognition and industrial boundary, and launches more than 60 game products and contents to show the rich experience and diversified value that Tencent games bring to players.

At this press conference, The cloud development CloudBase was once again selected as one of the technology selection, realizing the real-time bullet screen system at a very low cost, ensuring stable operation and bringing high-quality interactive experience to game lovers. The following will focus on the whole process of cloud development by the project team to realize the function of bullet screen.

“Attention all departments, high energy ahead!”

I. Business background

2021 Tencent Game annual press conference has developed an exclusive small program, including functions such as live broadcasting, lottery, watching and replay, all of which are based on real-time data push of cloud development.

Before the technical selection of bullet screen function, the developer sorted out the business scenarios:

  • Live interaction of bullets
  • Allows a small number of bullets to be lost
  • Only for the night of the live press conference
  • Sensitive information/keyword filtering

In consideration of cost, stability, and small program after fitment and so on several aspects, eventually chose the development of real-time data push function of cloud, as early as in last year’s conference, the team used a cloud development to achieve real-time data push live program schedule to remind, and other functions, on this basis, to carry the barrage is unified on the development of cloud.

Second, technical practice

The development train of thought

At the beginning, I wanted to directly monitor all the users’ barrage collection, but the official limit of monitoring data at a time is not more than 5000, and the more monitored data, the worse the initialization performance, exceeding the upper limit will throw errors and stop monitoring. The final design is as follows: user barrage inserts set A, monitors data set B, uses the timer of cloud function to merge barrage periodically, and updates the barrage to the corresponding monitored data record (as shown in the figure).

In this way, a constant number of data records monitored by the user is ensured. Here, 10 records (cyclic array) are used to aggregate the barrage data, and all the barrage data of the current timestamp are updated to the data record of Index = timestamp%10 every second. Meanwhile, the refresh frequency of barrage is fixed at 1s. Reduce the front-end performance cost of constant callback/ rendering due to frequent data changes.

Code demo

The user sends part of the code of danmu:

exports.main = async (event, context) => { // ... Math.ceil(new Date().getTime() / 1000); let time = math.ceil (new Date().getTime() / 1000); Collection ('danmu_all').add({data: {openID, content, time,},}); return {err: 0, msg: 'ok'}; };Copy the code

Barrage combination processing:

exports.main = async (event, context) => { // .... Math.ceil(new Date().gettime () / 1000) -1; math.ceil (new Date().gettime () / 1000) -1; const result = await db .collection('danmu_all') .where({time}).limit(100).get(); let msg = []; for (let i of result.data) { msg.push({ openid: i.openid, content: i.content, }); Db.collection ('watch_collection'). Where ({index: time % 10}).update({data: {MSG,time},}); return msg; }Copy the code

The front end handles message notifications, and be careful not to repeat watch. If the anonymous login of cloud development is opened, the page of H5 terminal can also use the function of synchronous bullet screen:

this.watcher = db.collection('watch_collection').watch({ onChange: Function (snapshot) {for (let I of snapshot.docchanges) {// Ignore non-updated information if (! i.doc || i.queueType ! == 'update') { continue; } switch (i.doc.type) { // ... Omit the other types of message processing case 'danmu: / / barrage rendering livePage showServerBarrage (i.d oc. MSG); break; }}}});Copy the code

So far, the core function of the whole barrage has been fully realized.

Quadratic optimization

Ran after a period of time found accidentally barrage of discarded within a few seconds later view the log, found that even timer configuration is executed once per second, in the actual production is also not strictly executed once every second, and sometimes will skip 1-3 seconds to execute, the other USES the redis to mark the current processing progress, even if there is over the number of seconds, Can also go back to the unprocessed time to make up. The cloud function using Redis tutorial can view the official cloud function using Redis tutorial.

The user sends part of the code to add the marking code:

exports.main = async (event, context) => { // ... Omitted some authentication and verification content security code //... // tag merge task await redisclient. zadd('danmu_task', time, time+')};Copy the code

Redis5.0 or above can only support zpopmin command, if you need to buy, you need to choose the correct version.

Exports.main = async (event, context) => {// exports.main = async (event, context) => {// exports.main = async (event, context) => {// let time = math.ceil (new Date().getTime() / 1000) -1; While (true) {let minTask = await redisclient.zpopmin ('danmu_task'); If (mintask.length <= 0) {return; If (parseInt(minTask[0]) > time) {redisclient. zadd('danmu_task', minTask[1], minTask[0]); return; } // Execute merge task await danmuMerge(time); }};Copy the code

In terms of security logic, certain strategies are also made, such as rendering the bullet screen sent locally first. When the client receives the bullet screen push, it will not render when judging that openID is its own. In this way, even if the user’s bullet screen is filtered out, it can still be displayed locally and retain certain user experience.

In addition, the upper limit of a single cloud function instance is 1000. If you determine that the traffic is heavy on the night, you can use multiple cloud functions to share the traffic.

Manage the implementation of background

At the same time, the watch function can be used to synchronize the management background and refresh the client danmu in real time to achieve the purpose of management, and the same code front-end and management end can be reused:

Excerpt part of the management background code:

methods: { stop() { this.watcher.close(); }, }, beforeDestroy() { this.watcher.close(); }, mounted() { this.app = this.$store.state.app; this.db = this.app.database(); let that = this; this.watcher = this.db.collection('danmu_merge').watch({ onChange(snapshot) { for (let d of snapshot.docChanges) { for (let v of d.msg) { that.danmu.unshift(v); } } if (that.danmu.length > 500) { that.danmu = that.danmu.slice(0, 499); }}});Copy the code

The read permission setting of the collection also takes effect in real-time data push. If the read permission is set to read only the user’s own data, the data not created by the user cannot be monitored.

Tips

By default, only the creator can read and write the database permissions. The first initialization of the circular array is created on the client during the development process, and the openID of the current user is added by default. As a result, other users cannot read the data of merge. Delete the OpenID field or set the permission to be readable by all.

The read permission setting of the collection also takes effect in real-time data push. If the read permission is set to read only the user’s own data, the data not created by the user cannot be monitored.

Iii. Project Achievements and value

Based on cloud function, real-time data push, cloud database and other capabilities of cloud development, the project ran smoothly throughout the whole process. Even at the peak traffic on the night of the press conference, the writing operation of bullet screen was stable. In terms of listening (reading), watch’s performance can steadily support millions of simultaneous online.

In the end, two developers completed the development and debugging of the missile barrage system in only two days. In respect of fees, the total cost of the system is to support the whole project barrage is only 100 yuan, mainly concentrated in the database to read and write and cloud function call (monitoring data real-time database functions are in the free phase, not calculate the costs to the database read), to the cost of other modules, actual barrage module may only consumes little few money, The cost is much lower than expected and tens of times less than traditional instant messaging solutions.

In general, the project adopts cloud development and has the following advantages:

  • With elastic expansion and shrinkage capacity, it can resist instantaneous high concurrent flow to ensure the smooth operation of live broadcasting;
  • Low cost, only charge cloud function call and database read and write fees, real-time data push free use, very suitable for the project;
  • Safe and stable, project access is based on the cloud development of its own wechat private link to ensure security;
  • High degree of freedom, compatible with other development frameworks and services.