CODEWITHSUNDEEP
reactjssignalrsignalr-hub
schwe
schwe

Reputation: 51

signalR connection.hub function not called in react component

I'm creating a chatboard and I'm using signalR to let users know when new comment is added on some status/post.

I'm using React and I've tried to add event listeners for the hub function in different components, in some components it works, not others.

This is the hub:

public class CommentHub : Hub
{
    public void UpdateComments(int postId)
    {
        try
        {
            var context = GlobalHost.ConnectionManager.GetHubContext<CommentHub>();
            context.Clients.All.updateNewComments(postId);
        }
        catch (Exception ex)
        {
            Log.Error(ex.Message);
        }
    }
}

I call the event listener in the componentDidMound function:

componentDidMount: function() {
    this.commentUpdateListener();
},

And this is the event listener:

commentUpdateListener: function () {
    console.log("in the comment update listener!");
    var commentHub = $.connection.commentHub;

    commentHub.client.updateNewComments = function (postId) {
        console.log("updateNewComments called!");
    };

    $.connection.hub.start();
},

I have a react component for a post/status, a component for the "wall/newsfeed" and then I have a component for the "comment box" for each status on the wall, where the comments are rendered.

When I place the event listener in the wall component or the post component it works, and the 'updateNewComponent' function gets called, but not when I place it in the "comment box" component.

Still "in the comment update listener!" gets logged no matter where I place the event listener, but the hub function is not always called, and it seems to matter in what react component the event listener is placed.

Is the $.connection.commentHub not staying alive? Is it closing? Is there some reason the function is not always being called?

Upvotes: 1

Views: 1278

Answers (1)

Quentin Roger
Quentin Roger

Reputation: 6538

You can enable logging before starting the hub connection like this :

$.connection.hub.logging = true;
$.connection.hub.start();

If you see some disconnections you can try to restart the connection when it closes :

$.connection.hub.disconnected(function() {
   setTimeout(function() {
       $.connection.hub.start();
   }, 5000); // Restart connection after 5 seconds.
});

Further reading : Understanding and Handling Connection Lifetime Events in SignalR

Upvotes: 1

Related Questions