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

2022-02-03 11:21:21 字數 4251 閱讀 9008

目錄

標籤（空格分隔）： signalr

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

在startup中進行配置：

public


void


configuration


public


class


drawing : hub


public task broadcastclear()


public


override task onconnected()


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

當客戶端連線時呼叫update()方法重新整理整個畫板

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

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

xmlns="">


drawing boardtitle>


src="scripts/jquery-1.6.4.min.js">


script>


src="scripts/jquery.signalr-2.0.0.min.js">


script>


src="/signalr/js">


script>


src="scripts/drawingboard.js">


script>


div 


canvas 


style>


head>


for="color">color: label>


id="color">


select>


div>


id="canvas"


width="300"


height="300">


canvas>


id="clear">clear canvasbutton>


div>


div>


body>


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

$(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

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

在startup中進行配置：

public


void


configuration


public


class


drawing : hub


public task broadcastclear()


public


override task onconnected()


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

當客戶端連線時呼叫update()方法重新整理整個畫板

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

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

xmlns="">


drawing boardtitle>


src="scripts/jquery-1.6.4.min.js">


script>


src="scripts/jquery.signalr-2.0.0.min.js">


script>


src="/signalr/js">


script>


src="scripts/drawingboard.js">


script>


div 


canvas 


style>


head>


for="color">color: label>


id="color">


select>


div>


id="canvas"


width="300"


height="300">


canvas>


id="clear">clear canvasbutton>


div>


div>


body>


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

$(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進行實時通訊 8 案例2

標籤 空格分隔 signalr 目錄這講分析乙個案例，在乙個畫板上畫畫實時在其他客戶端上顯示。在startup中進行配置 public class drawing hub public task broadcastclear public override task onconnected 用乙個二...