믹스드코드랩:ASP.NET MVC5 기반 SignalR 개발 기초 실습하기1

안녕하세요. 믹스드코드입니다.

여러분 컴퓨터에 개발환경이 모두 구축되었다고 가정하고 바로 ASP.NET MVC5 웹 응용프로그램 기반에서의 SignalR 웹채팅 기본기능을 구현해보도록 하겠습니다.

1)Visual Studio 2015 or 2017를 오픈합니다.
-개발 예시는 Visual Studio 2015 버전을 기준으로 설명드리며 Visual Studio 2017버전과의 차이가 있는부분은 별도 캡처제공드립니다.

2) 먼저 새로 만들기> 프로젝트를 클릭하여 ASP.NET MVC5 웹 응용 프로그램 프로젝트를 한개 만들도록 하겠습니다.

3) 좌측 템플릿에서 C# 언어를 선택하고 하위에 웹을 선택한 후 상단에 .NET Framework버전을 4.5를 선택 후 ASP.NET 웹 응용 프로그램을 선택합니다.
-이름: 웹 프로젝트 및 웹 응용프로그램의 이름을 영문으로 작성합니다.
-위치: 솔루션과 프로젝트가 생성될 로컬 드라이브 위치를 지정합니다.
-솔루션이름: 솔루션명을 별도 입력해도 되지만 디폴트로 두면 웹프로젝트명과 동일한 명으로 지정됩니다.

Tip)Visual Studio 2015 솔루션 및 프로젝트 관리에 대한 기존글 참조 (중간 정도에 있음)
http://mixedcode.com/Article/Index?aidx=1066

4)ASP.NET MVC 템플릿 선택 및 WEB API 체크박스를 추가 선택합니다.
-ASP.NET Framework를 이용한 웹 응용프로그램 개발은 Webforms방식,MVC(5)방식,SinglePage방식 3방식이 제공됩니다.
-WEB API는 ASP.NET OPEN API 서버측 기술환경을 제공합니다.
-인증변경: 인증안함 선택

5) ASP.NET 웹응용프로그램 개발 프로젝트가 생성되었습니다.
- ASP.NET MVC5 샘플 개발 템플릿이 제공되며 프로젝트의 기본 구조가 자동 생성됩니다.
- F5를 누르거나 상단 디버그 메뉴에서 디버깅 시작을 클릭해서 디버깅 모드로 샘플 MVC5 웹사이트를 실행해보세요.

6) ASP.NET MVC5 샘플 웹사이트의 메인페이지가 오픈된것을 확인할수 있습니다.

7)상단 단축아이콘중 빨간색 네모를 클릭하거나 상단메뉴중 디버그> 디버깅 중지를 클릭하면 디버깅 모드가 종료됩니다.

8)이제 본격적으로 ASP.NET MVC5 웹 개발환경에 오픈소스인 ASP.NET SIgnalR을 개발 팩키지를 설치하도록 하겠습니다.
-Nuget팩키지 관리자 콘솔을 클릭하고 하단 콘솔입력란에 " install-package Microsoft.AspNet.SignalR " 를 입력하고 엔터를 칩니다.

9)Nuget 팩키지 관리자에 의해 Neget저장소에서 SignalR 관련 오픈소스 라이브러리들이 자동으로 프로젝트에 추가된것을 확인할수 있습니다.
-참조 및 자바스크립트 라이브러리 자동 참조 추가됨.

-Microsoft.AspNet.SignalR.Core.DLL 참조 자동 추가
-Microsoft.AspNet.SignalR.SystemWeb.DLL 참조 자동 추가

-Jquery.signalR-2.2.1js 스크립트파일 자동 추가
-Jquery.signalR-2.2.1.min.js 스크립트 압축파일 자동 추가

10) Hubs폴더를 추가하고 ChatHub클래스를 추가합니다.

11) SignalR Hub 클래스를 선택하고 ChatHub 클래스 파일을 추가합니다.

12) ChatHub클래스에 Send 메소드를 정의합니다.
-Send메소드는 클라이언트로부터 채팅자명,채팅메시지를 수신하고 관련 수신 메시지를 현재 접속해있는 모든 클라이언트(웹브라우저) 에게 수신 메시지를 발송하기 위한 채팅서버측 메소드입니다.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
namespace WebChatSystem.Hubs
{
    public class ChatHub : Hub
    {
        public void Hello()
        {
            Clients.All.hello();
        }
        public void Send(string name, string message)
        {
            Clients.All.addNewMessageToPage(name, message);
        }
    }
}

13) Startup 클래스를 웹프로젝트 루트에 생성합니다.
-Startup.cs 파일은 웹 응용 프로그램이 시작되는 시점에 웹 응용 프로그램의 각종 환경을 설정하는 기능을 제공합니다.


using Owin;
using Microsoft.Owin;
using Microsoft.AspNet.SignalR;
[assembly: OwinStartup(typeof(WebChatSystem.Startup))]
namespace WebChatSystem
{
    public class Startup
    {
        public void Configuration(IAppBuilder app)
        {
            HubConfiguration hubConfiguration = new HubConfiguration() { EnableJSONP = true };
            app.MapSignalR(hubConfiguration);
        }
    }
}

14) ASP.NET MVC5 웹 어플리케이션에 SignalR 환경을 매핑시킵니다.
- SignaR 개발환경 구축이 완료되었습니다.

15) 채팅 웹페이지 생성을 위해 HomeController에 Chat 액션메소드를 추가하고 관련 뷰를 생성합니다.

16) Chat 액션메소드에 해당하는 뷰를 생성합니다.
- Chat 액션메소드에 오른쪽 마우스 클릭 후 뷰추가를 클릭합니다.

17) Chat 뷰의 레이아웃 페이지를 선택합니다.

18) Chat View를 확인하고 HTML 및 스크립트 코딩을 실시합니다.

19) 아래와 같이 뷰를 코딩합니다.

@{
    ViewBag.Title = "Chat";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<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 src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
    <script src="~/signalr/hubs"></script>
    <script>
        $(document).ready(function () {
            var chat = $.connection.chatHub;
            chat.client.addNewMessageToPage = function (name, message) {
                $('#discussion').append('<li><strong>' + htmlEncode(name)+ '</strong>: ' + htmlEncode(message) + '</li>');
            };
            $('#displayname').val(prompt('Enter your name:', ''));

            $('#message').focus();

            $.connection.hub.start().done(function () {
                $('#sendmessage').click(function () {
                    chat.server.send($('#displayname').val(), $('#message').val());
                    $('#message').val('').focus();
                });
            });
        });
        function htmlEncode(value) {
            var encodedValue = $('<div />').text(value).html();
            return encodedValue;
        }
    </script>
}

20) 코딩을 완료하고 F5 를 누르거나 또는 상단 메뉴중 디버그> 디버깅 실행 메뉴를 클릭합니다.

20) 채팅 뷰페이지가 오픈되며 해당 주소로 여러 브라우저를 오픈하여 상호 채팅 테스트를 실시해보세요.

21) 이전 초간단 채팅 페이지의 서버 페이지인 3번째 페이지가 방금 여러분이 개발한 서버 페이지와 동일합니다.

지금까지 Visual Studio 2015와 ASP.NET MVC5 + ASP.NET SignalR 오픈소스를 활용해 간단한 웹채팅 기능을 서버와 클라이언트 기능을 모두 구현해보았습니다.

지금까지 Visual Studio 2015 개발툴을 이용해 ASP.NET MVC5 웹 응용프로그램 환경 과 ASP.NET SignalR 오픈소스를 이용해 간단한 웹채팅 기능을 함께 구현해보았습니다.
어떠신가요?
아직은 무언가 혼란스럽긴 하지만 채팅 개발이 이렇게 쉽나 할정도로 너무 간단하지 않나요?
오프라인 코드랩 교육 현장에서 좀더 자세한 설명을 드릴 예정이오니 너무 걱정은 하시지 마세요.

22) Hub Server Class vs Hub Proxy Javascript file
Hubs 폴더에 생성한 ChatHub 서버측 클래스를 생성하면 런타임에 ~/signalr/hubs 경로로 자동으로 서버측 ChatHub.cs와 매칭되는 자바스크립트 프록시 파일이 생성됩니다.
직접 여러분 개발 디버깅 환경의 http://localhost:55420/signalr/hubs 주소경로를 브라우저에서 쳐보면 자바스크립 파일이 다운로드됩니다.
해당 파일은 뷰화면 상단에서 경로를 참조하고 있는것을 보실수 있구요.
해당 자바스크립트 프록시 파일과 서버 허브 파일간에 서로 메시징을 주고받는 구조로 채팅의 흐름이 구성되어 있다고 생각하시면 이해가 쉽습니다.