一步一步學習SignalR進行實時通訊 8 案例2

標籤（空格分隔）： signalr

目錄這講分析乙個案例，在乙個畫板上畫畫實時在其他客戶端上顯示。

在startup中進行配置：

public class drawing : hub

public task broadcastclear()
public override task onconnected()
}

用乙個二位陣列來快取畫板,一共就三個方法

broadcastclear()是點選清除按鈕時講整個畫板擦出

最後乙個就是畫畫方法,客戶端按下滑鼠畫畫時,呼叫該方法進行繪製。

color: 

clear canvas

頁面非常簡單,乙個選擇顏色的下拉框,乙個畫板,和乙個清除按鈕。

$(function () 

//畫板滑鼠事件
var buttonpressed = false;
canvas.mousedown(function () )
.mouseup(function () )
.mousemove(function (e) 
});var ctx = canvas[0].getcontext("2d");
//畫畫
function setpoint(x, y, color) 
//清除
function clearpoints() 
$("#clear").click(function () );
//signalr
var hub = $.connection.drawingboard;
//快取顏色
hub.state.color = colorelement.val(); 
var connected = false;
//改變顏色
colorelement.change(function () );
//當連線時且滑鼠按下時呼叫
canvas.mousemove(function (e) 
});$("#clear").click(function () 
});hub.client.clear = function () ;
hub.client.drawpoint = function (x, y, color) ;
//更新整個畫板
hub.client.update = function (points) }}
};$.connection.hub.start()
.done(function () );
});

一步一步學習SignalR進行實時通訊 6 案例

前台結束語 參考文獻 在這裡為了簡單起見,暫時不涉及到資料庫的操作。使用者資訊類userinfo 黃色別墅 public class userinfo 姓名 public string name 上線時間 public datetime connectedat public bool isonlin...

一步一步學習SignalR進行實時通訊 6 案例

原文 一步一步學習signalr進行實時通訊 6 案例 一步一步學習signalr進行實時通訊 6 案例1 前台 結束語參考文獻 在這裡為了簡單起見,暫時不涉及到資料庫的操作。使用者資訊類userinfo public class userinfo 姓名 public string name 上線時...

一步一步學習SignalR進行實時通訊 4 Hub

標籤 空格分隔 signalr 目錄建立hub的方法和建立persistentconnection非常類似 public class echohub hub public class echopersistentconnection persistentconnection 學過了persisten...