AngularJS
SignalR с AngularJs

Angular 2 Cordova CSS HTML ionic-framework JavaScript jQuery Node.js PHP twitter-bootstrap
Поиск…


Вступление

В этой статье мы сосредоточимся на «Как создать простой проект с использованием AngularJs And SignalR», в этом обучении вам нужно знать о том, как создать приложение с помощью angularjs, «как создать / использовать сервис по угловому» и базовые знания о SignalR «для этого мы рекомендуем https://www.codeproject.com/Tips/590660/Introduction-to-SignalR) .

SignalR And AngularJs [ChatProject]

Шаг 1. Создание проекта 

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

Использование версии сигнала SignalR: signalR-2.2.1

Шаг 2: Startup.cs и ChatHub.cs

Перейдите в каталог «/ Hubs» и добавьте 2 файла [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);
        }
    }
}

Шаг 3: создание углового приложения

Перейдите в каталог «/ Приложение» и добавьте файл [app.js]

app.js 

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

Шаг 4: создать SignalR Factory

Перейдите в каталог «/ Приложение / Фабрики» и добавьте файл [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;
});

Шаг 5: обновите app.js 

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

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

localhost: 21991 / signalr | это ваш SignalR Hubs Urls

Шаг 6: добавьте контроллер

Перейдите в каталог «/ Приложение / Контроллеры» и добавьте файл [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] (открытый класс)> ChatHub.cs

Примечание: не вставляйте HubName с верхним регистром , первая буква ниже.

signalR.client () | этот метод пытается подключиться к вашим концентраторам и получить все функции в концентраторах, в этом примере у нас есть «chatHub», чтобы получить функцию «broadcastMessage ()»;

Шаг 7: добавьте index.html в маршрут каталога

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

Результат с изображением

Пользователь 1 (отправлять и получать)

Пользователь 2 (отправлять и получать)



Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow