signalr not working with solution angularjs+asp.net web api - signalr

Question

here is my signalr piece on backend
public class ChatHub : Hub
{
public void AddMessage(string userName, string message)
{
Clients.All.receivedNewMessage(userName, message);
}
}
and on frontend
app.controller('chatController', ['$scope', function ($scope) {
var _message = function(id, message, username, date)
{
// this.id = id;
this.message = message;
this.username = username;
// this.date = date;
}
$scope.username = "test";
$scope.message = "";
$scope.messages = [];
//auto proxy start
$.connection.hub.url = "http://localhost:*****/signalr/";
var myChatHub = $.connection.chatHub;
$.connection.hub.logging = true;
myChatHub.client.receivedNewMessage = function (username, message) {
var newMessage = new _message( name, message);
$scope.messages.push(_message);
$scope.$apply();
};
$.connection.hub.start().done(function () {
$scope.addMessage = function () {
myChatHub.server.addMessage($scope.username, $scope.message);
};
});
}]);
and libs
<script src="scripts/jquery-3.1.0.js"></script>
<script src="scripts/jquery.signalR-2.2.1.min.js"></script>
<script src="http://localhost:*****/signalr/hubs"></script>
I used web tools on chrome, everything looked fine to me. I debugged the js and on jquery.signalR-2.2.1.min.js it showed me:
SignalR: Connection must be started before data can be sent. Call
.start() before .send()
and I don't know how to fix it

Answer 1

Change:
$.connection.hub.start().done(function () {
$scope.addMessage = function () {
myChatHub.server.addMessage($scope.username, $scope.message);
};
});
To:
$scope.addMessage = function () {
myChatHub.server.addMessage($scope.username, $scope.message);
};
$.connection.hub.start().done(function () {
$scope.addMessage($scope.username, $scope.message);
});
The function declaration should NOT exist within the start().done context.