I'm trying to create a simple hello world with SignalR. I have a hub,
public class MyHub : Hub
{
public void TestConnection(string message)
{
Clients.Caller.testConnection(message);
}
}
and a JS file (using Angular),
var hub = $.connection.myHub;
hub.client.testMessage = function (message) {
console.log("Test: " + message);
};
$.connection.hub.start().done(function () {
alert('signalR started');
}).fail(function (reason) {
console.log("SignalR connection failed: " + reason);
});
hub.server.testConnection("hello signalR").done(function () { });
When I load the page, I just want the console to say "hello signalR". I get a the error message: SignalR: Connection has not been fully initialized. Use .start().done() or .start().fail() to run logic after the connection has started.
What am I doing wrong?
Try this:
$.connection.hub.start().done(function () {
alert('signalR started');
hub.server.testConnection("hello signalR").done(function () { });
});
And on the server :
Clients.All.testConnection(message);
Functions from hub.server must be called after the connection has been started. In your example the javascript was being run but the hub connection hasn't finished starting so you put it in the callback to the .done()
This may not solve the issue but you should be calling testMessage from the C# method, not testConnection.
Related
I have a simple client-side script like this:
function connect() {
const { contextBridge } = require('electron');
var ws = new WebSocket('ws://localhost:3000');
ws.onerror = (error) => {
console.error(`Lost connection to server. Reason: ${error.message}`);
console.error('Attempting to reconnect...');
ws.close();
}
ws.onclose = (e) => {
setTimeout({
connect();
}, 500);
}
ws.addEventListener('open', () => {
console.log('Connected to server!');
});
// Some other stuff to call functions via the browser console
const API = {
ws_isOpen: () => { return ws.readyState === ws.OPEN }
}
contextBridge.exposeInMainWorld('api', API);
function send_msg(msg) {
// Process some data...
ws.send(msg);
}
}
connect();
It works normally when the server is running and it's trying to connect, or when the server is rebooting and it's trying to connect for the first time, but not while it's connected. What I mean is that, if I were to suddenly shut the server down while the client is being connected to it, it attempts to try to reconnect as usual and the success message does pop up. However, if I type in window.api.ws_isOpen() in the browser console, it returns false. When I try to send a message, an error pops up saying something like Websocket is already in CLOSING or CLOSED stage. I tried changing the ws variable type to let and const but it doesn't work.
Turns out the answer is really simple. For some reason, when I put the ws variable outside the connect() function and modify it in the function, it works. I'm guessing it kinda re-declares/re-new the ws variable. It looks something like this:
var ws = null;
function connect() {
ws = new WebSocket('ws://localhost:3000');
// the exact same as above here....
}
connect();
After rebooting the server and letting it reconnect:
>> window.api.ws_isOpen()
true
I feel like I'm supposed to know how this works...
I am having a Visual Studio 2019 based SignalR Application, where client connects to server.
Following javascript function is called when a page is loaded and it connects to a running server with a successful connectionid.
function Connect() {
$.connection.hub.url = url;
stockTickerHubProxy = $.connection.mobileStockTickerHub;
if (stockTickerHubProxy) {
$.connection.hub.start().done(function () {
console.log("Connected...");
connectionId = $.connection.hub.id;
console.log(connectionId)
stockTickerHubProxy.server.setUserName(code);
})
.fail(function () {
alert("Can't connect");
})
;
stockTickerHubProxy.client.addMessage = function (name, message) {
console.log(name + ":" + message);
}
stockTickerHubProxy.client.showtradenotification = function (msg) {
alert(msg)
}
$.connection.hub.disconnected(function () {
console.log("Server disconnected.");
});
$.connection.hub.reconnecting(function () {
console.log("Server reconnecting...");
});
$.connection.hub.reconnected(function () {
console.log("Server reconnected...");
Connect();
});
$.connection.hub.error(function (error) {
console.log('SignalR error: ' + error)
});
}
}
On server, I am executing following test code for checking the function running in javascript html page. Following is the code.
private async void button1_ClickAsync(object sender, EventArgs e)
{
mhubContext = GlobalHost.ConnectionManager.GetHubContext<MobileStockTickerHub>();
await mhubContext.Clients.All.showtradenotification("Hello");
}
Following is the hub class MobileStockTickerHub
public class MobileStockTickerHub : Hub
{
//Called when a client is connected
public override Task OnConnected()
{
_users.TryAdd(Context.ConnectionId, Context.ConnectionId);
return base.OnConnected();
}
public override Task OnDisconnected(bool stopCalled)
{
string username;
_users.TryRemove(Context.ConnectionId, out username);
return base.OnDisconnected(stopCalled);
}
public override Task OnReconnected()
{
_users.TryAdd(Context.ConnectionId, Context.ConnectionId);
return base.OnReconnected();
}
public string SetUserName(string userName)
{
_users[Context.ConnectionId] = userName;
return "Received ping from " + userName;
}
}
Again, when button1_ClickAsync is fired, there is no activity on the webpage, that should fire showtradenotification with an alert message.
Let me know where I am wrong.
Thanks.
Move your client function before your hub.start. You should always register at least one function before your start. See the note regarding in the docs.
I am new to SignalR, recently I am examining and learning how the following code works.
Link: https://learn.microsoft.com/en-us/aspnet/signalr/overview/getting-started/tutorial-getting-started-with-signalr
I would like to know what is the easiest way to send a message to a specific user using the code in the previous link. Has anyone had experience or tried to do the same? I just need ideas since I don't know all the functionalities and methods that SignalR offers.
In my web application users have a unique username and I need to use that data for the connection. I have seen that there is a way to create groups and send the message in that way but I do not understand completely, a very simple example would help me a lot.
Can you help me or give me some advice? Thank you
I'm already write a blog here
So basically you need to
First define a hub method like this
public async Task Send(string userId)
{
var message = $"Send message to you with user id {userId}";
await Clients.Client(userId).SendAsync("ReceiveMessage", message);
}
Add to startup.cs
public void ConfigureServices(IServiceCollection services)
{
services.Configure(options =>
{
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
});
services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
services.AddSignalR();
}
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseCookiePolicy();
app.UseSignalR(routes =>
{
routes.MapHub<ConnectionHub>("/connectionHub");
});
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
Then finally
(function () {
var connection = new signalR.HubConnectionBuilder().withUrl("/connectionHub").build();
connection.start().then(function () {
console.log("connected");
connection.invoke('getConnectionId')
.then(function (connectionId) {
sessionStorage.setItem('conectionId', connectionId);
// Send the connectionId to controller
}).catch(err => console.error(err.toString()));;
});
$("#sendmessage").click(function () {
var connectionId = sessionStorage.getItem('conectionId');
connection.invoke("Send", connectionId);
});
connection.on("ReceiveMessage", function (message) {
console.log(message);
});
})();
First I will need to make connection with the server using
new signalR.HubConnectionBuilder().withUrl(“/connectionHub”).build()
Then when the connection start I will invoke getConnectionId to get user connection id in the server and store into session storage because when we do refresh the browser signalR server will give you new connection id
Next when I click on the button I will invoke Send method in the server and I will listen
on “ReceiveMessage”
using connection.on(“ReceiveMessage”);
public class MyHub : Hub
{
public void Send(string userId, string message)
{
Clients.User(userId).send(message);
}
}
https://learn.microsoft.com/en-us/aspnet/signalr/overview/guide-to-the-api/mapping-users-to-connections
I'm starting with signalr but got some trouble, my test server run at http://localhost:22660/ and my web run at
http://localhost:61963/.I got this error when connect from client to server:
GET http://localhost:61963/signalr/negotiate?clientProtocol=1.4&connectionData=%5B%7B%22name%22%3A%22chathub%22%7D%5D&_=1496809403215 404 (Not Found)
I already config: $.connection.hub.url = 'http://localhost:22660/signalr'; but not work, this my js code:
var connection = $.hubConnection();
$.connection.hub.url = 'http://localhost:22660/signalr';
var chatHub = connection.createHubProxy('ChatHub');
connection.start()
.done(function () { console.log('Now connected, connection ID=' + connection.id); })
.fail(function () { console.log('Could not connect'); });
Server:
namespace test
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.Map("/signalr", map =>
{
map.UseCors(CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
EnableJSONP = true
};
map.RunSignalR(hubConfiguration);
});
}
}
}
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the addNewMessageToPage method to update clients.
Clients.All.addNewMessageToPage(name, message);
}
}
}
I dont sure, but i think because i using different version of signalr (2.1.2 and 2.2.0). Using same version solved my problem.
I am looking for a method to acknowledge a socket.emit call.
socket.emit('message', msg);
I have seen a mechanism where the receiver would send another custom event as an acknowledgement, but this would add thousands of transports in my chat application. Please advice an efficient method.
The third argument to the emit method accepts a callback that will be passed to the server so that you can call in acknowledgement with any data you wish. It's actually really convenient and saves the effort of having paired call-response events.
I'm updating my answer with some code that I just tested.
First on the server side:
io.sockets.on('connection', function (sock) {
console.log('Connected client');
sock.emit('connected', {
connected: 'Yay!'
});
// the client passes 'callback' as a function. When we invoke the callback on the server
// the code on the client side will run
sock.on('testmessage', function (data, callback) {
console.log('Socket (server-side): received message:', data);
var responseData = {
string1: 'I like ',
string2: 'bananas ',
string3: ' dude!'
};
//console.log('connection data:', evData);
callback(responseData);
});
});
On the client side:
console.log('starting connection...');
var socket = io.connect('http://localhost:3000');
socket.on('error', function (evData) {
console.error('Connection Error:', evData);
});
// 'connected' is our custom message that let's us know the user is connected
socket.on('connected', function (data) {
console.log('Socket connected (client side):', data);
// Now that we are connected let's send our test call with callback
socket.emit('testmessage', {
payload: 'let us see if this worketh'
}, function (responseData) {
console.log('Callback called with data:', responseData);
});
});