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