소개

ASP.NET SignalR을 사용한 가장 간단한 채팅 프로그램을 만들고자할 때에는 아래 절차를 따르면 됩니다.

따라하기

(1) 프로젝트의 ~/Hubs/ 폴더에 SignalR Hub 클래스를 ChatHub.cs 파일로 추가한 후 아래와 같이 채팅의 서버측 기능을 구현합니다.

채팅 서버 영역:

using MemoEngine.ViewModels.ChatRoomViewModel;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using System.Collections.Generic;
using System.Linq;
using System.Threading;

namespace MemoEngine.Hubs
{
    [HubName("chat")]
    public class ChatHub : Hub
    {

        #region SimpleChat

        /// <summary>
        /// C -> S
        /// 클라이언트에서 서버로 간단한 메시지(msg) 전송
        /// </summary>
        /// <param name="msg"></param>
        public void ClientToServer(string msg)
        {
            // S -> Cs
            Clients.All.serverToClient(msg);
        }

(2) ASP.NET MVC에 SimpleChatController.cs와 SimpleChat/Index.cshtml 페이지에 아래와 같이 채팅의 클라이언트 측 코드를 구현합니다.

채팅 클라이언트 영역:

@{
    ViewBag.Title = "초간단 채팅";
}

<h2>Simple Chatting</h2>

<input type="text" id="msg" />
<input type="button" id="send" value="전송" />
<ul id="msgs"></ul>

<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="~/signalr/hubs"></script>
<script>
    $(function () {

        //[!] 로깅 설정
        $.connection.hub.logging = true;

        //[1] 채팅 서버 연결
        var chat = $.connection.chat;

        //[2] 서버 -> 클라이언트
        chat.client.serverToClient = function (msg) {
            $("#msgs").append("<li>" + msg + "</li>"); // 받기
        };

        //[3] 클라이언트 -> 서버
        $.connection.hub.start().done(function () {
            $("#send").click(function () {
                chat.server.clientToServer($("#msg").val()); // 전송
            });
        });

        //[!] 예외 처리
        $.connection.hub.error(function (err) {
            alert("에러 발생 : " + err);
        });

    });
</script>