ASP.NET Core 装X利器SignalR:电子画板

时间:2022-11-11 15:06:52

电子画板开发需求

教师端需求:

  1. 教师登录后能创建房间(教室)

  2. 学生加入房间后有通知提醒

  3. 教师能够解散房间

  4. 基本的画板功能

 

学生端需求:

  1. 能够切换不同在线的房间

  2. 能够收到新建房间的通知

  3. 能够收到房间解散的通知

  4. 基本的画板同步功能

本文原文地址:https://www.limitcode.com/detail/5c45ca572d18e503f0362757.html

教师端UI设计

ASP.NET Core 装X利器SignalR:电子画板

ASP.NET Core 装X利器SignalR:电子画板

学生端UI设计

ASP.NET Core 装X利器SignalR:电子画板

后端服务设计

首先新建StudentController和TeacherController,用于承载学生端和教师端的界面,然后分别添加Index Action并生成各自的Index.cshtml。

ASP.NET Core 装X利器SignalR:电子画板

ASP.NET Core 装X利器SignalR:电子画板

视图创建好编写各自的UI,实现基本的布局和画板功能。此处就不贴代码了,源码已托管到github,在文章末尾有链接。

新建 SignalRChat 文件夹并添加继承 Hub 类 的TeacherHub.cs SignalR 集线器,然后在 Startup 中注册该集线器。

ASP.NET Core 装X利器SignalR:电子画板

我们的电子画板项目是面向多教师的,每个教师可以开设自己的教学房间,房间的概念在 SignalR 中称其为 Group。

新建 Models 文件夹并添加 RoomInfo.cs 类,该类对房间对象进行抽象,其有如下属性:

ASP.NET Core 装X利器SignalR:电子画板

在 TeacherHub 中新建字典类型的静态字段 _TeacherRooms 保存教师创建的教师信息,此处我们使用 C#线程安全的字典对象 ConcurrentDictionary。为啥要使用静态字段?因为客户端每次连接hub的时候都会创建hub的新实例。

ASP.NET Core 装X利器SignalR:电子画板

做完上面的这些,教师端就可以创建房间了。教师端创建房间的核心代码如下:

ASP.NET Core 装X利器SignalR:电子画板

学生端登录后能够获取到所有在线的房间,并可以随意的切换(加入)这些房间,获取所有房间的核心代码如下:

ASP.NET Core 装X利器SignalR:电子画板

房间创建后教师就可以在画板上操作了,对canvas 的每一次操作行为都会经过Hub推送给加入该房间的所有客户端。并且学生加入房间后应该能够获取到教师之前的讲解内容,这就要求服务端要存储这些操作行为。

在 Models 文件夹下新建 CanvasPoint.cs ,该类抽象 canvas 的操作行为,其定义如下:

ASP.NET Core 装X利器SignalR:电子画板

在 TeacherHub 中添加 _CanvasPoint 静态字段用于保存每个房间中教师对 canvas 的操作行为,该字段为 ConcurrentDictionary 字典类型,key 为房间编号,value 为canvas操作行为的集合。

ASP.NET Core 装X利器SignalR:电子画板

将教师端教师每次对canvas的操作保存到_CanvasPoint 的核心实现:

ASP.NET Core 装X利器SignalR:电子画板

学生端订阅 ReceivePoint 事件,获取到消息后绘制canvas。

ASP.NET Core 装X利器SignalR:电子画板

到此电子画板的基本功能都已经实现了,由于篇幅问题,房间解散等其他功能的代码就不贴了,大家看源码吧。

电子画板演示效果

ASP.NET Core 装X利器SignalR:电子画板

源码GitHub地址

https://github.com/itwmike/SignalRStudy