I have been trying to make a pictionary game using asp.net core 2.0 and signalr. The issue i have been getting is that I cannot use groups for some reason because it wont send back to the client. so i decided to make my own groups.
I am using authentication from .net core and been trying to use the username to send to the client. but nothing is going back to the client.
here is the viewmodel I am using to save info from the connected users. I have tried to use connectionid from the signalr hub but that keeps changing so it keeps using the wrong id to send.
public class GameLobbyViewModel
{
public string ID { get; set; }
public string LobbyName { get; set; }
public string[] PlayerNames { get; set; } = new String[4];
public string[] PlayerConnectionId { get; set; } = new String[4];
public string DrawWord { get; set; }
public int[] Points { get; set; } = new int[4];
}
Controller action that writes into the viewmodel:
public IActionResult Game(string id)
{
var lobby = _lobbyManager.GetLobby(id);
if (lobby == null)
return RedirectToAction("Index"); //redirect back to homepage for refresh of the lobby list
//Name of the loggedin user
string playerName = User.Identity.Name;
bool spot = false;
for (int i = 0; i < lobby.PlayerNames.Length; ++i)
{
if (String.IsNullOrEmpty(lobby.PlayerNames[i]))
{
//make sure that the same player cant be shown twice.
if (lobby.PlayerNames.Contains(playerName))
{
spot = true;
break;
}
else
{
lobby.PlayerNames[i] = playerName;
lobby.PlayerConnectionId[i] = _signalRHub.Context.ConnectionId;
spot = true;
break;
}
}
}
if (!spot) // this game is full...
return RedirectToAction("index");
return View(lobby);
}
this is my hub method where i send draw to the client I do everthing in the hub pretty much the same as this.
public async Task Draw(int prevX, int prevY, int currentX, int currentY, string color, int radius, string groupName)
{
var lobby = _lobbyManager.GetLobby(groupName);
int i = 0;
foreach (var item in lobby.PlayerConnectionId)
{
var playerConnection = lobby.PlayerNames[i];
if (playerConnection == null)
{
break;
}
else
{
await Clients.User(playerConnection).SendAsync("draw", prevX, prevY, currentX, currentY, color, radius);
i++;
}
}
}
javascript file where it invokes draw and where it receives to draw on the canvas.
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 500;
var canvasX = $(canvas).offset().left;
var canvasY = $(canvas).offset().top;
var last_mouseX = last_mouseY = 0;
var mouseX = mouseY = 0;
var mousedown = false;
var tooltype = 'draw';
var radius = 2;
var clr;
//makes a connection to drawhub.
var connection = new signalR.HubConnection('/draw');
//gets the mouse positions when you click
$(canvas).on('mousedown', function (e) {
last_mouseX = mouseX = parseInt(e.clientX - canvasX);
last_mouseY = mouseY = parseInt(e.clientY - canvasY);
mousedown = true;
});
//duh
$(canvas).on('mouseup', function (e) {
mousedown = false;
});
//this draws a line from the last mousepos to the current
//takes last positions current, color and radiuis of line
var drawCanvas = function (prev_x, prev_y, x, y, clr, radius) {
ctx.beginPath();
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = clr;
ctx.strokeStyle = clr;
ctx.lineWidth = radius;
ctx.moveTo(prev_x, prev_y);
ctx.lineTo(x, y);
ctx.lineJoin = ctx.lineCap = 'round';
ctx.stroke();
};
//clears the cansvas
var clear = function ()
{
ctx.clearRect(0, 0, canvas.width, canvas.height);
console.log('clearedededed');
}
//does stuff when you move the mouse
$(canvas).on('mousemove', function (e) {
mouseX = parseInt(e.clientX - canvasX);
mouseY = parseInt(e.clientY - canvasY);
if ((last_mouseX > 0 && last_mouseY > 0) && mousedown)
{
drawCanvas(mouseX, mouseY, last_mouseX, last_mouseY, clr, radius);
//invoke draw function method thingy from the draw hub.
var lobbyName = $('#lobbyName').val();
connection.invoke('draw', last_mouseX, last_mouseY, mouseX, mouseY, clr, radius, lobbyName);
}
last_mouseX = mouseX;
last_mouseY = mouseY;
});
//looks if you click the clear button and then invokes the clear method funciton thingy from draw hub.
document.getElementById("clearCanvas")
.addEventListener('click', function () {
var lobbyId = $('#lobbyName').val();
connection.invoke('clear', lobbyId);
});
var mouse_down = false;
//when the connection returns draw runs the draw funcion with all positions and color and radius received from hub.
connection.on('draw', function (prev_x, prev_y, x, y, clr, radius)
{
console.log("drawn");
drawCanvas(prev_x, prev_y, x, y, clr, radius);
});
//when connection returns clear runs the clear function
connection.on('clear', function () {
clear();
});
connection.on('test', function () {
console.log("Test");
});
//start the connection.
connection.start();
any help in how I can get this to work is appreciated.
Clients.User
takes in userId
, not a name.
Clients.Client
takes in connectionId
:
foreach (var item in lobby.PlayerConnectionId)
{
// var playerConnection = lobby.PlayerNames[i];
// await Clients.User(playerConnection)
await Clients.Client(item)
.SendAsync("draw", prevX, prevY, currentX, currentY, color, radius);
}