I seem to have an issue with SignalR's JS Client Hub.
The problem is that the 'on' handler does not seem to work - it generates no error but doesn't receive any signals sent by the server.
The code below shows an extract where I call the server (using the invoke) which works fine - then on the server I call back to acceptHubData which should be picked up on the client but isn't.
My objective is when navigating to pages that each page will open a connection to a specific hub and releases this connection when the user moves to another page!!
EDIT: using the following code snippet works but I wonder why the code further below using the 'on' event doesn't work!
var superHub = $.connection.mySuperHub;
superHub.client.acceptHubData = function (data) {
$('<li>hello there' + data + '</li>').prependTo($('#ul1'))
}
$.connection.hub.start().done(function () {
$('<li>done phase 1</li>').prependTo($('#ul1'))
});
Any help would be much appreciated!
This is the client code (in js)
$(document).ready(function () {
var myHub;
try {
var connection = $.hubConnection();
connection.start().done(function () {
myHub = connection.createHubProxy("mySuperHub");
myHub.on('acceptHubData', function (data) {
alert(data); // THIS IS NOT CALLED!
});
myHub.invoke('AcceptSignal', "hello from the client2");
});
}
catch (e) {
alert(e.message);
}
});
This is the Server code:
[HubName("mySuperHub")]
public class MyHub : Hub
{
private readonly HubEngine _hubEngine;
public MyHub() : this(HubEngine.Instance) { }
public MyHub(HubEngine hubEngine)
{
_hubEngine = hubEngine;
}
public void AcceptSignal(string msg)
{
Clients.Caller.acceptHubData("hi");
Clients.All.acceptHubData("hi");
}
}
You can still use the on method to add events for JS client hub method calls in the latest version of SignalR, but if you do not add any event listeners to a hubProxy before calling hubConnection.start(), you will not be subscribed to the hub. SignalR subscribes to the hubs you have event handlers for when the hubConnection starts. If you are not subscribed to your hub, adding any events to that hub after start() won't work.
If you add at least one event listener to the hub before start(), even if it doesn't do anything, you can then add any additional event handlers you want to the hub using on after start() and your handlers will be called.
It doesn't matter if you add an event using hubProxy.on('eventName', function (... or autogeneratedHubProxy.client.eventName = function (... before you call start(), but only on will successfully add event listeners after start() is called.
Not sure which version of SignalR you are using, but I have had more success using the following syntax on my server:
var context = GlobalHost.ConnectionManager.GetHubContext<MyHub>();
context.Clients.All.acceptHubData("hello");
and on my clients:
myHub.client.acceptHubData = function (data) {
console.log(data);
}
Related
I implemented SignalR to my project. But I have problem sending private message. I am sending 'toConnectionID' from page.
ChatHub.cs
public void LoadPrivateMessages(string toUserName,string toConnectionID)
{
var chatHub = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
string fromUserName = Context.QueryString["userName"].ToString();
string fromConnectionID = Context.ConnectionId;
List<ChatMessageDetail> currentMessages = cachePrivateMessages.Where(x => x.ToUserName == toUserName && x.FromUserName == fromUserName && x.ToConnectionID==toConnectionID && x.FromConnectionID==fromConnectionID).ToList();
chatHub.Clients.Client(toConnectionID).privateMessagesHistory(currentMessages);
}
My currentMessages list is filling. I am OK here. But I can't take messages to page.
Javascript
chatHub.client.privateMessagesHistory = function (data) {
console.log(data);
};
My console screen is null after this JavaScript code.
Edit :
That is my connection code in document.ready function. Second is sending information about receiver.
var chatHub = $.connection.chatHub;
$.connection.hub.qs = { "userName": "#Session["userName"]" };
$.connection.hub.start().done(function () {
console.log("Connection OK !");
});
$(document).on('click','.onlineUser', function () {
var userName = $(this).attr('id');//That is which user to send(Receiver)
var toConnectionID = $(this).attr('connectionID');
chatHub.server.loadPrivateMessages(userName, toConnectionID);
$('.privateMessagediv').show();
$('.userName').html("");
$('.userName').append("<h4>" + userName + "</h4>");
$('.btnSendingPrivateMessage').attr('id', userName);
$('.btnSendingPrivateMessage').attr('connectionid', toConnectionID);
chatHub.client.privateMessagesHistory = function (data) {
$('#privateChatBox').append(data);
};
});
Edit 2 :
I solved issue.
chatHub.Clients.Client(fromConnectionID).privateMessagesHistory(currentMessages);
instead of
chatHub.Clients.Client(toConnectionID).privateMessagesHistory(currentMessages);
My original suspicion was with the toConnectionId, but after examining your privateMessageHistory callback registration, it's more likely a timing issue.
You need to setup the client callback before the hub .start().
From Microsoft:
Normally you register event handlers before calling the start method
to establish the connection. If you want to register some event
handlers after establishing the connection, you can do that, but you
must register at least one of your event handler(s) before calling the
start method
There's no need to place your callback registration in the click event.
var chatHub = $.connection.chatHub;
$.connection.hub.qs = { "userName": "#Session["userName"]" };
// callback first
chatHub.client.privateMessagesHistory = function (data) {
$('#privateChatBox').append(data);
};
// start the hub connection - note chatHub is different from your .hub
chatHub.start().done(function () {
console.log("Connection OK !");
});
I didnt think about this but this code is sending the game model to all clients. I need to use the GameID from this controller action and only target the clients watching that game. How do I do that?
Publish Controller Action
public UpdateGameResponse UpdateGame(int gameId)
{
...
var model = Game.Create(XDocument.Load(httpRequest.Files[0].InputStream)).Parse();
GlobalHost.ConnectionManager.GetHubContext<GameCastHub>().Clients.All.receiveUpdates(Newtonsoft.Json.JsonConvert.SerializeObject(model));
}
Hub
[HubName("gamecastHub")]
public class GameCastHub : Hub
{
}
Client
var connected = false;
var gamecastHub = $.connection.gamecastHub;
if (gamecastHub) {
gamecastHub.client.receiveUpdates = function (updates) {
console.log('New updates received');
processUpdates(updates);
};
connectLiveUpdates();
$.connection.hub.connectionSlow(function () {
console.log('Live updates connection running slow');
});
$.connection.hub.disconnected(function () {
connected = false;
console.log('Live updates disconnected');
setTimeout(connectLiveUpdates, 10000);
});
$.connection.hub.reconnecting(function () {
console.log('Live updates reconnecting...');
});
$.connection.hub.reconnected(function () {
connected = false;
console.log('Live updates reconnected');
});
}
I suggest using either the connection Id associated with each connection to the hub or creating groups.
Note: Each GameID must have its own connection to the hub in order to use the connection Id solution.
I prefer to use groups from personal experience but either way can be done.
To create a group in the hub you will need to create a method in your hub class.
public async void setGroup(string groupName){
await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
}
Secondly, you will need a JS function on the client side to call the hub function.
$.connection.hub.invoke("setGroup", groupName).catch(err => console.error(err.toString()));
In your case, you can place your gameID as the groupname and then call GlobalHost.ConnectionManager.GetHubContext<GameCastHub>().Clients.Groups(gameID).receiveUpdates(Newtonsoft.Json.JsonConvert.SerializeObject(model));
To retrieve the connection Id:
var _connectionId = $.connection.hub.id;
Then send the connection Id to the server,
and proceed to using the call GlobalHost.ConnectionManager.GetHubContext<GameCastHub>().Clients.Clients.Client(_connectionId).receiveUpdates(Newtonsoft.Json.JsonConvert.SerializeObject(model)); to call that specific connection.
Below is the code I wrote for SignalR implementation based on ASP.Net documentation and I use manual proxy creation method. I Could see only negotiate happening and received a Connection id.
I can't see OnConnected method in my hub gets executed when I start connection. According to the note section in the document I have attached event handler before I call start method
SignalR Hub
public class MyTestHub: Hub
{
private static Dictionary<int, List<string>> userConnections
= new Dictionary<int, List<string>>();
public override Task OnConnected()
{
RegisterUserConnectionInMap();
return base.OnConnected();
}
}
Startup.cs
app.Map(
"/signalr",
map =>
{
var hubConfiguration = new HubConfiguration { EnableDetailedErrors = true};
map.RunSignalR(hubConfiguration);
});
Javascript Client Code
var connection = $.hubConnection();
var contosoChatHubProxy = connection.createHubProxy('MyTestHub');
contosoChatHubProxy.on('addContosoChatMessageToPage', function(userName:any, message:any) {
console.log(userName + ' ' + message);
});
connection.start()
.done(function(){ console.log('Now connected, connection ID=' + connection.id); })
.fail(function(){ console.log('Could not connect'); });
Note section in documentation
Normally you register event handlers before calling the start method
to establish the connection. If you want to register some event
handlers after establishing the connection, you can do that, but you
must register at least one of your event handler(s) before calling the
start method. One reason for this is that there can be many Hubs in an
application, but you wouldn't want to trigger the OnConnected event on
every Hub if you are only going to use to one of them. When the
connection is established, the presence of a client method on a Hub's
proxy is what tells SignalR to trigger the OnConnected event. If you
don't register any event handlers before calling the start method, you
will be able to invoke methods on the Hub, but the Hub's OnConnected
method won't be called and no client methods will be invoked from the
server.
I could not figure out what I miss for past two days.
UPDATE:
Even I tried with auto generated proxy class by including <script src="~/SignalR/hubs" with the following client code. Still OnConnected Not fired
var contosoChatHubProxy = $.connection.myTestHub;
contosoChatHubProxy.client.addContosoChatMessageToPage = function (name, message) {
console.log(userName + ' ' + message);
};
$.connection.hub.start()
.done(function(){ console.log('Now connected, connection ID=' + $.connection.hub.id); })
.fail(function(){ console.log('Could not Connect!'); });
Console Log after connectton
I have ended with the below solution. Hope it will help some one.
declare var $: any;
#Injectable()
export class CityChangeNotifier {
constructor(private appService: AppService, private router: Router) {
this.connection = $.hubConnection();
this.CityChangeHub = this.connection.createHubProxy('CityChangeNotificationHub');
this.CityChangeHub
.on('CityUpdatedByServer', (newLocation:any, connectionId:string) => this.onCityUpdatedByServer(newLocation, connectionId));
this.connection.transportConnectTimeout = 10000;
this.startConnection();
}
private startConnection(): void {
let that = this;
this.connection.start()
.done((connection: any) => { that.connectionId = connection.id; })
.fail(() => { });
}
}
I want to call a client side method from my SignalR hub class only once, when the client first loads up the webpage. How would I go about doing this?
In your BlahBlahHub class, you have access to all of the connection methods that you do on the Client. Hint: Look at the base Hub class.
With that being said, here's what the code would look like:
Hub
[HubName("messageHub")]
public class MessageHub : Hub
{
public override Task OnConnected()
{
Clients.Caller.alertUser(88);
return base.OnConnected();
}
}
Client
var sender = $.connection.messageHub;
$.connection.hub.start().done(function () {
}).fail(function (reason) {
console.log("SignalR connection failed: " + reason);
});
sender.client.alertUser = function (test) {
alert(test);
};
I am encountering an issue when attempting to rename a SignalR hub. Please note that I'm not using generated proxies with SignalR.
I have a SignalR Hub that was previously defined as:
[HubName("WidgetHub")
public WidgetHub : Hub
{
...
}
Creating the proxy on the client is done using this code:
this.proxy = connection.createHubProxy('WidgetHub');
this.proxy.on('WidgetUpdated', function() {
$rootScope.$emit('refreshWidget');
});
return connection.start().then(function(connectionObj) {
return connectionObj;
}, function(error) {
console.log(error)
return error.message;
});
};
This is working correctly, however, I now want to rename the hub. I figured I could easily do this by specifying a new name in the [HubName()] attribute:
[HubName("CloudHub")
public WidgetHub : Hub
{
...
}
And the updating the client proxy creation to reference the new hub name:
this.proxy = connection.createHubProxy('CloudHub');
However, when I do this, the client connection errors out with the following message being return:
Error: SignalR: Connection must be started before data can be sent.
Call .start() before .send()
I suspected that I have a caching issue somewhere, because even after specifying the new hub name, if I reference the old hub name, it works correctly.
I have tried cleaning up IIS and all the browser caches, but to no avail. Is there something else that I'm missing here on why changing the HubName attribute is not working for me?
try to make your hubName as follows
[HubName("cloudHub")]
public WidgetHub : Hub
{
...
}
and create proxy like
this.proxy = connection.createHubProxy('cloudHub');
then try to start hub by calling method Start();
$.connection.hub.start().done(function () {
....
....
});