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

构建产物会生成到 build 目录下。

然后我们发布到静态托管即可（托管前，请先开通静态网站[7]）：

代码语言：javascript复制

$ cloudbase hosting:deploy ./build -e your-env-id

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

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

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

《英雄联盟线下赛事背后的技术实践》
《一场峰会下的前端技术实践与思考》
《腾讯高级前端工程师支招，云开发实现小程序打赏和提现》

项目代码：https://github.com/TencentCloudBase/cloudbase-realtime-demo

参考资料

[1]匿名登录: https://docs.cloudbase.net/authentication/anonymous.html

[2]数据库实时推送: https://docs.cloudbase.net/api-reference/web/database.html#shu-ju-ku-shi-shi-tui-song

[3]数据库写: https://docs.cloudbase.net/database/insert.html

[4]匿名登录: https://docs.cloudbase.net/authentication/anonymous.html

[5]实时数据推送: https://docs.cloudbase.net/api-reference/web/database.html#shu-ju-ku-shi-shi-tui-song

[6]云开发静态网站: https://docs.cloudbase.net/hosting/

[7]开通静态网站: https://docs.cloudbase.net/hosting/#kai-tong

[8]绑定自定义域名: https://docs.cloudbase.net/hosting/custom-domain.html

[9]主页: https://www.cloudbase.net/

[10]官方文档: https://docs.cloudbase.net/

云开发（CloudBase）是一款云端一体化的产品方案，采用 serverless 架构，免环境搭建等运维事务，支持一云多端，助力快速构建小程序、Web应用、移动应用。
技术文档：https://www.cloudbase.net/
微信搜索：腾讯云云开发，获取项目最新进展

云开发CloudBase

0 人点赞

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

参考资料