AngularJS
SignalR mit AngularJs

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
Suche…


Einführung

In diesem Artikel konzentrieren wir uns auf "So erstellen Sie ein einfaches Projekt mit AngularJs And SignalR". In diesem Training müssen Sie wissen, wie "App mit AngleJs erstellen", "Service für AngularJs erstellen / verwenden" und Grundkenntnisse über SignalR "Dazu empfehlen wir https://www.codeproject.com/Tips/590660/Introduction-to-SignalR) .

SignalR und AngularJs [ChatProject]

Schritt 1: Projekt erstellen 

- Application
    - app.js
    - Controllers
        - appController.js
    - Factories
        - SignalR-factory.js
- index.html
- Scripts
    - angular.js
    - jquery.js
    - jquery.signalR.min.js
- Hubs

Verwendung der SignalR-Version: SignalR-2.2.1

Schritt 2: Startup.cs und ChatHub.cs

Wechseln Sie in Ihr Verzeichnis "/ Hubs" und fügen Sie 2 Dateien hinzu [Startup.cs, ChatHub.cs].

Startup.cs 

using Microsoft.Owin;
using Owin;
[assembly: OwinStartup(typeof(SignalR.Hubs.Startup))]

namespace SignalR.Hubs
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            app.MapSignalR();
        }
    }
}

ChatHub.cs 

using Microsoft.AspNet.SignalR;

namespace SignalR.Hubs
{
    public class ChatHub : Hub
    {
        public void Send(string name, string message, string time)
        {
            Clients.All.broadcastMessage(name, message, time);
        }
    }
}

Schritt 3: Winkel-App erstellen

Wechseln Sie in Ihr Verzeichnis "/ Application" und fügen Sie die Datei [app.js] hinzu

app.js 

var app = angular.module("app", []);

Schritt 4: SignalR Factory erstellen

Wechseln Sie in das Verzeichnis "/ Application / Factories" und fügen Sie die Datei [SignalR-factory.js] hinzu

SignalR-factory.js 

app.factory("signalR", function () {
    var factory = {};

    factory.url = function (url) {
        $.connection.hub.url = url;
    }

    factory.setHubName = function (hubName) {
        factory.hub = hubName;
    }

    factory.connectToHub = function () {
        return $.connection[factory.hub];
    }

    factory.client = function () {
        var hub = factory.connectToHub();
        return hub.client;
    }

    factory.server = function () {
        var hub = factory.connectToHub();
        return hub.server;
    }

    factory.start = function (fn) {
        return $.connection.hub.start().done(fn);
    }

    return factory;
});

Schritt 5: Aktualisieren Sie app.js 

var app = angular.module("app", []);

app.run(function(signalR) {
    signalR.url("http://localhost:21991/signalr");
});

localhost: 21991 / signalr | Dies ist Ihre SignalR Hubs-URL

Schritt 6: Controller hinzufügen

Wechseln Sie in das Verzeichnis "/ Application / Controllers" und fügen Sie die Datei [appController.js] hinzu 

app.controller("ctrl", function ($scope, signalR) {
    $scope.messages = [];
    $scope.user = {};

    signalR.setHubName("chatHub");

    signalR.client().broadcastMessage = function (name, message, time) {
        var newChat = { name: name, message: message, time: time };

        $scope.$apply(function() {
            $scope.messages.push(newChat);
        });
    };

    signalR.start(function () {
        $scope.send = function () {
            var dt = new Date();
            var time = dt.getHours() + ":" + dt.getMinutes() + ":" + dt.getSeconds();

            signalR.server().send($scope.user.name, $scope.user.message, time);
        }
    });
});

signalR.setHubName ("chatHub") | [ChatHub] (öffentliche Klasse)> ChatHub.cs

Hinweis: Fügen Sie nicht HubName mit Großbuchstaben ein, der erste Buchstabe ist Kleinbuchstabe.

signalR.client () | Versuchen Sie, eine Verbindung zu Ihren Hubs herzustellen und alle Funktionen in den Hubs zu erhalten. In diesem Beispiel haben wir "chatHub", um die Funktion "broadcastMessage ()" zu erhalten.

Schritt 7: Fügen Sie index.html im Verzeichnispfad hinzu

index.html 

<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
    <meta charset="utf-8" />
    <title>SignalR Simple Chat</title>
</head>
<body>
    <form>
        <input type="text" placeholder="name" ng-model="user.name" />
        <input type="text" placeholder="message" ng-model="user.message" />
        <button ng-click="send()">send</button>

        <ul>
            <li ng-repeat="item in messages">
                <b ng-bind="item.name"></b> <small ng-bind="item.time"></small> : {{item.message}}
            </li>
        </ul>
    </form>

    <script src="Scripts/angular.min.js"></script>
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.1.min.js"></script>
    <script src="signalr/hubs"></script>
    <script src="app.js"></script>
    <script src="SignalR-factory.js"></script>
</body>
</html

Ergebnis mit Bild

Benutzer 1 (senden und empfangen)

Benutzer 2 (senden und empfangen)



Modified text is an extract of the original Stack Overflow Documentation
Lizenziert unter CC BY-SA 3.0
Nicht angeschlossen an Stack Overflow