리셋 되지 말자

websocket을 이용한 python server에 대용량 파일 전송하기 본문

websocket

websocket을 이용한 python server에 대용량 파일 전송하기

kyeongjun-dev 2020. 5. 6. 17:15

html에서 파일을 업로드하여 javascript를 이용해 base64로 인코딩을 할때, 파일의 용량이 너무 크면 base64로 변환된 문자열(?)의 길이를 가져오지 못하는 경우를 만났다. 그래서 업로드한 파일 자체의 길이와 분할을 통해서 전송하는 방식으로 전송을 해보았다.

명월님의 블로그를 참고하여 진행하였다.(https://nowonbun.tistory.com/725?category=876375)

server.py

import asyncio;   
# 웹 소켓 모듈을 선언한다.   
import websockets;   

# 업로드 할 때 데이터 정보에 관한 클래스
class Node():
    #생성자
    def __init__(self):
        self.__filename=''; # 받는 파일의 이름
        self.__filesize =0; # 받는 파일의 크기
        self.__data='';     # 받는 파일의 내용(클라이언트에서 정한 버퍼 사이즈 만큼씩 받는다)
        self.__datasize=0;  # 받은 파일의 사이즈

    # filename getter
    @property
    def filename(self):
        return self.__filename;

    # filename setter
    @filename.setter
    def filename(self, filename):
        self.__filename=filename;

    # filesize getter
    @property
    def filesize(self):
        return self.__filesize;

    # filesize setter
    @filesize.setter
    def filesize(self, filesize):
        self.__filesize=int(filesize);

    # data getter
    @property
    def data(self):
        return self.__data;

    # data setter
    @data.setter
    def data(self, data):
        self.__data = data;

    @property
    def datasize(self):
        return self.__datasize;

    @datasize.setter
    def datasize(self, length):
        self.__datasize += length;

    # add data to self.__data
    def add_data(self, data):
        self.__data += data;

    # 파일전송이 끝났는지 확인하는 함수
    def is_completed(self):
        if self.__filesize == self.__datasize:
            return True;
        else:
            return False;
    def save(self, data):
        # 파일을 binary형식, 이어붙이는 모드로 연뒤에 파일을 계속 이어쓴다
        with open("C:/Users/rudwn/scp/"+self.__filename, "ab+") as handle:
            handle.write(data);
        # 받은 datasize를 받은 데이터 size를 더해가며 저장한다(전송 종료 조건에 사용)
        self.__datasize += len(data)


# 클라이언트 접속이 되면 호출된다.   
async def accept(websocket, path):
    node = Node(); # node에 Node() 클래스 할당
    while True:   
        # 클라이언트로부터 메시지를 대기한다.   
        message = await websocket.recv();
        print('message : ' + message + '\n')
        if message == 'START': #클라이언트로부터 'START' 메시지가 날라오면
            await websocket.send("FILENAME"); #파일 이름을 요청
        elif message == 'FILENAME': #파일 이름을 받는다
            node.filename = await websocket.recv();
            await websocket.send("FILESIZE")
        elif message == 'FILESIZE': #파일 사이즈를 받는다
            node.filesize = await websocket.recv();
            await websocket.send("DATA");#데이터를 요청한다
        elif message == 'DATA':#데이터가 오면 저장한다
            node.save(await websocket.recv());
            if node.is_completed() == False:#전송이 끝나지 않았으면 계속 전송
                await websocket.send("DATA");
            else:
                await websocket.close();#전송이 끝났으면 웹소켓을 닫고 종료
                break;

# 웹 소켓 서버 생성.호스트는 localhost에 port는 8080으로 생성한다.    
start_server = websockets.serve(accept, "localhost", 8080);   
# 비동기로 서버를 대기한다.   
asyncio.get_event_loop().run_until_complete(start_server);   
asyncio.get_event_loop().run_forever();

client.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function upload(){
            var file = document.getElementById('file').files[0];// 파일을 받아옴
            var buffersize=1024;// 파일을 전송할 단위인 버퍼사이즈 설정(1024:1byte)
            filename = file.name;// 파일의 이름
            filesize = file.size;// 파일의 크기
            var reader = new FileReader();
            reader.readAsArrayBuffer(file);// file을 ArrayBuffer로 읽어옴
            var rawData = new ArrayBuffer();// 버퍼사이즈 만큼 데이터를 저장할 rawData 설정

            // 파일을 읽으면 요청되는 이벤트
            reader.onload = function(e){
                console.log(e.target.result);
                rawData = e.target.result;
            }

            var pos=0;//파일의 시작위치

            //웹소켓 생성(ip주소 및 포트 설정)
            var ws = new WebSocket("ws://localhost:8080");

            //웹소켓에 접속이 되면, START를 전송
            ws.onopen = function(){
                ws.send("START");
            };

            // START -> FILENAME -> FILESIZE -> DATA -> DATA -> ...
            ws.onmessage = function(message){
                // 메시지 echo
                console.log(message.data);
                ws.send(message.data);

                if(message.data === 'FILENAME'){
                    //파일 이름 전송
                    ws.send(filename);
                }else if(message.data === 'FILESIZE'){
                    //파일 사이즈 전송
                    ws.send(filesize);
                }else if(message.data ==='DATA'){
                    //buffersize만큼 파일을 나누어 전송
                    ws.send(file.slice(pos, pos+buffersize));
                    pos = pos + buffersize;
                    if(pos > filesize){
                        pos = filesize;
                    }
                }
            }

            ws.onclose=function(){
                console.log("disconnected");
            }
        };
    </script>
</head>
<body>
    <input id="file" type="file">
    <button id="uploadbtn" onclick="upload()">파일 업로드</button>
</body>
</html>

html 소스코드에서 buffersize가 1024로 되어있는데, 대용량 파일을 전송하기 위해서는 버퍼사이즈를 크게 설정해주면 된다.
연결 상황에 따라 동적으로 변경되도록 언젠가는 수정해보고 싶다.

'websocket' 카테고리의 다른 글

websocket client, socket server source code  (0) 2020.04.21
[websocket] Sec-WebSocket-Key 변환  (0) 2020.04.12
websocket 공부  (0) 2020.04.10
websocket 상세 설명 글  (0) 2020.04.10
'websocket' Related Articles more
Comments