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消息重新打开，祝各位看官顺利实现需求。
下一篇链接

标签：Hub,实现,unity,UI,ui,重连,Id,服务端,客户端
来源： https://www.cnblogs.com/momiji-jinjin/p/unity-ui-new-solution-blazor-2.html