I am running SignalR 2.x in a .Net Framework 4.7 WebAPI app. I have it working to the point where my UI can connect, pass in a message and get a return message. The connection is made and an initial exchange succeeds. However, after that, any time I try and send a message from the server nothing happens. I set a breakpoint in the hub and see that it gets hit. But no message goes out. I need to see if the message is actually being set on the hub. I know the UI does not receive anything, how can I see if .NET actually sends the message?
Hub Contents
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Diagnostics;
using System.Threading.Tasks;
namespace ShopAP.API.Hubs
{
[HubName("messages")]
public class MessageHub : Hub
{
public MessageHub()
{
Debug.WriteLine("MessageHub");
}
public override Task OnConnected()
{
Debug.WriteLine("Connected: " + Context.ConnectionId);
return base.OnConnected();
}
public void ShowNewMessage(string message)
{
Debug.WriteLine("Show Message: " + message);
Clients.All.showMessageOnPage("Da message: " + message);
}
public void GotMessage(string message)
{
Debug.WriteLine(message);
}
}
}
Vue.js code
Plugin that makes the connection and passes the message to all components via the event bus.
/* eslint-disable no-console */
import { hubConnection } from 'signalr-no-jquery';
export default {
install(Vue) {
const connection = hubConnection('https://localhost:44312/signalr');
const hubProxy = connection.createHubProxy('messages');
// use new Vue instance as an event bus
const invoiceHub = new Vue()
// every component will use this.$invoiceHub to access the event bus
Vue.prototype.$invoiceHub = invoiceHub
// set up event listeners i.e. for incoming "message" event
// Forward server side SignalR events through $invoiceHub, where components will listen to them
hubProxy.on('showMessageOnPage', (message) => {
invoiceHub.$emit('updateMessage', message);
});
connection.logging = true;
// connect
connection.start()
.done(function(){
console.log('Now connected, connection ID=' + connection.id);
hubProxy.invoke('showNewMessage', 'from front end');
})
.fail(function(){ console.log('Could not connect'); });
}
}
In one of the components...
created() {
this.$invoiceHub.$on("updateMessage", this.showMessage);
},
And the method that just proves I'm getting data from the server:
showMessage(message) {
// eslint-disable-next-line no-console
console.log(message);
alert("Chips: " + message);
this.message = message;
},