# 课程学习
训练营所给学习指导:
云开发数据库支持监听集合中符合查询条件的数据的更新事件。
# 阶段要求
在上一阶段页面中,实现时刻监听用户的新增,并同步给所有打开页面的用户,请使用数据库watch配置监听。当有新增用户访问时,总用户数应在所有打开的页面中更新。
# 数据库实时推送
云开发数据库支持监听集合中符合查询条件的数据的更新事件。
注意,允许不指定查询条件,但是如果集合数据量较大时候,可能造成监听失败。
# 作业思路
官方所给的实现思路:
See More
const cloudbase = require("@cloudbase/js-sdk");
const app = cloudbase.init({
env: "xxxx"
});
// 1. 获取数据库引用
var db = app.database();
const watcher = db
.collection("todos")
.where({
// query...
})
.watch({
onChange: function (snapshot) {
console.log("snapshot", snapshot);
},
onError: function (err) {
console.error("the watch closed because of error", err);
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
修改原有的js代码实现数据库文档监听:
See More
const app = cloudbase.init({
env: "lime2019-3gbmvzpice4d3b3a"
});
const auth = app.auth();
const db = app.database();
let uid = null
// 匿名登录
async function login(){
await auth.anonymousAuthProvider().signIn().then((res)=>{
auth.getLoginState().then(loginState=>{
uid = loginState.user.uid
db.collection('user').where({
_id:uid
}).get().then(res => {
if(res.data.length >0 ){
console.log('已存在!')
}else{
db.collection('user').add({
_id:loginState.user.uid,
indue:db.serverDate()
})
}
})
// 获取网站名字
db.collection('name').where({
_id:"name"
}).get().then(res => {
document.getElementById("name").innerHTML=res.data[0].value;
})
// 获取积极的话
db.collection('title').get().then(res => {
// 随机获取一条
let index = Math.floor(Math.random() * (res.data.length) )
document.getElementById("title").innerHTML=res.data[index].value;
})
setTimeout(()=>{
// 获取用户是第几位访问者
db.collection('user').orderBy("indue","asc").get().then(res => {
console.log(res.data)
for(let i =0 ;i<res.data.length;i++){
if(res.data[i]._id === uid){
document.getElementById("order").innerHTML=i+1;
}
}
})
},500)
// setTimeout(()=>{
// // 共有访问者
// db.collection('user').count().then( res => {
// document.getElementById("number").innerHTML=res.total;
// })
// console.log("登录成功!",loginState.user.uid)
// },400)
// 监听
setTimeout(()=>{
db.collection('user').watch({
onChange: res => {
document.getElementById("number").innerHTML=res.docs.length
},
onError: function (err) {
console.error("数据库监控出现错误~~~", err);
}
});
},400)
})
}).catch((err)=>{
console.log("登录失败",err);
})
}
login();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
在此处,我对部分代码进行了修改。加上了定时器,主要是上一阶段发布之后,访问时发现,有时候访问人数并没有正确加载,加载不出来。
问题原因:
可能是因为匿名登录是在获取访问用户信息之后的,JS的机制问题,其实也可以选择将访问用户信息放在匿名登录函数中。
由于云开发环境的资源必须有登录信息才可以使用,所以会查询用户信息失败,所以给获取访问者数量和序列号的函数加了定时器。