SignalR: getting error: WebSocket closed

Viewed 8119

I am working on project of Ionic with angular and AspNet with SignalR that have chat module. I use SignalR for Chat.It's working smoothly but some time i am getting error as per below screen shot and because of that it's get stop working at all. I have hosted my service on IIS and creating proxy and communicating with client and server. Here is sample

    (function () {
        angular
          .module('app')
          .factory('SignalRFactory', SignalRFactory);
        SignalRFactory.$inject = ['$rootScope', 'Hub', 'ionicToast'];
        function SignalRFactory($rootScope, Hub, ionicToast) {
            var signalRLocal = this;

            var serverURL = 'https://serivcerURL.com/signalr';

            //Hub setup
            var hub = new Hub('CommunicationHub', {
                rootPath: serverURL,
                listeners: {
                    'send': function (data) {
                        console.log("send " + data);

                    }

                },


                errorHandler: function (error) {
                //Here i am getting that websocket closed error
                    console.error(error); 

                }
            });


            signalRLocal.Connect = function (user) {
                console.log("SignalR Connecting as :" + user.UserName);
                hub.invoke('connect', user);
            };


            return signalRLocal;
        }
    })();

enter image description here

I have hosted service on IIS. I search for the solution and find something like this link

I also try with above link solution by using "long Polling" as per below

Hub.connection.start({ transport: 'longPolling' });

But i don't want to use "long Polling" at all. So can someone help me to figure out this issue without use of 'long Polling'. Can someone tell me what configuration i have to do at client side or at IIS level.

3 Answers

I am trying same and my client is in vue.js. I have changed below in vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/hub': {
        target: 'https://localhost:5001',
        changeOrigin: false,
        secure: false,
        headers: {
          'x-forwarded-proto': 'http',
        },
      },
    },
  },
}

Previously i am trying 'x-forwarded-proto': 'https', when I changed to http its work. https://localhost:5001 is my .net endpoint and http://localhost:8080 is my vue enpoint

Changed in Startup.csbelow,

app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllers();
                endpoints.MapHub<CardsHub>("/hub/cardsHub");
            });

Added below code in vue component

this.connection = new signalR.HubConnectionBuilder()
      .withUrl('/hub/cardsHub')
      .build()

In my case the culprit was the wrong version of Microsoft.AspNetCore.SignalR.Common

  • the default one installed was 5.0.3
  • but I was targeting 3.1.0

Downgrading to 3.1.12 fixed the issue with the connection.

Related