javascript – How to connect signalR from angularJs

Basics:

That you can connect to your signalr server you have to include the client code to your page. Its also important that you include jquery before.
At least you can also include the generate hubs file in the case you are working with hubs:

<script src=Scripts/jquery-1.10.2.min.js></script>
<script src=Scripts/jquery.signalR-2.1.0.min.js></script>
<script src=signalr/hubs></script>

Basic Sample:

Here you have a full sample (without and with generated hub proxy):

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset=utf-8 />       
</head>
<body>
    <div class=container>
        <div class=row>
            <!-- Title -->
            <h1>SignalR Sample</h1>
        </div>
        <div class=row>
            <!-- Input /Button-->
            <input type=text id=inputMsg />
            <button button=btn btn-default id=btnSend>Send</button>
        </div>
        <div class=row>
            <!-- Message list-->
            <ul id=msgList></ul>
        </div>
    </div>
    <script src=Scripts/jquery-1.6.4.js></script>
    <script src=Scripts/jquery.signalR-2.2.0.js></script>
    <script src=http://[LOCATIONOF YOUR HUB]/signalr/hubs></script>
    <script>
        // ------------------- Generated Proxy ----------------------------
        $(function () {
            $.connection.hub.url = [LOCATION WHERE YOUR SERVICE IS RUNNING]/signalr;
            var chat = $.connection.myChat;

            chat.client.addMessage = function (name, message) {
                $(#msgList).append(<li><strong> + name
                   + </strong>:&nbsp;&nbsp; + message + </li>);
            };
            $.connection.hub.start({}).done(function () {
                $(#btnSend).click(function () {
                    chat.server.Send(Stephan, $(#inputMsg).val());
                    $(#inputMsg).val().focus();
                });
            })
        });
        //// ------------------- Without Proxy ----------------------------
        //$(function () {
        //    var connection = $.hubConnection(http://localhost:8080/signalr);
        //    var chatHubProxy = connection.createHubProxy(chatHub);
        //    chatHubProxy.on(AddMessage, function (name, message) {
        //        console.log(name +   + message);
        //        $(#msgList).append(<li><strong> + name
        //      + </strong>:&nbsp;&nbsp; + message + </li>);

        //    });
        //    connection.start().done(function () {
        //        $(#btnSend).click(function () {
        //            chatHubProxy.invoke(send, Stephan, $(#inputMsg).val());
        //            $(#inputMsg).val().focus();
        //        });
        //    });
        //});

    </script>
</body>
</html>

For more details see:
http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-javascript-client

SignalR Angular Module:

There is also a helper module which you can use in angularjs for working with signalr:
https://github.com/JustMaier/angular-signalr-hub

I can able to connect webapi by adding below code into my Startup.Auth.cs

public void ConfigureAuth(IAppBuilder app)
    {
        app.UseOAuthBearerTokens(OAuthOptions);

        //by adding below code 
        app.UseCors(CorsOptions.AllowAll);
        app.MapSignalR(new HubConfiguration { EnableJSONP = true });

    }

javascript – How to connect signalR from angularJs

Related posts on java script :

javascript – How to connect signalR from angularJs

javascript – How to connect signalR from angularJs

Leave a Reply Cancel reply