[Node.js] socket 통신으로 파일 업로드 하기[Node.js] socket 통신으로 파일 업로드 하기

Posted at 2020. 5. 14. 07:47 | Posted in Node.js
반응형





GitHub : https://github.com/sffc/socketio-file-upload




대용량 파일을 해야하는데 가능하면 비동기 통신으로 작업을 진행하고 싶었다.


가능하면 사용자의 작업진행에 딜레이를 줄이기 위해.


그렇게 작업을 진행하다 찾게된 라이브러리가 socketio-file-upload 이다.




해당 포스팅은 단순히 socketio-file-upload의 API 부분만을 간략히 정리한 내용이다.





■ 소켓통신을 이용한 파일 업로드





#01. socketio-file-upload 설치




 $ npm install socketio-file-upload

 








#02. 업로드 처리 서버 생성




전송받은 파일을 업로드할 node.js 서버를 생성한다.


socket.io와 express 모듈을 필요로 한다.



 socket.io.file.js

const socketUpload = require( "socketio-file-upload" );

const socketio = require( "socket.io" );

const express = require( "express" );


// @breif express 서버 생성

const app = express()

    .use( socketUpload.router )         // @details express 모듈과 같은 연결 기반 미들웨어를 사용하는 경우 값을 미들웨어로 전달한다.

    .use( express.static( __dirname ) ) // @details 경로를 지정( __dirname : 현재경로 )

    .listen( 52273 );                       // @details 포트를 지정


const io = socketio.listen( app );

io.sockets.on("connection", function( socket ) {


    // @breif 업로드를 수행할 소켓( socketio-file-upload ) 인스턴스 생성

    let uploader = new socketUpload();


    // @breif 업로드 경로를 지정

    uploader.dir = "/nodejs";


    uploader.listen( socket );


    // @breif 파일이 저장될 때 수행

    uploader.on("saved", function(event) {


        console.log(event.file);

    });


    // @breif 오류 처리

    uploader.on("error", function(event) {


        console.log("Error from uploader", event);

    });

});










#03. 소켓 통신을 사용한 파일 업로드




# 소스코드

 node_upload_one.html

<html>

<head>

<title>:: node.js 파일업로드 ① ::</title>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="/siofu/client.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 인스턴스 초기화

        let socket = io.connect( "ws://localhost:52273" );

        let siofu = new SocketIOFileUpload( socket );


        // @details 사용자가 지정된 HTML 입력 요소에서 파일을 선택하면

        //             socketio-file-upload 모듈이 해당 파일 또는 해당 파일의 업로드를 수행한다.

        siofu.listenOnInput( document.getElementById( "uploadInput" ) );


        // @breif 파일이 업로드 될때 수행

        siofu.addEventListener("complete", function(event) {


            console.log( event.success );

            console.log( "-------------------------------" );

            console.log( event.file );


            alert( "파일명 : " + event.file.name );

        });


    }, false);

</script>

</head>

<body>

<label>업로드 파일 선택 : <input type="file" id="uploadInput"/></label>

</body>

</html>




# 출력결과






# 실행로그










#04. file태그 사용하지 않고, 파일 올리기



기본적으로 HTML에서는 항상


파일을 업로드 할때는 <input type="file">을 선언해 주어야 했지만.


socketio-file-upload를 사용하면 <button>을 생성하는것으로 간단히 파일 업로드가 가능하다.


위의 html 코드를 조금 변경하여 작업을 진행해 보자.




# 소스코드

 node_upload_two.html

<html>

<head>

<title>:: node.js 파일업로드 ② ::</title>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="/siofu/client.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 인스턴스 초기화

        let socket = io.connect( "ws://localhost:52273" );

        let siofu = new SocketIOFileUpload( socket );


        // @breif siofu.prompt 이 방벙을 호출하면 업로드할 파일을 선택하라는 메세지를 바로 표시 할 수 있다.

        document.getElementById("upload_btn").addEventListener( "click", siofu.prompt, false );



        /* siofu.listenOnInput( document.getElementById( "upload_input" ) ); */


        // @breif 파일이 업로드 될때 수행

        siofu.addEventListener("complete", function(event) {


            console.log( event.success );

            console.log( "-------------------------------" );

            console.log( event.file );


            alert( "파일명 : " + event.file.name );

        });


    }, false);

</script>


</head>

<body>

<!-- label>업로드 파일 선택 : <input type="file" id="upload_input"/></label -->

<p><button id="upload_btn">파일 업로드</button></p>

</body>

</html>




# 출력결과







#05. 드래그 앤 드롭으로 파일 업로드 하기



마지막 예제는 조금 재미있는것을 만들어 보자.


socketio-file-upload에서 지원하는 함수 listenOnDrop( )를 사용하여


드래그 앤 드롭 UI를 구현해 보자.



# 소스코드

 node_upload_three.html

<html>

<head>

<title>:: node.js 파일업로드 ③ ::</title>

<script type="text/javascript" src="/socket.io/socket.io.js"></script>

<script type="text/javascript" src="/siofu/client.js"></script>

<script type="text/javascript">

    document.addEventListener("DOMContentLoaded", function() {


        // @breif 인스턴스 초기화

        let socket = io.connect( "ws://localhost:52273" );

        let siofu = new SocketIOFileUpload( socket );


        // @breif 사용자가 지정된 HTML 입력 요소에서 파일을 드래그앤 드랍하면

        // socketio-file-upload 모듈이 해당 파일 또는 해당 파일의 업로드를 수행한다.

        siofu.listenOnDrop( document.getElementById( "file_drop" ) );


        // @breif 파일이 업로드 될때 수행

        siofu.addEventListener("complete", function(event) {


            console.log( event.success );

            console.log( "-------------------------------" );

            console.log( event.file );


            alert( "파일명 : " + event.file.name );

        });


    }, false);

</script>


</head>

<body>

    <div id="file_drop" dropzone="copy" title="drop files for upload" style="width:370px;height:370px;border:1px solid #FF0000;">

        파일을 이곳에 올려두세요

    </div>

</body>

</html> 




# 출력결과









반응형
저작자표시

'Node.js' 카테고리의 다른 글

[Node.js] exceljs를 이용하여 Excel 파일 읽기  (0) 2020.08.20
[Node.js] HTTPS 서버 구현하기  (0) 2020.05.20
[Noe.js] 실행시 값 입력하기  (0) 2020.05.04
[Node.js] Email 발송하기  (0) 2020.05.01
[Node.js] Excel 파일 생성하고 데이터 읽기  (2) 2020.05.01
//

티스토리툴바