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

2022-01-13 16:02:10 字數 1466 閱讀 7514

標籤(空格分隔): signalr

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

在startup中進行配置:

public class drawing : hub

public task broadcastclear()

public override task onconnected()

}

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

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

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...