unity ui解决方案新玩法-Blazor 2.客户端场景和UI要能够存在一一绑定关系且有重连机制需求的实现
上一篇链接
这篇随笔是当前系列第二篇，详细说明客户端场景和UI要能够存在一一绑定关系且有重连机制需求的实现步骤。
1. 需求流程图
2. 具体实现步骤
2.1. 新建unity项目
- 点开unity hub，新建一个项目
- 设置项目版本和模板，当前使用2022.1.0b16版本下的URP示例模板
- 打开Package Manager，导入Embedded Browser（一个实现了嵌入浏览器的资源包，类似包还有很多）和Best HTTP/2（一个封装了更优雅方便的网络接口资源包）
2.2. 实现第一步：生成客户端Id
- 创建一个类ClientStateManager，继承MonoBehaviour，在Awake生命周期函数中生成对应的id
- 新建一个空的gameobject，将ClientStateManager以组件方式添加
2.3. 实现第二步：启动HubConnection后发起连接，将客户端Id发送到Hub
- 点开rider，新建一个项目，Type选用Blazor Server App
- 完善客户端相关代码，
- 完善服务端相关代码并启动客户端进行测试，
2.4. 实现第三步：Hub将对应连接放入组中，组名为客户端Id
- 完善服务端相关代码，
2.5. 实现第四步：定期Ping服务端
- 完善客户端相关代码，
- 完善服务端相关代码，
2.6. 实现第五步：服务端回复Ping
- 完善服务端代码，
2.7. 实现第六步：场景带上客户端Id进行访问
- 客户端新建Canvas，并新建一个它的子物体，添加对应组件并完善属性，
- 完善客户端代码，
- 将页面组件拉入ClientStateManager的webPage属性中，
2.8. 实现第七步+第八步：页面缓存Id，并返回
- 完善服务端代码，
- 运行客户端，此时应该显示current clientId：xxx而不是xxx is invalid clientId!
2.9. 实现第九步：用户手动重刷页面
- 添加一个按钮，点击事件添加与ClientStateManager的ReloadUI方法绑定
- 运行客户端并测试按钮功能，每次重新刷新都会触发新的页面与服务端连接
2.10. 实现第十一步：场景检测到自身与Hub断开
- 设置较短的超时检测时间和重连时间，关闭Ping消息
2.11. 实现第十二步：HubConnection重连成功后将客户端Id发送到Hub
- 设置重连时间和事件
*运行验证场景HubService与服务端Hub重连
3. 结尾的话
至此，场景与UI一一绑定关系并拥有重连机制的需求就完成了。运行验证后记得将Ping消息重新打开，祝各位看官顺利实现需求。
下一篇链接