Here's my hub class:
public class ZaaloverzichtHub : Hub
{
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<ZaaloverzichtHub>();
private static readonly Lazy<ZaaloverzichtHub> instance = new Lazy<ZaaloverzichtHub>(() => new ZaaloverzichtHub());
public static ZaaloverzichtHub Instance { get { return instance.Value; } }
public void Send()//PartialViewResult zaaloverzicht)
{
// Call the broadcastMessage method to update clients.
context.Clients.All.broadcastMessage("test");
}
}
And here's the javascript in my view:
$(function () {
var connection = $.connection.ZaaloverzichtHub;
connection.client.broadcastMessage = function (zaaloverzicht) {
window.alert(zaaloverzicht);
}
$.connection.hub.start();
});
I'm calling the Send() method from my controller
var hub = ZaaloverzichtHub.Instance;
hub.Send();
The Send() method in the hub is being called however nothing is happening on the client side. I know the client is not being connected to the hub because when i make a method like this:
public override System.Threading.Tasks.Task OnConnected()
{
return base.OnConnected();
}
And place a breakpoint, the breakpoint is never hit.
The convention for SignalR is to use a lowercase naming scheme on the client side unless explicitly named using an attribute in c#
var connection = $.connection.zaaloverzichtHub;//note the case change on Z to z
Related
I have a strongly typed Hub on the server:
public Foo : Hub<Bar> {}
Bar is supposed to be an interface including methods available on the client side. But that solves only half of the problem (the server half). On the client side, I still have to use magic strings to define handlers for calls to the methods of Bar:
hubConnection.On<int>("MethodInsideBar", param => DoSomething(param));
Is there a way to avoid doing this ? Shouldn't there be a way to implement Bar client side and link the calls from the server to that implementation ?
You can use the SignalR.Strong NuGet
Sample Code:
Foo.cs
public interface IBar
{
Task MethodInsideBar(int n);
}
public class Foo : Hub<IBar> {}
Client.cs:
public class MySpoke : IBar
{
public Task MethodInsideBar(int n)
{
//
return Task.CompletedTask;
}
}
var conn = new SignalR.Client.HubConnection()
.WithUrl("http://localhost:53353/MyHub")
.Build();
await conn.StartAsync();
var registration = conn.RegisterSpoke<IBar>(new MySpoke())
BlazorPage.razor
#using Microsoft.AspNetCore.SignalR.Client
#using SignalR.Strong
#inject NavigationManager Nav
#implements IBar
#code {
private HubConnection? hubConnection;
public Task MethodInsideBar(int n)
{
//
return Task.CompletedTask;
}
protected override async Task OnInitializedAsync()
{
hubConnection = new HubConnectionBuilder()
.WithUrl(Nav.ToAbsoluteUri("/foo"))
.WithAutomaticReconnect()
.Build();
await hubConnection.StartAsync();
hubConnection.RegisterSpoke<IBar>(this);
await base.OnInitializedAsync();
}
}
server.cs
public class FooBar
{
private readonly IHubContext<Foo, IBar>? _hubContext;
// dependency injected IHubContext
public FooBar(IHubContext<Foo, IBar>? hubContext)
{
_hubContext = hubContext;
}
public void CallBar(int n)
{
_hubContext?.Clients.All.MethodInsideBar(n);
}
}
On the client side, I still have to use magic strings to define
handlers for calls to the methods of Bar:
hubConnection.On<int>("MethosInsideBar", param => DoSomething(param));
Is there a way to avoid doing this ? Shouldn't
there be a way to implement Bar client side and link the calls from
the server to that implementation ?
As far as I know, the Strongly typed hubs only apply to the server side, we could inject the strongly-typed HubContext in the controller, then, call the hub method. It can prevent the method name is misspelled or missing from the client.
On the client side, we still need to use the Invoke method call the public methods on hubs, and define a method using the on method of the HubConnection to receive messages from the hub.
When calling the public hub methods from client, if you want to use the Strongly typed Hubs, you could inject the Strongly typed hubcontext into the controller, then use JQuery Ajax call the controller's action method, then use the Strongly typed hubs method. Refer this thread: SignalR - Call statically typed hub from Context.
I have a (serverside) blazor app and I want to let users fill in a small form and press a button to create SignalR groups that they can then send messages to.
I have a Hub class that looks like this:
public class RoomHub : Hub
{
public async Task JoinRoomAsync(string groupName)
{
await Groups.AddToGroupAsync(Context.ConnectionId, groupName);
}
public async Task LeaveRoomAsync(string groupName)
{
await Groups.RemoveFromGroupAsync(Context.ConnectionId, groupName);
}
public async Task BroadcastToRoomAsync(string groupName, string message)
{
await Clients.Group(groupName).SendAsync("OnMessage", message);
}
}
and a Service class that gets called from my blazor component, which looks like this:
public class RoomService : IRoomService
{
private ICosmosDbService _dbService;
private RoomHub _roomHub;
public RoomService(ICosmosDbService dbService, RoomHub roomHub)
{
this._dbService = dbService;
this._roomHub = roomHub;
}
public async Task<Room> CreateRoom(string name)
{
Room r = new Room();
r.Id = Guid.NewGuid().ToString();
r.Name = name;
await _dbService.AddItemAsync(r);
await _roomHub.JoinRoomAsync(r.Name);
return r;
}
public async Task SendToRoom(Room r, string message)
{
await _roomHub.BroadcastToRoomAsync(r.Name, message);
return;
}
}
When I add the RoomHub class to my services in Startup.cs and run my application, when I press the button to create a Group it tells me the Hub's Context variable is null and fails.
I've tried looking around for other ways to do this, and arrived at the conclusion that it has something to do with injecting an IHubContext<RoomHub> object instead, but the object this provides does not seem related at all to my Hub class and I can't use it to create groups directly because I don't have access to the ConnectionId I need to do so.
I feel like there's a gap between the Hub and HubContext that I do not understand. What is the correct way to create a SignalR Group, starting from a button press on a Blazor component?
Before you can access your Hub, you need to build and start your Hub connection using HubConnection and HubConnectionBuilder. This needs to include the url for your Hub and the handler methods for the data received from the Hub.
Start by adding a HubConnection field in your Service class.
private HubConnection _hubConnection;
Depending on your Service lifetime and other considerations, you can build your connection in the Service class constructor or it's own method. For an example, we'll add a StartConnectionAsync task.
public async Task StartConnectionAsync()
{
// Create the connection
_hubConnection = new HubConnectionBuilder()
.WithUrl(_hubUrl) // _hubUrl is your base Url + Hub Url
.Build();
// Add Handler for when a client receives a broadcast message
_hubConnection.On<string>("OnMessage", this.SomeEventHandler);
// Then you start the connection
await _hubConnection.StartAsync();
}
Without using a typed Hub, you'll call your Hub methods using magic strings. e.g.
await _hubConnection.SendAsync("JoinRoomAsync", groupName);
This should get you started. Based on what you posted above, I think this github repo is similar to what you're intending to do.
I have a scenario where one of the clients is sending a request to Hub Class method AddMessage, which in turn should broadcast that message to all clients including the one who initiated it.
The problem is that I am able to call the Hub method AddMessage from the client as shown in the following code, but I couldn't find a way to handle the broadcast message on the client side which is initiated in the Hub class using the following line.
Clients.All.NotifyMessageToClients(name, message);
SignalR Hub Class
using System;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
public class SignalRChatHub : Hub
{
public void AddMessage(string name, string message)
{
// Following call is supposed to notify all clients with passed parameters.
// They could have a method called NotifyMessageToClients to fetch the broadcasted message
Clients.All.NotifyMessageToClients(name, message);
}
}
SignalR Client
using System;
using Microsoft.AspNet.SignalR.Client;
public partial class Default : System.Web.UI.Page
{
HubConnection hubConnection;
IHubProxy stockTickerHubProxy;
public Default()
{
hubConnection = new HubConnection("http://localhost:6898/");
stockTickerHubProxy = hubConnection.CreateHubProxy("SignalRChatHub");
}
async public void SendAddNotification(string msgFrom, string msg)
{
// Following line calls Addmessage method in SignalRChatHub class
await stockTickerHubProxy.Invoke("Addmessage", "Ajendra", "Hello StackOverflow");
}
// I might need the method NotifyMessageToClients here... to receive broadcasted message
}
I have some idea about how to achieve the same in jQuery but not in C# by creating a client as I did above. How would I achieve this?
If the above approach doesn't make sense in any way, please suggest me the right one.
You need to listen to events from the server like this:
public partial class Default : System.Web.UI.Page
{
HubConnection hubConnection;
IHubProxy stockTickerHubProxy;
public Default()
{
hubConnection = new HubConnection("http://localhost:6898/");
stockTickerHubProxy = hubConnection.CreateHubProxy("SignalRChatHub");
// listen to server events...
// n is "name" and m is "message", but you can change to "a" and "b" or anything else...
stockTickerHubProxy.On<string, string>("NotifyMessageToClients", (n, m) =>
{
Console.WriteLine("Message received from server. Name: {0} | Message: {1}", n, m);
});
}
// "async" methods should return Task instead of void....
// unless they are event handlers for UI applications...
public async Task SendAddNotification(string msgFrom, string msg)
{
// first, start the connection...
await stockTickerHubProxy.Start();
// Following line calls Addmessage method in SignalRChatHub class
await stockTickerHubProxy.Invoke("Addmessage", "Ajendra", "Hello StackOverflow");
// you don't stop the connection, otherwise you won't be able to receive calls from the server
}
}
...if you need to update UI in WPF, for example, you should implement your event like this:
stockTickerHubProxy.On<string, string>("NotifyMessageToClients", (a,b) =>
Dispatcher.InvokeAsync(() =>
{
// update UI...
textBox.Text += string.Format("Name: {0} | Message: {1}", a, b);
})
);
I suggest reading this guide for deeper details.
I have a WPF application which use SignalR to achieve publish/subscribe model.
When I used a WPF client to connect to the above application, the publish and callback worked successfully.
Then I created a ASP.Net client. I use a cross domain property of SignalR to connect to above WPF application.
It could connect to the application and call the method provided in the hub successfully.
However, when the WPF application call the method in the ASP.Net Client, it seems that that call cannot be reached to the client browser
(viewed in Firefox, the long polling does not return; break point cannot be reached even I have set the break point in the javascript callback function, and nothing could be displayed in the broswer).
I have included the following script in html
<script src="#Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript</script>
<script src="/Scripts/jquery.signalR-1.0.0-rc2.min.js" type="text/javascript"></script>
<script src="http://localhost:9999/signalr/hubs" type="text/javascript"></script>
The following is the javascript that I have used.
jQuery.support.cors = true;
myHub = $.connection.subscriberHub;
myHub.client.addMessage = function (msg, time) {
$("#message").prepend("<div>" + time + " " + msg + "</div>");
};
$.connection.hub.url = 'http://localhost:9999/signalr';
$.connection.hub.start();
The below is the server code in the WPF application:
public partial class App : Application
{
private IDisposable app;
private void Application_Startup(object sender, StartupEventArgs e)
{
string url = "http://localhost:9999";
app = WebApplication.Start<Startup>(url);
}
private void Application_Exit(object sender, ExitEventArgs e)
{
if (app != null)
{
app.Dispose();
}
}
}
class Startup
{
public void Configuration(IAppBuilder app)
{
app.MapHubs();
}
}
And I send the message when the WPF application clicked a button:
private void btn_sendMsg_Click(object sender, RoutedEventArgs e)
{
var context = GlobalHost.ConnectionManager.GetHubContext<SubscriberHub>();
DateTime sentTime = DateTime.Now;
context.Clients.Group("subscriber").addMessage(tb_message.Text, sentTime);
MessageList.Insert(0,string.Format("{0:yyyy-MM-dd HH:mm:ss} {1}", sentTime, tb_message.Text));
}
The following is the hub that I have defined:
public class SubscriberHub : Hub
{
string group = "subscriber";
public Task Subscribe()
{
return Groups.Add(Context.ConnectionId, group);
}
public Task Unsubscribe()
{
return Groups.Remove(Context.ConnectionId, group);
}
}
Is there any problem in the above code?
Don't you need to have the JavaScript client call Subscribe?
$.connection.hub.start().done(function () {
myHub.server.subscribe();
});
Alternatively you could modify SubscriberHub:
public class SubscriberHub : Hub
{
string group = "subscriber";
public override Task OnConnected()
{
return Groups.Add(Context.ConnectionId, group);
}
// ...
}
I'm using SignalR in my mvc4 web application.
I have a class inheriting from HUB
[HubName("Chat")]
public class ChatHub : Hub ,IDisconnect
{
private void CallMessage(string message)
{
Clients.MessagesRecieved(message);
}
....
In my client js file I wrote
$(function () {
globalChatHub = $.connection.chat;
$.extend(globalChatHub, { MessagesRecieved: function (data) {
alert(data);
}
});
the question is ,
Is it possible to invoke the client side script "MessagesRecieved function" from a code in my HomeController.cs
let's say somthing like that :
public class HomeController : Controller
{
public ActionResult Index()
{
// this is a test
ChatHub h = new ChatHub();
h.CallMessage("hellow");
}
Sure,
You can call it the same way you call client code:
//Define the client method:
globalChatHub.hello = function {alert('hello');}
in the server code just write:
ChatHub h = new ChatHub();
h.Client.hello();
the name of the method is case sensitive.
more info in this link SignalR quick start
You can have a the Hub context for your ChatHub with this code:
var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
Then you can call any method you would like on your ChatHub or you can call client methods directly. E.g.:
context.Clients.All.MessagesRecieved("test");
Give it a try. Hope this helps.
In mvc controller, I use following code to call methods in hub
DefaultHubManager hd = new DefaultHubManager(GlobalHost.DependencyResolver);
var hub = hd.ResolveHub("ChatHub") as ChatHub;
hub.Echo(HttpContext.Session.SessionID, "Hello Echo");
In the hub implementation, I prefer to keep the implementation to call clients in Hub to make the code cohesive.
public void Echo(string sessionId, dynamic data)
{
var context = GlobalHost.ConnectionManager.GetHubContext<ChatHub>();
context.Clients.All.ClientSideMethod(..)
}