Как реализовать бесплатный сетевой рисунок с помощью Fabric.js и ASP.net Core SignalR? ⇐ C#

[Anonymous]

Примечание: я пишу эту программу, используя C# Backend и Front End JavaScript, однако этот вопрос, вероятно, будет применяться только к нишевой группе пользователей, которые знакомы как с Fabric.js, так и с Asp.net Core Signalr (. Пользователи могут видеть, как кто -то рисует на доске в режиме реального времени). Я внедрил одну белую доску игрока (подумайте: холст, который позволяет бесплатно рисовать), используя Fabric.js, и я также реализовал простую программу чата с использованием ASP.net Core SignalR ( Not ASP.NET SignalR). Я пытаюсь подключить их, чтобы получить многопользовательскую доску, но я застрял на обновлении холста на экране всех пользователей. Я провел исследования в Интернете, и есть примеры, которые делают то, что я хочу делать (см.: Http://drawsignal.azurewebsites.net/), но используя сигнал ASP.NET, а не ASP.NET CORE SignalR. Они разные и несовместимы (источник: https://learn.microsoft.com/en-us/aspne ... etcore-2.2), поэтому я застрял на том, что делать. < /p>

Я предоставил свой код ниже. Если кто -то может дать рабочий пример многопользовательского холста с использованием Fabric.js и ASP.NET Core SignalR, это будет очень оценено. Спасибо! < /p>

fabric.js Бесплатный рисунок: < /p>

document.getElementById("drawButtonStart").addEventListener("click", function (event) {
canvas.isDrawingMode = true; //this allows free drawing on canvas
event.preventDefault();
});
< /code>

Чаты с помощью ASP.net Core SignalR (код JavaScript на стороне клиента): < /p>

var connection = new signalR.HubConnectionBuilder().withUrl("/chatHub").build();

connection.on("ReceiveMessage", function (user, message) {
var msg = message.replace(/&/g, "&").replace(//g, ">");
var encodedMsg = user + " says " + msg;
var li = document.createElement("li");
li.textContent = encodedMsg;
document.getElementById("messagesList").appendChild(li);
});
< /code>

Комната чата на стороне сервера: < /p>

public class ChatHub : Hub
{
public async Task SendMessage(string user, string message)
{
await Clients.All.SendAsync("ReceiveMessage", user, message);
}
}


Подробнее здесь: https://stackoverflow.com/questions/571 ... re-signalr