電子畫板開發需求 教師端需求： 教師登錄後能創建房間（教室） 學生加入房間後有通知提醒 教師能夠解散房間 基本的畫板功能 學生端需求： 能夠切換不同線上的房間 能夠收到新建房間的通知 能夠收到房間解散的通知 基本的畫板同步功能 本文原文地址：https://www.limitcode.com/det ...
電子畫板開發需求
教師端需求：
-
教師登錄後能創建房間（教室）
-
學生加入房間後有通知提醒
-
教師能夠解散房間
-
基本的畫板功能
學生端需求：
-
能夠切換不同線上的房間
-
能夠收到新建房間的通知
-
能夠收到房間解散的通知
-
基本的畫板同步功能
本文原文地址：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
