[Web] 바이너리 데이터 JSON 형태로 전송 (Base64 인코딩 및 디코딩)

1. 개요

JSON 포맷으로 웹소켓 통신 등을 하다보면, 이미지와 같은 바이너리 데이터를 전송해야 하는 경우가 있다.

이럴 때, 바이너리 데이터를 Base64 포맷으로 인코딩하여 JSON 포맷으로 전송하면 된다.

2. Base64 인코딩 및 디코딩

(1) JavaScript

a. 인코딩

// 가정: data는 이미지 이진 데이터(예: fs.readFileSync("image.png")) 형태의 Buffer
const message_base64 = data.toString("base64");

// 이제 JSON에 담아서 전송하고 싶다면:
const jsonObj = {
  type: "image",
  data: message_base64,
};
const jsonStr = JSON.stringify(jsonObj);

// WebSocket 등으로 jsonStr 전송
ws.send(jsonStr);

b. 디코딩

const jsonStr = JSON.parse(jsonStr);

if (jsonStr.type === "image") {
  // Base64 문자열 → Buffer
  const data = Buffer.from(jsonStr.data, "base64");
}

(2) Python

a. 인코딩

import base64
import json

# 가정: data는 이미지 파일에서 읽은 바이너리 (예: open("image.png", "rb").read())
message_base64_bytes = base64.b64encode(data)  # data가 이미 bytes라면 그대로 가능
message_base64_str = message_base64_bytes.decode("utf-8")  # JSON에 넣으려면 str이 필요

json_obj = {
    "type": "image",
    "data": message_base64_str
}
json_str = json.dumps(json_obj)
# 이제 json_str을 웹소켓 등으로 전송

b. 디코딩

import json
import base64

# ws_message: 웹소켓으로 받은 JSON 문자열
json_obj = json.loads(ws_message)
if json_obj["type"] == "image":
    message_base64_str = json_obj["data"]
    data = base64.b64decode(message_base64_str)  # 이진 데이터 복원

(3) C++

a. 인코딩

#include <string>
#include <boost/beast/core/detail/base64.hpp>

namespace Base64 = boost::beast::detail::base64;

std::string message_base64;
message_base64.resize(Base64::encoded_size(input.size()));
Base64::encode(&message_base64[0], input.data(), input.size());

b. 디코딩

#include <string>
#include <boost/beast/core/detail/base64.hpp>

namespace Base64 = boost::beast::detail::base64;

std::string decoded;
decoded.resize(Base64::decoded_size(message_base64.size()));
auto result = Base64::decode(&decoded[0], message_base64.data(), message_base64.size());
decoded.resize(result.first);