믹스드코드랩:웹채팅 기능구현하기1(템플릿 반영,채팅방입장 및 채팅하기)

안녕하세요. 믹스드코드 강창훈입니다.
웹채팅 코드랩 두번째 날 실습할 내용은 채팅 HTML 템플릿을 이용한 조금 더 그럴싸한? 채팅 서비스를 직접 구현해보도록 하겠습니다.
템플릿을 ASP.NET MVC5 웹페이지에 적용해보고 채팅방 입장 및 여러 사용자와 기본적인 채팅 메시지를 주고받을수 있는 기능을 함께 구현해보겠습니다.

HTML 템플릿은 아래 다운로드 링크주소에서 다운받으시구요.
http://mixedcode.com/download/WebChatTemplate.zip

1. 채팅 템플릿을 다운받고 압축을 해제합니다.
-폴더내에 있는 ChatTemplate.html 을 클릭하고 브라우저에서 보여지는 내용을 먼저 확인해보세요.
-WebChatTemplate 폴더내의 모든 폴더와 파일을 선택하고 복사합니다.

2. 기존 실습시간에 만들어둔 웹채팅 ASP.NET MVC5 채팅 솔루션을 Visual Studio로 오픈하고 웹프로젝트에 붙여넣기합니다.
-기존에 생성한 WebChatSolution 폴더내의 .sln 솔루션 파일을 클릭하거나 VisualStudio 를 가동하고 기존 솔루션을 열기합니다.
-솔루션 폴더내에 있는 웹프로젝트를 선택하고 오른쪽 마우스 클릭 탐색기에서 복사한 내용을 붙여넣기합니다.

3.붙여넣기 하면 관련 파일 및 폴더들이 추가되며 중복폴더 경고메시지가 나오면 덮어쓰기를 합니다.

4. 웹프로젝트 루트에 복사된 ChatTemplate.html 문서를 참고해서 MVC 채팅 뷰를 만들어보도록 하겠습니다.
-Controllers 폴더내 HomeController를 오픈하고 Talk 액션메소드를 하나 추가합니다.
-Talk 액션 메소드에 오른쪽 마우스 클릭 후 뷰추가 를 클릭합니다.

5. 해당 Talk 뷰는 단일 HTML 페이지로 구성되며 레이아웃(마스터) 페이지가 필요하지 않습니다.
-Talk 뷰 페이지는 채팅 전용 페이지로 개발될 예정입니다.

6. Views\Home\Talk.cshtml 뷰 페이지가 추가된것을 확인합니다.

7. 제공된 템플릿 html 페이지의 코드를 복사하여 Talk.cshtml 뷰 페이지에 추가합니다.
- 웹프로젝트 루트에 제공된 ChatTemplate.html 테플릿 페이지의 소스를 복사하여 Talk 뷰 페이지에 아래와 같이 전체를 붙여넣기합니다.
- 스타일시트 파일 경로를 오른쪽과 같이 수정해주세요. <link rel="stylesheet" href="/Content/ThemeDefault/style.css" />

8. F5 를 누르거나 상단 아이콘중 디버깅 시작 을 클릭하여 웹브라우저로 Talk뷰를 확인합니다.
- 디버깅 후 오픈된 웹브라우저에 /Home/Talk 경로로 호출하면 해당 뷰를 확인 할수 있습니다.

9. 채팅 기능 구현을 위한 TalkHub 클래스를 추가합니다.
-웹프로젝트 내 Hubs폴더에 오른쪽 마우스 클릭 추가>새항목을 클릭합니다.

10. 웹 템플릿의 하위에 SignalR 템플릿을 선택 후 SignalR 허브 클래스 항목을 선택합니다.
- TalkHub.cs 클래스 파일로 이름 지정후 추가합니다.

11. Hubs 폴더에 TalkHub.cs 채팅 서비스 허브 클래스가 추가되었습니다.

12. 먼저 채팅방 입장 화면을 표현하는 아래 HTML 태그 영역를 확인해보세요.
-대화명 입력 텍스트박스 하나와 입장 버튼이 존재합니다.

13. Talk뷰 페이지의 하단에 존재하는 스크립트 영역을 확인합니다.
- 채팅 화면이 최초 로딩되면 숨어있던 입장하기 영역 레이어가 나타나게 처리했습니다.
- 디폴트 대화면을 "ChatUser1" 으로 세팅합니다.

<script type="text/javascript">

        var chat = $.connection.talkHub;
        var groupName = "MixedCodeGroup";
        var chatNickName = "ChatUser1";

$(function () {

            //채팅방 입장 레이어 가운데 정렬 및 보이기처리
            $('#tmPopWrap').css({ position: 'absolute' }).css({ left: ($(window).width() - $('.tmBody').outerWidth()) / 2, top: 100 });
            $("#tmPopWrap").show();
            $("#tmInputName").focus();
            $("#tmInputName").val(chatNickName);

});

</script>

14. 디버깅 후 정상적으로 대화명 설정 팝업이 오픈되는것을 확인합니다.

15. 대화명을 입력하고 채팅방에 입장하는 기능을 구현합니다.
- 채팅방 입장 버튼을 클릭하면 간단한 입력 유효성 검사를 하고 TalkHub.cs 채팅서비스의 Entry 메소드를 호출합니다.
- TalkHub.cs 클래스 파일에 Entry 메소드를 구현합니다.
- TalkHub Entry 메소드에서는 입장한 사용자의 대화명을 받아 전체 접속자에게 입장알림 메시지를 발송합니다.
- 뷰페이지에 entryMessage 수신 이벤트를 등록하고 수신메시지를 이용하여 html태그와 스타일을 지정하여 화면에 표기합니다.

Client - Talk.cshtml (View)

 // 채팅방 입장 메시지처리
 chat.client.entryMessage = function (message) {
 var html = '';
 html += '';
 html += '' + message + '';
 html += '';

 $("#tmMessageList .tmInner").append(html);
 };

            //채팅방 입장처리
            $("#tmBtnConfirmName").click(function () {
                //debugger;
                var userName = $("#tmInputName").val();

                if (userName == "") {
                    alert("대화명을 입력해주세요.");
                    $("#tmInputName").focus();
                    return false;
                }

chatNickName = userName;

$.connection.hub.start().done(function () {

                    //사용자 대화방 입장정보 전송
                    chat.server.entry(chatNickName);
                    $("#tmPopWrap").hide();
                });
            });

Server - TalkHub.cs (Message Service )

 /// <summary>
 /// 사용자 대화방 입장 및 입장 알림 브로드캐스팅
 /// </summary>
 /// <param name="userName"></param>
 public void Entry(string userName)
 {
 string entryMsg = string.Format("{0}님이 입장하셨습니다.", userName);
 Clients.All.EntryMessage(entryMsg);
 }

16. 채팅화면 가운데로 한줄씩 입장메시지가 나타나는것을 확인합니다.

17. 채팅방 입장 후 채팅 메시지를 보내는 기능을 구현합니다.
- 아래 채팅 목록 및 메시지 입력 및 전송 HTML 태그 영역을 확인해주세요.

18. 채팅 메시지 전송 및 수신 기능을 구현합니다.
- 뷰에서 전송 버튼을 클릭하면 TalkHub.cs 메시징 클래스의 Send 메소드에 입력 메시지를 전달합니다.
- 해당 메시지는 본인을 제외한 모든 사용자에게 발송되며 본인 발신 메시지는 화면 우측영역에 발송시 직접 표기해줍니다.
- TalkHub.cs 에 Send 메소드를 구현하고 메시지 발신자를 제외한 모든 사용자에게 메시지를 전송합니다.
- 본인을 제외한 모든 사용자는 getMessage 함수를 통해 메시지를 수신하고 호면 좌측에 타인으로부터 수신한 메시지를 표기합니다.

Client - Talk.cshtml (View)

            // 채팅 메시지 수신처리
            chat.client.getMessage = function (userName, message) {
                //debugger;

if ($("#writting").length > 0) { $("#writting").remove(); }

message = message.replace(/[\r|\n]/g, " ");
message = message.replace(/ /g, ' ');

var html = '';
 html += '';
 html += ' ' + userName + '';
 html += ' ' + message + '';
 html += ' ';
 html += '';

$("#tmMessageList .tmInner").append(html);
};

            //채팅메시지 발송
            $("#tmSendMessage").click(function () {
                debugger;
                var message = $("#tmInputMessage").val();
                chat.server.send(chatNickName, message);

var html = '';
 html += '';
 html += ' ' + message + '';
 html += ' ';
 html += '';

                $("#tmMessageList .tmInner").append(html);
                $("#tmInputMessage").val("").focus();
            });

Server - TalkHub.cs (Message Service )

/// <summary>
 /// 채팅 메시지 수신 및 브로드 캐스팅
 /// </summary>
 /// <param name="userName"></param>
 /// <param name="message"></param>
 public void Send(string userName, string message)
 {
 message = message.Replace("<", "<").Replace(">", ">");
 Clients.Others.GetMessage(userName, message);
 }

19. 채팅방 입장 및 메시지 수발신이 정상적으로 아래와 같이 이루어집니다.