有手就行!30分钟一起开发多人实时互动应用

WorkShop 背景

随着远程协作的需求日益增加,越来越多的开发者参与到在线互动应用的开发中。从零开始编写一款多人实时互动应用不是一件轻松的事情,除了开发应用本身之外,还需要处理各种复杂的问题如状态同步、消息互通、冲突处理等。

此次活动,我们邀请各位开发者和声网互动白板团队一起尝试基于白板同步引擎快速实现一个多人实时互动应用。此篇文章带领大家熟悉一下开发自定义白板插件的流程。

目标

  • 获取官方白板插件模板
  • 跑通官方白板插件 Demo
  • 开发自己的白板插件应用

正文

如下图,官方实现了一些开源插件,大家感兴趣可以前往 Netless APP 查看,一个小窗口插件就是一个 Netless APP。

官方会偏向于实现通用性质的插件,假如我们想基于自己的场景业务来开发插件,该如何做呢?

今天我们先带领大家熟悉一下开发自定义白板插件的流程,最后再附上一个基于模版开发的双人对战 TicTacToe 小游戏。

获取官方白板插件模板

快速开始:使用插件开发模版

为了便于开发,我们直接使用官方提供的模版进行开发,模版不同分支提供了多种脚手架,包括原生 Vanilla、React、Vue等,我们可以选择自己熟悉的脚手架进行开发。

  • 第一步:点击模版仓库右上角 Use this template 生成一个属于你自己的仓库,为这个仓库命名,同时勾上 Include all branches

  • 第二步:把代码 Clone 下来;找到目录下的 .env.example 文件复制一份,重命名为 .env 后,在里面填写必须的白板房间信息

  • 第三步(已有房间信息可跳过此步):获取白板房间信息需要注册声网白板服务获取 SDK Token,并签出 UUID 和 Room Token,具体步骤可以参考文档开启和配置互动白板服务加入白板房间(使用 Fastboard SDK)

  • 第四步:在根目录执行 npm install 安装模版相关依赖

  • 第五步(可选):默认分支是原生 Vanilla,这里我们可以根据自己的情况切换分支到自己熟悉的脚手架,然后执行 npm start 进行本地开发

接下来我们就可以查看模版 demo,是一个可以多人互动同步的计数器。

白板核心同步相关 API

查看模版目录下 /src/index.js,可以发现:

每个应用是通过 { kind, setup } 形式定义的,在 setup 回调内可以定义如何渲染应用:

let box = context.getBox() // box 为插件所在的窗口
box.mountStyles(`.my-app { color: red }`) // 挂载 <style>

let btn = document.createElement('button')
btn.className = 'my-app'
box.mountContent(btn) // 挂载 DOM

let count = 0
btn.textContent = String(count)
btn.onclick = function increase() {
count++
btn.textContent = String(count)
}

上面是一个单机的 counter 应用实现,为了把它变成同步应用,我们需要把 count 的值同步给所有端,可以使用 context.createStorage 来解决这个问题:

// 创建并连接上同步服务 storage
let storage = context.createStorage("counter", { count: 0 })

// 从同步状态 storage.state 中获取最新的 count
btn.textContent = String(storage.state.count)

// 点击时,保存新状态到同步服务
btn.onclick = function increase() {
storage.setState({ count: storage.state.count + 1 })
}

// 新的 count 会触发这个回调
storage.addStateChangedListener(function refresh() {
btn.textContent = String(storage.state.count)
})

注意到该应用是如何从 本地 变成 在线 的:btn.onclick 不会直接修改 UI 内容,而是通过同步状态服务 storage 来触发更新。

这并不会造成延迟导致用户体验下降,因为本地会优先应用上修改,当获取到同步服务最新信息时会再进行一次检查。

无论有多少人在同时操作这个 storage,同步服务可以保证所有人最终的状态一致。

以上三个 API 是最基础的,编写互动插件都将会使用到的。

Netless App 还提供了一些其他有用的接口,包括发送全局事件、在插件上挂载白板来书写等等,详情可以查看自定义 APP 文档

在理解了同步 API 基础使用后,我们开始基于模版开发一个简单的 TicTacToe。

跑通官方白板插件 Demo

开发 TicTacToe(这里基于 React 分支进行开发)

第一步:添加 APP 类别 TicTacToe

第二步:添加 TicTacToe 逻辑中需要同步到 storage 的变量:棋盘、下棋双方、默认先下方

第三步:更新棋子状态到 storage

以上是核心的三个步骤,完整代码可以前往 GitHub 查看下载。

根据 Readme 跑起来的效果如下:

开发自己的白板插件应用

场景化插件推荐

如果你也想试试手,开发一个白板互动插件玩一下,这里提供几个方向供大家参考。

  • 互动游戏相关
    • 骰子
    • 你画我猜
    • 围棋、五子棋
  • 在线教育场景互动小工具
    • 答题器
    • 抢答器
    • 随机选人
    • 定时器
  • 在线协作工具
    • 思维导图
    • 流程图
  • 接入第三方插件
    • 引入 bilibili、YouTube 播放器,一起看视频
    • 引入 Google Doc 在线文档

要保证互动插件的操作过程和结果可以同步给房间内的所有人,才算开发完成。

参考截图:

PS:附件是插件开发模版和 TicTacToe 的源码,有需要的朋友可以直接下载。
community-app-template-vanilla.zip (9.3 KB)

TicTacToe-react.zip (14.1 KB)

推荐阅读
作者信息
Leooel
TA 暂未填写个人简介
文章
4
相关专栏
本专栏仅用于分享音视频相关的技术文章,与其他开发者和 Agora 研发团队交流、分享行业前沿技术、资讯。发帖前,请参考「社区发帖指南」,方便您更好的展示所发表的文章和内容。