Usage_HelloWorld

HelloWorld Api 만들기

간단한 HelloWorld Api 를 만들어 보면서, WebSocketIo 가 어떻게 동작하는지 알아봅니다.

1. HelloWorldController 만들기

먼저 HelloWorldController.cs 클래스 파일을 생성하고, 다음과 같이 WebSocketIoController 클래스를 상속합니다.

[Route("/api")]
public class HelloWorldController : WebSocketIoController
{
    private readonly IWebSocketIo _webSocketIo;

    public HelloWorldController(IWebSocketIo webSocketIo) : base(webSocketIo)
    {
        _webSocketIo = webSocketIo;
    }
}

2. Hello 액션 만들기

가장 기본적인 방법으로 'hello world'를 반환하는 액션 메서드 입니다. 기존의 ASP.NET Core Mvc를 이용하여 REST API 를 만드는 방법과 완전히 동일합니다.

[Route("hello")]
public IActionResult Hello()
{
    return Ok(new
    {
        Result = "hello world"
    });
}

3. 웹 브라우저에서 테스트

웹 브라우저를 실행한 후 http://localhost:12345/api/hello 를 타이핑 하면, 아래와 같은 결과를 나타냅니다.

{
    "result": "hello world"
}

4. 웹소켓을 이용하여 테스트

자바스크립트 또는 노드(Node) 환경에서 테스트해 볼 수 있지만, 간단하게 웹 브라우저의 개발자 도구를 이용하여 웹소켓 테스트를 합니다.

먼저 크롬(또는 개발자 도구를 지원하는 웹 브라우저) 브라우저를 실행하고, F12 키 또는 브라우저의 메뉴에서 '개발자 도구'를 실행합니다. 그리고 아래의 자바스크립트를 복사하여 붙여 넣습니다.

아래의 자바스크립트는 웹소켓 객체를 생성하고 연결이 되면 API 를 호출하기 위한 패킷을 전송하는 예시 입니다. (주의: WebSocketIo 를 사용하여 서버로 메시지를 전달할 때는 반드시 문자열 형식의 JSON으로 전송해야 합니다.)

var socket = new WebSocket('ws://localhost:12345');
socket.onopen = function() { socket.send(JSON.stringify({ path: '/api/hello' })); }
socket.onmessage = function(event) { console.log(event.data); }

만약 정상적으로 API 가 호출되었다면 아래의 결과가 출력됩니다.

{
    "id":null,
    "emitName":null,
    "type":0,
    "statusCode":200,
    "data":{"result":"hello world"}
}