[javascript] 자바스크립트 웹 소켓을 이용한 파일 업로드 구현하기

15 Dec 2023

javascript

이번에는 자바스크립트와 웹 소켓을 사용하여 파일 업로드를 구현하는 방법에 대해 살펴보겠습니다. 웹 소켓을 통해 실시간 양방향 통신을 수행하며, 이를 이용하면 파일을 조각으로 나누어 전송하고, 클라이언트 측에서 파일을 재구성할 수 있습니다.

필요한 라이브러리 설치

다음과 같이 npm을 이용하여 필요한 라이브러리를 설치합니다.

npm install ws

이와 함께, 클라이언트 측에서는 웹 소켓을 사용하기 위해 별도의 라이브러리를 설치할 필요가 없습니다.

서버 사이드 코드 작성

웹 소켓을 이용하여 파일 업로드를 구현하기 위해, 다음과 같이 간단한 서버 사이드 코드를 작성합니다.

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(data) {
    // 파일 조각을 받아서 처리하는 로직을 작성
  });
});

클라이언트 사이드 코드 작성

클라이언트 측에서는 다음과 같이 웹 소켓을 이용하여 파일을 조각으로 나누어 서버에 전송하는 코드를 작성합니다.

const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
const chunkSize = 1024;
let offset = 0;

reader.onload = function(e) {
  ws.send(e.target.result);
  offset += e.target.result.byteLength;
  if (offset < file.size) {
    readSlice(offset);
  }
};

function readSlice(offset) {
  const slice = file.slice(offset, offset + chunkSize);
  reader.readAsArrayBuffer(slice);
}

readSlice(0);

위 코드에서는 파일을 조각으로 나누어 읽은 후, 웹 소켓을 통해 서버로 전송합니다.

결론

자바스크립트의 웹 소켓을 이용하여 파일 업로드를 구현하는 방법에 대해 간략히 알아보았습니다. 웹 소켓을 사용하면 더욱 실시간적인 파일 전송이 가능하며, 대용량 파일의 전송에도 유용하게 사용될 수 있습니다.

이상으로 웹 소켓을 이용한 파일 업로드 구현에 대한 내용을 마치도록 하겠습니다.

참고 자료

웹 소켓을 이용한 파일 전송 구현 예제