社区/学习指南/Web云开发应用实战指南

在线五子棋

一个简单的五子棋小游戏,如何通过云开发的巧妙接入,变成可以赛局直播的在线五子棋小游戏,快来体验尝试吧
使用云开发的数据库、实时数据库监听,登录验证使用匿名登录。

创建云开发环境

一、新建【按量计费云开发环境】

进入腾讯云云开发控制台-创建环境,选择按量计费环境,环境名称可以自定义设置。如果已有按量计费环境则可以跳到下一步。
1.png

二、开通静态网站托管服务

进入进入静态网站控制页,选择刚才创建好的环境,开通静态网站托管服务。
2.png

三、创建数据库

进入数据库控制页,添加 1 个集合;集合名字为 gobang
3.png

四、开启匿名登录

进入环境设置页-登录授权的登录方式中,勾选匿名登录
4.png

下载并部署源码

一、下载源码

访问github 仓库,下载源码到本地。源码项目目录如下:
5.png

二、本地运行

将项目 webviews/index.html 以 http 的形式运行,可使用 IDE 工具 vscode,hbuilder。在浏览器的地址栏中确定 url 地址,比如例子中,域名地址为 127.0.0.1:5500
7.png

四、配置本地开发的安全域名

如果想在本地开发,必须要在云开发中配置本地的安全域名才能够正常调试开发。
进入环境设置页-安全配置,配置 WEB 安全域名,在这里以 127.0.0.1:5500 举例,请按照自己的实际域名配置
8.png

五、填写云开发环境 ID 到项目中

云开发是通过环境 ID 来判定与特定环境进行数据通信的,所以在项目中要配置所有的相关环境 ID 为自己的 ID。(建议熟练后,使用配置文件形式来配置)

  • 进入环境总览页,复制获取云开发环境 ID。
    9.png

  • 打开项目目录,将以下文件中标注有【云开发环境 ID】处替换成自己的云开发环境 ID

  • cloudfunctions/gobangselete/index.js 第 3 行
    10.png

  • cloudbaserc.js 第 2 行
    11.png

  • webviews/js 下的 cloud-index.js、cloud-show.js 文件,第 5 行
    111.png

本地项目开发

一、说明

webviews/js 下的 index.js 和 show.js 都是本地五子棋的一些逻辑。其中 index.js 里描述的都是本地五子棋有关的操作,包括棋盘的绘制,AI 的落子,监听落子等。
而 cloud-index.js 是外挂的云开发的相关支持。

关于 cloud-index.js 内的代码逻辑,请参照云开发文档学习和理解。

二、将五子棋的每个落子同步到数据库中

在 index.html 中的函数 start(),修改为如下代码:
image.png

此代码会调用 cloud-index.js 中的 cloudinit 函数,执行匿名登录,并在数据库中写入一个文档,在之后的每一次落子都会更新数据库的值。
更新触发的是 cloud-index.js 中的 updatecall 函数。

三、使用实时数据库监听文档变化

show.html 文件的作用是监听五子棋棋盘并同步更新,在 script 标签中新增如下代码:
image.png

此代码使用了云开发的数据库监听函数,当数据文档有变化时,会触发 onchange,并调用 downcode 函数,执行同步绘制落子。

本地测试项目可用性

一、重新启动项目,进入页面

点击开始落子,将会提示是否开启分享,确认后选择先下子还是后下子
23.png

24.png

二、观看棋局

如果点击开启分享,则在棋盘下方会有观看链接
25.png

点击链接即可跳转到 show 页面
26.png

三、总结

如果本地验证都没有问题,则配置没有问题。如果出现任何一个步骤的错误提示,则 F12 控制台查看并排除原因,一般是环境 ID 写错错误导致。

配置定时删除云函数

一、说明

现在还有一个遗留的问题,那就是在数据库里,在棋局结束后没有自主销毁,会导致数据库里越来越多的无效记录。需要把这个记录定时清理一下。

二、安装依赖

在 cloudfunctions/gobangdelete 下右键在终端打开
18.png

在终端中输入以下命令,安装依赖:
image.png

三、部署云函数

在 cloudfunctions/gobangdelete 目录,右键执行部署云函数(上传全部文件)。在一开始使用时会出现登录,按照提示完成登录步骤即可。【如果没有此选项,请前往云开发 VSCODE 插件安装并学习使用】
20.png

上传至静态存储

将本地验证成功的项目上传至静态存储中。在 webviews 目录右键点击,上传至静态网站根目录
31.png

进入云开发静态网站管理页,可以看到已上传的项目。
32.png

进入云开发静态网站设置页,访问默认域名网址即可进入线上项目
33.png

34.png

关于自定义域名和网站对外开放

云开发提供了完备的 web 端资源服务,但是一个对外公开使用的 web 项目需要有自己的备案域名,需要受到监管。所以,在正式对外推出之前,需要将云开发提供的默认域名替换成自己已经备案的域名

  • 前往云开发静态网站设置页,在【域名信息】下点击添加域名按钮,填写已经备案的域名。域名需要配有 SSL 证书,腾讯云下域名会自动监测证书;如果是非腾讯云旗下域名,则需要上传 SSL 证书。
  • 需要等待域名添加状态为【已启动】后,才可以去域名解析中配置 CNAME。
  • 前往环境设置页-安全配置,在 WEB 安全域名中删除云开发的默认域名,只保留自定义域名。
  • cloudfunctions/functions/getFile/index.js 的 AllowOriginList 数组中,将默认域名更换成自定义域名,保存更新。

附件

本文出自 云开发团队