Apidog

올인원 협업 API 개발 플랫폼

API 설계

API 문서

API 디버깅

API 모킹

API 자동화 테스트

웹소켓을 C에서 구현하는 방법 (초보자 가이드)

C에서 WebSocket 구현의 기본을 탐구하고, Apidog를 사용하여 WebSocket을 쉽게 전송하는 방법을 안내하는 실용적인 예제를 제공합니다.

Young-jae

Young-jae

Updated on December 20, 2024

WebSocket 은 클라이언트와 서버 간의 실시간 양방향 데이터 교환을 위해 사용되는 강력한 통신 프로토콜입니다. 장기간 연결을 설정하고 유지할 수 있는 능력 덕분에 즉각적인 데이터 업데이트가 필요한 애플리케이션에 적합합니다. C 언어로 WebSocket을 구현하는 데 관심이 있다면, 이 기사는 시작하는 데 필요한 간단한 가이드를 제공합니다.

libwebsockets 설치하기

현재 Tornado는 Python에서 WebSocket을 구현하기 위한 인기 있는 라이브러리입니다. 그러나 libwebsockets는 C 언어로 작성된 유연하고 사용하기 쉬운 크로스 플랫폼 WebSocket 라이브러리입니다.

libwebsockets는 C로 작성된 크로스 플랫폼 WebSocket 라이브러리로, WebSocket 프로토콜 관련 서버 및 클라이언트를 만들 수 있게 해줍니다. 이는 고성능 WebSocket 애플리케이션의 빠른 개발을 가능하게 하는 유연하고 사용자 친화적인 라이브러리입니다. 간단하고 가벼운 설계 덕분에 임베디드 시스템이나 대량의 연결을 처리하는 고부하 서버 애플리케이션을 구축하는 데 특히 적합합니다.

C

libwebsockets는 다음과 같이 설치할 수 있습니다:

git clone https://github.com/warmcat/libwebsockets.git
cd libwebsockets
mkdir build
cd build
cmake ..
make && sudo make install
pkg-config --modversion libwebsockets

libwebsockets.h 추가하기

#include <libwebsockets.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>

로직 코드 작성하기

#include <libwebsockets.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <time.h>

// 각 WebSocket 세션의 데이터를 저장하기 위한 구조체
struct per_session_data {
};

// WebSocket 서버 메시지를 위한 콜백 함수
int callback(struct lws *wsi, enum lws_callback_reasons reason, void *user, void *in, size_t len) {
    switch (reason) {
        case LWS_CALLBACK_ESTABLISHED: // 새로운 연결 이벤트 처리
            // 매초 타임스탬프를 보내기 위한 타이머 추가
            lws_callback_on_writable(wsi);
            break;
        case LWS_CALLBACK_SERVER_WRITEABLE: // 데이터 전송 이벤트 처리
            // 타임스탬프 전송
            time_t t = time(NULL);
            char timestamp[20];
            sprintf(timestamp, "%ld", t);
            lws_write(wsi, timestamp, strlen(timestamp), LWS_WRITE_TEXT);
            lws_callback_on_writable(wsi);
            break;
        // 다른 이벤트 생략
    }
    return 0;
}

int main(int argc, char **argv) {
    // WebSocket 프로토콜 생성
    static struct lws_protocols protocols[] = {
        {
            "demo-protocol", // 프로토콜 이름, 프론트엔드 코드의 WebSocket 프로토콜과 일치해야 함
            callback, // 콜백 함수 포인터
            sizeof(struct per_session_data), // 각 세션(연결) 데이터의 크기
            0, // 추가 프로토콜 매개변수 없음
            NULL, NULL, NULL
        },
        { NULL, NULL, 0, 0 } // 프로토콜 목록은 NULL로 끝남
    };

    // WebSocket 컨텍스트 생성
    struct lws_context_creation_info info = {
        .port = 3001, // 수신 포트 번호
        .protocols = protocols // 프로토콜 목록
    };
    struct lws_context *context = lws_create_context(&info);

    // WebSocket 컨텍스트 생성이 성공했는지 확인
    if (!context) {
        printf("WebSocket 컨텍스트를 생성하지 못했습니다.\n");
        return -1;
    }

    // 루프에 들어가 WebSocket 연결을 기다림
    while (1) {
        lws_service(context, 50);
    }

    // 정리하고 WebSocket 컨텍스트를 종료
    lws_context_destroy(context);

    return 0;
}

프론트엔드 페이지 WebSocket 연결하기

페이지 작성하기

index.html를 생성하고 아래 코드를 입력해야 합니다:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>문서</title>
  <script>
    window.onload = () => {
        if ('WebSocket' in window) {
            // WebSocket 연결 생성
            let ws = new WebSocket('ws://127.0.0.1:3001/websocket');
            // 연결이 성공적으로 설정되었을 때 메시지를 전송하여 서버가 데이터를 전송할 수 있게 함
            ws.onopen = () => {
                console.log('websocket 성공---');
                ws.send('성공');
            }
            ws.onmessage = (message) => {
                let data = message.data;
                console.log('websocket 메시지 수신---', data);
            }
            ws.onerror = () => {
                console.error('websocket 실패');
            }
        } else {
            console.error('websocket을 지원하지 않습니다');
        };
    };
</script>

</head>
<body>
  
</body>
</html>

페이지 실행하기

index.html 파일을 마우스 오른쪽 버튼으로 클릭하고 이 파일을 엽니다:

결과 보기

백엔드가 먼저 프론트엔드로부터 "open success"라는 메시지를 수신하고 연결이 성공적으로 이루어졌음을 확인할 수 있습니다.

그 후 연결이 설정되면 백엔드가 프론트엔드에 대한 정보를 출력하기 시작합니다.

Apidog으로 WebSocket 전송하기

C 언어로 WebSocket 구현에 대해 알아보았으므로, Apidog를 사용하여 WebSocket 요청을 보내는 방법을 살펴보겠습니다. 이전 섹션에서는 C에서 WebSocket 프로그래밍의 기본과 기술에 초점을 맞추었으나, Apidog는 사용자 친화적인 인터페이스를 통해 WebSocket API와 상호작용하는 편리한 방법을 제공합니다.

1단계. WebSocket 요청 생성하기

  • "+" 버튼을 클릭하고 "새 WebSocket API"를 선택합니다. 그런 다음 엔드포인트 구성에서 일반적으로 ws:// 또는 wss://로 시작하는 WebSocket URL을 지정합니다.
WebSocket 요청 생성하기

2단계. 메시지 보내기

메시지에 서버에 전달할 메시지를 입력할 수 있으며, 전송 후 서버는 당신이 보낸 메시지를 수신합니다.

메시지 보내기

노트: WebSocket 서버가 실행 중이며 Apidog와의 성공적인 통신이 가능하도록 접근할 수 있는지 확인하세요.

3단계. 요청 저장하기

작성을 마친 후 요청을 저장을 클릭하여 저장할 수 있으며, 다음 번에 빠르게 재사용할 수 있습니다.

요청 저장하기

4단계. WebSocket 서버에 연결하기

우선 연결 버튼을 클릭하여 WebSocket 연결을 만듭니다.

서비스에 연결 중

연결이 성공하면 Apidog에 성공 메시지가 표시됩니다. 서버 측도 연결이 성공했기 때문에 응답합니다.

성공적인 연결

5단계. WebSocket 요청 보내기

그런 다음 WebSocket을 통해 서버와 통신할 수 있습니다. Apidog를 사용하여 메시지와 매개변수를 서버에 보내려면 전송 버튼을 클릭하세요.

이미지

더 이상 연결을 원하지 않으면 연결 해제 버튼을 클릭할 수 있습니다.

이미지

노트:

Apidog는 웹 측과 클라이언트 측 모두를 가지고 있습니다. 웹 측을 사용하고 로컬 서비스를 디버깅하려면 Apidog용 Google 플러그인을 설치해야 합니다.

여기에서 다운로드: Apidog 브라우저 확장

결론

결론적으로 C 언어로 WebSocket을 구현하는 것은 "libwebsockets" 라이브러리를 설치하고 필요한 헤더 파일을 포함하며 로직 코드를 작성하는 것입니다. 또한 Apidog와 같은 도구를 사용하여 WebSocket 요청을 보내고 WebSocket 기능을 테스트할 수 있습니다.

GitHub Copilot 무료: 어떻게 시작하나요?튜토리얼

GitHub Copilot 무료: 어떻게 시작하나요?

GitHub Copilot 무료 사용법을 알아보세요. 이 AI 기반 코딩 도우미에 대한 이 가이드는 VS Code와 JetBrains와 같은 인기 IDE의 설정 단계를 다루며, 무료로 스마트한 코드 제안 및 완성을 통해 생산성을 높일 수 있도록 도와줍니다!

Young-jae

December 19, 2024

API 요청 최적화를 위한 ModHeader Chrome 확장 프로그램 사용 방법튜토리얼

API 요청 최적화를 위한 ModHeader Chrome 확장 프로그램 사용 방법

이 포괄적인 가이드에서 ModHeader Chrome 확장을 사용한 효과적인 API 테스트를 위한 실용적인 팁과 모범 사례를 배워보세요.

Young-jae

December 19, 2024

2025년에 HTTPie를 사용하는 방법은?튜토리얼

2025년에 HTTPie를 사용하는 방법은?

HTTPie는 HTTP 서버 및 API와의 상호작용을 간소화하는 명령줄 도구입니다. 2024년에 HTTPie를 사용하여 요청을 보내고, 파일을 업로드하며, 세션을 관리하는 방법을 배우세요.

Young-jae

December 18, 2024