AngularJS
AngularJs가있는 SignalR
수색…
소개
이 기사에서는 AngularJs 및 SignalR을 사용하여 간단한 프로젝트를 만드는 방법에 대해 중점적으로 다룹니다.이 교육에서는 angleJs로 앱을 만드는 방법, 각도에서 서비스를 만들고 사용하는 방법에 대해 알아야합니다. 또한 SignalR에 대한 기본 지식 " https://www.codeproject.com/Tips/590660/Introduction-to-SignalR 을 권장합니다.
SignalR 및 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" 디렉토리로 이동하여 [Startup.cs, ChatHub.cs] 파일 2 개를 추가하십시오 .
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 단계 : 각도 앱 만들기
"/ Application" 디렉토리로 이동하여 [app.js] 파일 추가
app.js
var app = angular.module("app", []);
4 단계 : SignalR Factory 생성
"/ 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");
});
localhost : 21991 / signalr | 이것이 당신의 SignalR Hubs URL입니다
6 단계 : 컨트롤러 추가
"/ Application / Controllers" 디렉토리로 이동하여 [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 (보내기 및 받기)
