AngularJS
SignalR met AngularJs

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


Invoering

In dit artikel richten we ons op "Hoe maak je een eenvoudig project met AngularJs en SignalR", in deze training moet je weten over "hoe app met angularjs maken", "hoe service op angular te creëren / gebruiken" en basiskennis over SignalR "hiervoor bevelen wij https://www.codeproject.com/Tips/590660/Introduction-to-SignalR aan) .

SignalR en AngularJs [ChatProject]

stap 1: project maken 

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

Gebruik van de SignalR-versie: signalR-2.2.1

Stap 2: Startup.cs en ChatHub.cs

Ga naar uw map "/ Hubs" en voeg 2 bestanden toe [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);
        }
    }
}

stap 3: maak een hoekige app

Ga naar uw map "/ Application" en voeg het bestand [app.js] toe

app.js 

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

stap 4: creëer SignalR Factory

Ga naar uw map "/ Application / Factories" en voeg het bestand [SignalR-factory.js] toe

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

stap 5: update app.js 

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

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

localhost: 21991 / signalr | dit zijn de URL's van je SignalR Hubs

stap 6: controller toevoegen

Ga naar uw map "/ Application / Controllers" en voeg het bestand [appController.js] toe 

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] (openbare klasse)> ChatHub.cs

Opmerking: voeg geen HubName in met hoofdletters, de eerste letter is kleine letters .

signalR.client () | deze methode probeert verbinding te maken met uw hubs en krijgt alle functies in de Hubs, in dit voorbeeld hebben we "chatHub" om de functie "broadcastMessage ()" te krijgen;

stap 7: voeg index.html toe aan de route van de map

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

Resultaat met afbeelding

Gebruiker 1 (verzenden en ontvangen)

Gebruiker 2 (verzenden en ontvangen)



Modified text is an extract of the original Stack Overflow Documentation
Licentie onder CC BY-SA 3.0
Niet aangesloten bij Stack Overflow