AngularJS => SignalR avec AngularJs

Introduction

Dans cet article, nous nous concentrons sur "Comment créer un projet simple en utilisant AngularJs et SignalR", dans cette formation, vous devez connaître "comment créer une application avec angularjs", "créer / utiliser un service sur angulaire" et des connaissances de base sur SignalR "pour cela nous recommandons https://www.codeproject.com/Tips/590660/Introduction-to-SignalR) .

SignalR et AngularJs [ChatProject]

étape 1: créer un projet

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

Version de signal signal: signalR-2.2.1

Étape 2: Startup.cs et ChatHub.cs

Allez dans votre répertoire "/ Hubs" et ajoutez 2 fichiers [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);
        }
    }
}

étape 3: créer une application angulaire

Accédez à votre répertoire "/ Application" et ajoutez le fichier [app.js]

app.js

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

étape 4: créer SignalR Factory

Allez dans votre répertoire "/ Application / Factories" et ajoutez le fichier [SignalR-factory.js]

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;
});

étape 5: mettre à jour app.js

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

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

localhost: 21991 / signalr | c'est votre Url SignalR Hubs

étape 6: ajouter un contrôleur

Accédez au répertoire "/ Application / Controllers" et ajoutez le fichier [appController.js]

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] (classe publique)> ChatHub.cs

Remarque: n'insérez pas HubName avec les majuscules, la première lettre est la casse inférieure.

signalR.client () | Cette méthode tente de se connecter à vos concentrateurs et d'obtenir toutes les fonctions dans les concentrateurs. Dans cet exemple, nous avons "chatHub" pour obtenir la fonction "broadcastMessage ()";

étape 7: ajouter index.html dans la route du répertoire

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

Résultat avec image

Utilisateur 1 (envoyer et recevoir)
Utilisateur 2 (envoyer et recevoir)

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS
SignalR avec AngularJs

Recherche…

Introduction

SignalR et AngularJs [ChatProject]