Developers don't lie to developers, you told me it only costs 100 yuan?

Lead

The 2021 Tencent Game Annual Conference will be held online. This year, the press conference focused on the strategic concept of "Super Digital Scene", conveying constructive thinking about game cognition and industrial boundaries, and released more than 60 game products and contents to showcase the rich experience that Tencent Games brings to players. And multiple values.

This press conference once again selected the cloud development CloudBase as one of the technical selections, realized a real-time barrage system at a very low cost, and guaranteed stable operation, bringing a high-quality interactive experience to game enthusiasts. The following will focus on the whole process of the project team using cloud development to realize the barrage function.

"Attention to all departments, high energy ahead!"

One, business background

The 2021 Tencent Games Annual Conference has developed a dedicated mini program, including live broadcast, lottery, watching playback and other functions, among which all the bullet screen functions are implemented based on real-time data push developed by the cloud.

Before the technical selection of the barrage function, the development students sorted out the business scenarios:

• Barrage real-time interaction
• Allow a small amount of barrage to be lost
• Only used on the night of the live broadcast of the conference
• Sensitive information/keyword filtering

After comprehensively considering cost, stability, and adaptability to small programs, the project finally chose the real-time data push function developed by the cloud. As early as last year’s press conference , the project team used the cloud The developed real-time data push is used to realize functions such as the progress reminder of the live program list. On this basis, the bullet screen is also unified to the cloud for development.

2. Technical Practice

Development Ideas

At the beginning, I wanted to directly monitor the barrage collection of all users, but the official limit is that a single monitoring data cannot be greater than 5000, and the more the monitoring data bars, the worse the initialization performance. If the upper limit is exceeded, an error will be thrown and the monitoring will stop. The final design is: insert the user barrage into collection a, monitor the data collection b, use the timer of the cloud function to periodically merge the barrage, and update it to the corresponding data record that is being monitored (as shown in the figure).

This ensures that the data records monitored by the user is a constant number. Here, 10 records (circular array) are used to summarize the barrage data, and all barrages with the current timestamp are updated every second to the data record with index = timestamp%10, and the barrage is at the same time The refresh rate is fixed at 1s, which reduces the performance consumption of constant callback/rendering due to frequent data changes in the front end.

code demo

Part of the code sent by the user to the barrage:

exports.main = async (event, context) => {
// ...省略部分鉴权/黑名单/校验内容安全逻辑
let time = Math.ceil(new Date().getTime() / 1000);
// 插入弹幕
let res = await db.collection('danmu_all').add({
data: {
openid,
content,
time,
},
});
return {err: 0, msg: 'ok'};
};

Barrage merge processing:

exports.main = async (event, context) => {
// ....省略一部分非关键代码
// 只取其中100条弹幕，可动态调整
let time = 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;
}

The front end processes the message notification, and be careful not to repeat the watch. Among them, if the anonymous login developed by the cloud is turned on, the page on the H5 side can also use the synchronized barrage function:

this.watcher = db.collection('watch_collection').watch({
onChange: function(snapshot) {
for (let i of snapshot.docChanges) {
// 忽略非更新的信息
if (!i.doc || i.queueType !== 'update') {
continue;
}
switch (i.doc.type) {
// ...省略其他类型的消息处理
case 'danmu':
// 弹幕渲染
livePage.showServerBarrage(i.doc.msg);
break;
}
}
},
});

So far, the core function of the entire bullet screen has been fully realized.

Secondary optimization

After running for a period of time, I found that the barrage within a few seconds was occasionally discarded. After checking the execution log, I found that even if the timer is configured to execute once per second, it is not strictly executed once per second in actual production, and sometimes it skips 1- 3 seconds to execute, and redis is used here to mark the progress of the current processing. Even if there are skipped seconds, the unprocessed time can be backtracked for supplementary recording. Among them, the cloud function using redis tutorial can view the official cloud function using redis tutorial .

The user sends the bullet screen part of the code to add the mark code:

exports.main = async (event, context) => {
// ...省略部分鉴权跟校验内容安全代码
// ...省略插入代码

// 标记合并任务
await redisClient.zadd('danmu_task', time, time+'')
};

Barrage merge processing, note: only redis5.0 or above can support zpopmin command, if you need to purchase, you need to choose the right version.

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;
}
// 执行合并任务
await danmuMerge(time);
}
};

Security logic has also made certain strategies, such as rendering the sent barrage locally first, and when the client receives the barrage push, it will not render when it judges that the openid is itself, so that even if the user's barrage is filtered out, it can be displayed locally. , To retain a certain user experience.

In addition, the upper limit of the instance of a single cloud function is 1000. If you determine that the traffic is relatively large that night, you can consider using multiple cloud functions to share the traffic.

management background

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

Excerpted 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);
}
},
});

The read permission setting of the collection is also effective in real-time data push. If the permission is set to read only the user's own data, the data created by non-users cannot be monitored during monitoring.

Tips

At that time, I did not notice the problem of watch's restriction on database permissions. The database permissions are only readable and writable by the creator by default. The first initialization of the circular array is created on the client during the development process. The openid of the current user is added by default, causing other users to be unable to Read the merge data, the solution: delete the openid field or set the permissions to be readable by all people.

The read permission setting of the collection is also effective in the real-time data push. If the permission is set to read only the user's own data, the data created by the user cannot be monitored during monitoring.

III. Project achievements and value

Based on cloud functions, real-time data push, cloud database and other capabilities developed by the cloud, the project ran smoothly throughout the entire process. Even when the traffic peaked on the night of the press conference, the writing of the bullet screen was stable. In terms of monitoring (reading), the performance of watch can stably support millions of simultaneous online.

Finally, 2 R & D in just two days to complete the development and debugging barrage system . In terms of costs, the total cost of supporting the operation of the entire project’s barrage system is only about 100 yuan , mainly focusing on database reading and writing and cloud function calls (currently monitoring database real-time data functions are in the free stage, and will not be calculated to database reading In terms of cost), leaving behind the cost of other modules, the actual barrage module may only consume a small amount of tens of dollars, and the cost is much lower than expected. Compared with traditional instant messaging solutions, it saves more than tens of times.

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

• It comes with flexible expansion and contraction, which can resist instantaneous high concurrent traffic and ensure the smooth progress of live broadcast;
• The cost is cheap, only charges for cloud function calls and database read and write fees, and real-time data push is free to use, which is very suitable for projects;
• Security and stability, project access is based on the WeChat private link that comes with cloud development to ensure security;
• High degree of freedom, able to fit other development frameworks and services.