1个人3步轻松搞定“实时聊天室” | 云开发实战

用云开发来快速开发一个实时在线聊天室。

这是一个由 create-react-app 快速生成的脚手架项目，所以大部分构建和工程化的细节这里就略过不谈了，我们直接来看代码实现，大致上实现了三个功能，括号中是使用的云开发能力：

登录（匿名登录[1]）
实时同步消息（数据库实时推送[2]）
发送消息（数据库写[3]）

首先是我们的初始化流程，先使用匿名登录[4]，然后建立实时数据推送[5]的连接：

代码语言：javascript

复制

asyncfunction init() {
  // 使用匿名登录
  await auth.anonymousAuthProvider().signIn();
// 使用 refreshToken 的前 6 位作为 uid

setUid(auth.hasLoginState().credential.refreshToken.slice(0, 6));
// 建立实时数据推送连接

await db

.collection("messages")

.where({})

.watch({

onChange(snapshot) {

setList(snapshot.docs);

setLoading(false);

},

onError(err) {

console.log(err);

},

});

}

建立实时连接之后，集合中的任何变化，都会触发 onChange() 回调，然后我们使用 setList() 来更新界面上的消息数据。

当然只读消息是不够的，我们还需要发送消息，具体实现非常简单，可以看 sendMessage() 方法，直接使用 add() 方法向数据库写入数据就可以了：

代码语言：javascript

复制

// 发送消息

asyncfunction sendMessage() {

const message = {

timestamp: newDate().getTime(),

text,

uid,

};

await db.collection("test").add(message);

// 清空输入栏

setText("");

}

当然以上只是局部的代码片段，整体代码可以参考：

https://github.com/TencentCloudBase/cloudbase-realtime-demo/blob/master/src/App.js

开发完毕之后，我们便可以使用 云开发静态网站[6] 来托管我们的这个聊天室 Web 应用。

首先我们构建我们的应用：

代码语言：javascript

复制

 npm run build</code></pre></div></div><p>构建产物会生成到 <code>build</code> 目录下。</p><p>然后我们发布到静态托管即可（托管前，请先<strong>开通静态网站[7]</strong>）：</p><div class="rno-markdown-code"><div class="rno-markdown-code-toolbar"><div class="rno-markdown-code-toolbar-info"><div class="rno-markdown-code-toolbar-item is-type"><span class="is-m-hidden">代码语言：</span>javascript</div></div><div class="rno-markdown-code-toolbar-opt"><div class="rno-markdown-code-toolbar-copy"><i class="icon-copy"></i><span class="is-m-hidden">复制</span></div></div></div><div class="developer-code-block"><pre class="prism-token token line-numbers language-javascript"><code class="language-javascript" style="margin-left:0"> cloudbase hosting:deploy ./build -e your-env-id

发布完成后，你便可以通过 https://xxxx.tcb.qcloud.la/xxxx 的来访问你的应用了。进一步，你还可以为它绑定自定义域名[8]。

PS：实际上，云开发的主页[9]和官方文档[10]，就是这样托管的（毕竟做云服务的，最重要的就是 Eating your own dog food嘛）。

当然，除了这个实战 Demo 以外，还可以看看一些真正业务的实践：