AngularJS
AngularJs के साथ सिग्नलआर
खोज…
परिचय
इस अनुच्छेद में हम "AngularJs और SignalR का उपयोग करके एक सरल परियोजना कैसे बनाएं" पर ध्यान केंद्रित करते हैं, इस प्रशिक्षण में आपको "कोणीय के साथ ऐप कैसे बनाएं", "कोणीय पर सेवा का उपयोग कैसे करें / उपयोग करें" और सिग्नलआर के बारे में बुनियादी ज्ञान के बारे में जानने की आवश्यकता है। "इसके लिए हम https://www.codeproject.com/Tips/590660/Introduction-to-SignalR) सलाह देते हैं।
सिग्नलआर और एंगुलरज [चैटप्रोजेक्ट]
चरण 1: प्रोजेक्ट बनाएँ
- Application
- app.js
- Controllers
- appController.js
- Factories
- SignalR-factory.js
- index.html
- Scripts
- angular.js
- jquery.js
- jquery.signalR.min.js
- Hubs
सिग्नलआर संस्करण का उपयोग: सिग्नलआर-2.2.1
चरण 2: Startup.cs और ChatHub.cs
अपनी "/ हब" निर्देशिका पर जाएं और 2 फाइलें जोड़ें [Start.up.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: सिग्नलआर फैक्टरी बनाएँ
अपनी "/ Application / Factories" निर्देशिका पर जाएं और [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");
});
लोकलहोस्ट: 21991 / सिग्नल | यह आपका सिग्नलआर हब उरल्स है
चरण 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
नोट: हबनाम को ऊपरी मामले के साथ न डालें, पहला अक्षर लोअर केस है।
signalR.client () | यह विधि आपके हब से कनेक्ट करने और हब में सभी फ़ंक्शन प्राप्त करने का प्रयास करती है, इस नमूने में हमारे पास "chatHub" है, "प्रसारण प्रसारण ()" फ़ंक्शन प्राप्त करने के लिए;
चरण 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 (भेजें और प्राप्त करें)
