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

电子画板开发需求

教师端需求：  

1. 教师登录后能创建房间（教室）

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

3. 教师能够解散房间

4. 基本的画板功能

 

学生端需求：

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

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

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

4. 基本的画板同步功能

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

教师端UI设计

学生端UI设计

后端服务设计

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

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

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

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

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

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

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

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

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

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

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

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

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

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

电子画板演示效果

源码GitHub地址

https://github.com/itwmike/SignalRStudy