Search code examples
.netreactjssignalrsignalr-hub

SignalR : negotiate parsing error : SyntaxError: Unexpected token < in JSON at position 0

I am trying to setup signalr with react js (with redux) application. The hub is a .Net 4.5 application and needs to broadcast data to client which is a react js application.

NOTE: This is NOT a .NET Core application.

The negotiate as such is a success, but the call to hub method fails with the below error:

Error: Error parsing negotiate response. at Object.error (http://localhost:3000/static/js/5.chunk.js:29352:15) at Object.callback [as success] (http://localhost:3000/static/js/5.chunk.js:29863:32) at fire (http://localhost:3000/static/js/5.chunk.js:16012:33) at Object.fireWith [as resolveWith] (http://localhost:3000/static/js/5.chunk.js:16129:13) at done (http://localhost:3000/static/js/5.chunk.js:21517:20) at XMLHttpRequest. (http://localhost:3000/static/js/5.chunk.js:21731:19)

A little bit of digging reveals the below error,

SyntaxError: Unexpected token < in JSON at position 0 at Object.parse () at push../node_modules/signalr/jquery.signalR.js.hubConnection.fn.init._parseResponse (http://localhost:3000/static/js/5.chunk.js:29538:26) at Object.callback [as success] (http://localhost:3000/static/js/5.chunk.js:29861:30) at fire (http://localhost:3000/static/js/5.chunk.js:16012:33) at Object.fireWith [as resolveWith] (http://localhost:3000/static/js/5.chunk.js:16129:13) at done (http://localhost:3000/static/js/5.chunk.js:21517:20) at XMLHttpRequest. (http://localhost:3000/static/js/5.chunk.js:21731:19)

The negotiate call as such returns status 200 OK result as below,

enter image description here

My hub class in a .Net 45 project as below,

[HubName("schedule")]
public class SpamHub: Hub
{
    public SpamHub()
    {
        SendSpamEverywhere();
    }
    public void SendSpamEverywhere()
    {
        Clients.All.Spams();
    }
}

The ReactJs middleware for SignalR configuration is as below,

declare global {
    interface Window {
        jQuery: any
    }
}

window.jQuery = $;
require('signalr');

const startSignalRConnection = (connection: SignalR.Hub.Connection) => connection.start()
    .then(() => console.info('SignalR connected'))
    .fail((error) => console.error('SignalR connection error: ', error))
    .catch((error: any) => console.error('SignalR connection error: ', error)); // I always end up here

const signalRMiddleware = (store: any) => (next: any) => async (action) => {

        const connection = $.hubConnection();
        const spamHubProxy = connection.createHubProxy('schedule');

        spamHubProxy.on('spams', function (response) {
            console.log('********* SPAM RECEIVED ***********', response);
        });

        //re-establishthe connection if the connection dropped
        connection.disconnected(() => setTimeout(() => {
             startSignalRConnection(connection)
        }, 10000))

        startSignalRConnection(connection);
    }

    next(action);
}

export default signalRMiddleware;

Can any one help me in finding what is wrong with this code?

Solution

  • After lot of debugging, I finally found the problem. I was referring to incorrect port while creating the hub connection. Changing the port number to point to the correct one resolved the issue.