SignalR을 이용한 웹과 네이티브 어플리케이션간 채팅 구현

몇일 전 부터 SignalR에 꽂혀서 조금씩 공부를 하기 시작 했습니다.

좀 아쉬운 점은 서버를 구현하기 위해서는 닷넷 프레임워크 4.5 이상이 되어야 합니다. 즉, Visual Studio2012이상에서 개발 하셔야 합니다. 2014년도 인데 이제 갈아 탈만도 하죠; 회사에서 아직까지 2010을 사용하는 제가 구식일지도;;

1. 서버 구현하기

Step by step으로 구현하겠습니다.

빈 웹 프로젝트를 만들어 줍니다.

첫째로 nuget으로 SignalR을 검색해서 패키지를 추가해 줍니다.

nuget이 없으시다면 설치를 추천드립니다. 만약 하기 싫으시다면 도구 -> 라이브러리 패키지 관리자 -> 패키지 과리자 콘솔 로 들어가 install-package Microsoft.AspNet.SignalR 을 실행합니다.

여기까지 정상적으로 완료가 되면 SignalR관련 라이브러리와 자바스크립트 파일들이 설치가 됩니다.

두번째로 Startup을 구현해줍니다. Startup은 클라이언트와 서버의 접속점을 설정해주는 역할을 합니다.

솔루션 탐색기 -> 프로젝트 에서 오른쪽버튼 -> 추가 -> 클래스 실행합니다. Startup.cs파일을 만들고 아래와 같이 구현해줍니다.

보시면 아시겠지만 그리 복잡하지 않습니다.

정확히 내부 로직이 어떻게 되는지는 몰라 설명을 못드려 죄송합니다.

다음은 메시지를 받아서 모든 유저들에게 전송하는 Method를 구현하겠습니다. 

솔루션 탐색기 -> 프로젝트에서 오른쪽 버튼 -> 추가 -> 클래스 실행합니다. ChatHub.cs파일을 만들고 아래와 같이 구현합니다.

클래스 선언부에 HubName Attribute를 추가해줍니다. 이 HubName을 외부에서 이 메소드를 찾아가는데 필요한 역할을 해줍니다.

Line 15 에서 Clients는 서버에 접속한 모든 ClientContext들의 모음 입니다. All은 모든 Client를 의미하고 인텔리센스로 검색해보면 Caller라고도 나옵니다. Caller는 의미대로 메시지를 보낸 유저를 의미합니다. 위의 소스는 채팅을 받아서 모두에게 보내는 것입니다. 

2. 웹페이지 구현하기

이제 웹페이지를 구현해보겠습니다.

술루션 탐색기 -> 프로젝트에서 오른쪽 버튼 -> html 페이지 추가 실행합니다. index.html을 추가하고 파일의 오른쪽 버튼을 클릭하여 시작페이지로 설정합니다. 그리고 페이지를 아래와 같이 구현합니다.

SignalR을 설치하면 아마도 Visual Studio 버전에 따라 서로 다른 jquery파일이 설치 될 수도 있습니다. Line 22 ~ 23은 설치된 jquery파일을 잘 확인하시고 적어줍니다. 

Line 24는 서버 실행시 SignalR이 스크립트 파일을 만들어 줍니다.

Line 28은 허브에 연결합니다. $.connection.Chat에서 Chat은 ChatHub.cs에 HubName 기억하시죠? 바로 그 HubName으로 해당 클래스를 찾아갑니다.

ChatHub.cs의 Clients.All.broadcastMessage를 호출하면 자바스크립트에서 Line 29의 broadcastMessage가 호출이 됩니다. 즉, 서버에서 클라이언트 메소드를 호출하는 것이죠.

Line 40은 허브 연결이 끝나면 그 아래 코드를 호출하는데 sendmessage를 클릭하면 이름과 메시지가 전송됩니다. 

Line 42의 send는 ChatHub의 Send메소드를 호출하는 코드입니다. 자바스크립트에서 send를 Send로 바꿔서 해보니까 잘 안되었습니다. 소문자로 작성을 하지 서버 메소드가 호출이 잘되는데...그이유를 잘 모르겠습니다.

이렇게 서버의 작업은 모두 끝났으며, F5를 눌러 실행합니다. 

테스트로 Hello라는 텍스트를 입력하고 보냈습니다. 화면에 보여지는 Hello는 서버를 거쳐서 돌아 온 것입니다.

3. Native Application 구현하기

SignalR의 장점은 라이브러리만 잘 활용하면 Native Application에서도 작동합니다. 현재 서버를 IIS서비스로 호스팅을 하고 있지만 독자적인 호스팅도 가능합니다. 이 부분은 다음에 구현해보도록 하겠습니다.

SignalR 클라이언트는 닷넷 프레임워크, iOS, MONO로 구현이 가능하다고 합니다. 추후에는 C++에서도 가능하도록 구현중이며, 아마 자바도 나오지 않을까 싶네요.

콘솔응용 프로그램을 하나 만들어 줍니다. 

그리고 signalr.client를 설치 합니다. 서버와 마찬가지로 nuget에서 검색하거나, 패키지 관리자 콘솔에서 아래와 같이 입력하여 설치합니다.

PM > install-package Microsoft.AspNet.Signalr.client

client 소스가 길지 않으니 먼저 보겠습니다.

Line 14는 서비스 Url을 입력하여 새로운 커넥션을 만들어 줍니다.

Line 15는 HubName을 이용하여 proxy를 생성해 줍니다. HubName은 서버 소스와 마찬가지로 "Chat"이었죠.

Line 16은 Hub연결을 시작하고 연결될때까지 기다립니다. 주의할점은 proxy부터 생성하고 hub연결을 해야 합니다. 그렇지 않으면 오류가 발생합니다.

Line 17은 서버가 수행하는 broadcastMessage라는 클라이언트 메소드를 정의 한 것입니다.

Line 24는 proxy를 통해서 Send라는 서버 메소드를 실행하는 것입니다. 이렇게 준비는 끝났으며, 웹페이지와 네이티브간 채팅을 캡쳐하였습니다.

이렇게 SignalR을 통해서 채팅서버를 구현하였습니다.