Asp.net Signal R 실시 간 채 팅 프로그램 만 들 기
ASP.NET 을 사용 하면 SignalR 2 에서 실시 간 채 팅 프로그램 을 만 듭 니 다.Signal R 을 MVC 5 프로그램 에 추가 하고 채 팅 보 기 를 만들어 메 시 지 를 보 내 고 표시 합 니 다.
데모 에 서 는 SignalR 개발 미 션 을 U 포함 하여 학습 합 니 다.
MVC 5 애플 리 케 이 션 에 SignalR 도서관 을 추가 합 니 다.
클 라 이언 트 에 내용 을 전달 하기 위해 서 클 라 이언 트 와 호 연 시작 클래스 를 만 듭 니 다.
웹 페이지 에 있 는 SignalR jQuery 라 이브 러 리 를 사용 하여 메 일 을 보 내 고 클 러 스 터 에서 업 데 이 트 를 표시 합 니 다.
아래 화면 스냅 샷 은 브 라 우 저 에서 실행 중인 완 료 된 채 팅 프로그램 을 보 여 줍 니 다.
실현
ASP.NET MVC 5 프로그램 을 만 들 고 Signal R 라 이브 러 리 를 설치 하 며 채 팅 프로그램 을 추가 하고 만 듭 니 다.
1).Visual Studio 에서 C\#ASP.NET 응용 프로그램의 대상.NET 프레임 워 크 4.5 를 만 들 고 Signalrchat 라 고 이름 을 짓 고 확인 을 누 르 십시오.
2).New ASP.NET Project 대화 상자 에서 MVC 를 선택 하고 인증 변경 을 누 르 십시오.
메모:프로그램 이 서로 다른 인증 공급 자 를 선택 하면 Startup.cs 클래스 를 만 듭 니 다.인증 이 없 는 모든 것 을 선택 하여 Startup 클래스 를 만 듭 니 다.
3).SignalR 설치
도구|라 이브 러 리 관리자|패키지 관리자 콘 솔 을 열 고 다음 명령 을 실행 합 니 다.이 단 계 는 프로젝트 에 스 크 립 트 파일 을 추가 하고 signalR 기능 을 사용 하 는 프로그램 집합 참조 입 니 다.
입력:install-package Microsoft.AspNet.SignalR
설치 가 완료 되 었 습 니 다.Scripts 폴 더 에 다음 파일 이 나 타 났 습 니 다.
4).Startup 클래스 만 들 기:
루트 디 렉 터 리 아래 에 클래스 를 만 듭 니 다.이름 은 Startup 입 니 다.
using Owin;
using Microsoft.Owin;
[assembly: OwinStartup(typeof(SignalRChat.Startup))]
namespace SignalRChat
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
// Any connection or hub wire up and configuration should go here
app.MapSignalR();
}
}
}
마우스 우 클릭 으로 Hubs 폴 더 를 누 르 십시오.추가|새 항목 을 누 르 고 Visual C\#|Web|을 선택 하 십시오.그러면 SignalR 노드 는 설 치 된 창 에서 중심 창 에서 SignalR 허브 클래스(v2)를 선택 하고 ChatHub.cs 라 는 이름 을 만 듭 니 다.
코드 수정:
using System;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace SignalRChat
{
public class ChatHub : Hub
{
public void Send(string name, string message)
{
// Call the addNewMessageToPage method to update clients.
Clients.All.addNewMessageToPage(name, message);
}
}
}
public ActionResult Chat()
{
return View();
}
코드 변경:
@{
ViewBag.Title = "Chat";
}
<h2>Chat</h2>
<div class="container">
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" />
<input type="hidden" id="displayname" />
<ul id="discussion"></ul>
</div>
@section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-2.0.3.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// server Hub class ， ChatHub(Hubs )
var chat = $.connection.chatHub;
// client javascript function， server hub， dynamic ， Clients javascript function
chat.client.addNewMessageToPage = function (name, message) { // fuction(name,message)=>ChatHub.cs Send(string name, string message)
// server sendMessage ， server push message ， wholeMessage
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
// Get the user name and store it to prepend to messages.
$('#displayname').val(prompt('Enter your name:', ''));
// Set initial focus to message input box.
$('#message').focus();
// connection
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// server Hub ， #message server
chat.server.send($('#displayname').val(), $('#message').val());
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
좋은 웹페이지 즐겨찾기
