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

电子画板开发需求

教师端需求：  

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

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

3. 教师能够解散房间

4. 基本的画板功能

 

学生端需求：

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

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

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

4. 基本的画板同步功能

本文原文地址：

教师端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