有手就行！30分钟一起开发多人实时互动应用 - 专栏

WorkShop 背景

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

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

目标

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

正文

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

image1244×610 117 KB

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

今天我们先带领大家熟悉一下开发自定义白板插件的流程，最后再附上一个基于模版开发的双人对战 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，是一个可以多人互动同步的计数器。

image2866×1718 190 KB

白板核心同步相关 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。