[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
//

[Noe.js] 실행시 값 입력하기[Noe.js] 실행시 값 입력하기

Posted at 2020. 5. 4. 09:49 | Posted in Node.js
반응형





■ 콘솔에서 값 입력하기




# 소스코드

 console_input.js

const args = process.argv;


console.log( args );


console.log( "----------- 사조삼부곡 -----------" );

console.log( "① 사조영웅전 %s",  args[2] );

console.log( "② 신조협려 %s",  args[3] );

console.log( "③ 의천도룡기 %s",  args[4] ); 



# 출력결과

 $ node console_input.js 2017 2020 2019 

 






반응형
저작자표시

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

[Node.js] HTTPS 서버 구현하기  (0) 2020.05.20
[Node.js] socket 통신으로 파일 업로드 하기  (0) 2020.05.14
[Node.js] Email 발송하기  (0) 2020.05.01
[Node.js] Excel 파일 생성하고 데이터 읽기  (2) 2020.05.01
[Node.js] Serial Port를 이용한 Arduino 이벤트 실행  (0) 2019.06.13
//

[Node.js] Email 발송하기[Node.js] Email 발송하기

Posted at 2020. 5. 1. 16:24 | Posted in Node.js
반응형




API : https://nodemailer.com/about/




■ nodemailer 설치



 $ npm install nodemailer








■ Node.js 를 통해 이메일 보내기




# 소스코드

 send_email.js

// @breif nodemailer 모듈추출

const nodemailer = require( "nodemailer" );


// @details 글로벌 범위에서 대기할 수 없으므로 래퍼( wrapper )를 사용해야 함

async function main() {


    // @breif 기본 SMTP 전송을 사용하여 재사용 가능한 전송 개체 생성

    const transporter = nodemailer.createTransport({

          host : "smtp.naver.com"      // @details  네이버(smtp.naver.com), 구글(smtp.google.com), 다음(smtp.daum.net) 등

        , port : 465

        , secure : true                     // @details PORT가 465인 경우 TRUE로 설정, 다른 경우 FALSE

        , auth : {

              user : "보내는 메일 주소"

            , pass : "보내는 메일 비밀번호"

        }

    });


    // @breif 발송할 메일의 컨테츠 정보

    let info = await transporter.sendMail({

          from : "\"Fred Foo 👻\" <saak@wickedmiso.com>"         // @details 보내는 사람 메일주소( user 메일주소와 일치해야함 )

        , to : "받는이1@naver.com, 받는이2@daum.com"                // @details 받는이(들) 메일주소

        , subject : "Node.js 메일전송 테스트 ✔"                           // @details 메일주소

        , text : "HTML 속성이 활성화 되어 있으면 비활성화 됨"         // @details 메일 내용

        , html : "<h1>사악미소의 현대마법의 IT 공방</h1>"            // @details 메일 내용(HTML)

    });


    console.log("Message sent : %s", info.messageId);

}


// @breif main() 함수를 실행

main().catch( console.error );




# 출력결과

 $  node send_email.js

     Message sent: <df2a072a-b321-928f-f543-75e07693ac6c@wickedmiso.com>







반응형
저작자표시

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

[Node.js] socket 통신으로 파일 업로드 하기  (0) 2020.05.14
[Noe.js] 실행시 값 입력하기  (0) 2020.05.04
[Node.js] Excel 파일 생성하고 데이터 읽기  (2) 2020.05.01
[Node.js] Serial Port를 이용한 Arduino 이벤트 실행  (0) 2019.06.13
[Node.js] Terminal 명령을 수행하는 node_cmd 모듈  (0) 2019.05.10
//

[Node.js] Excel 파일 생성하고 데이터 읽기[Node.js] Excel 파일 생성하고 데이터 읽기

Posted at 2020. 5. 1. 13:19 | Posted in Node.js
반응형




API : https://www.npmjs.com/package/xlsx




■ 엑셀 데이터 읽어오기





 $ npm install xlsx








■ 엑셀 데이터 읽어오기



# 엑셀파일




# 소스코드

 excel_file_read.js

// @breif xlsx 모듈추출

const xlsx = require( "xlsx" );


// @files 엑셀 파일을 가져온다.

const excelFile = xlsx.readFile( "wise_life_doctor.xlsx" );


// @breif 엑셀 파일의 첫번째 시트의 정보를 추출

const sheetName = excelFile.SheetNames[0];          // @details 첫번째 시트 정보 추출

const firstSheet = excelFile.Sheets[sheetName];       // @details 시트의 제목 추출


// @details 엑셀 파일의 첫번째 시트를 읽어온다.

const jsonData = xlsx.utils.sheet_to_json( firstSheet, { defval : "" } );


console.log( jsonData );




# 출력결과

 $ node excel_file_read.js






■ 엑셀 파일 작성하기



# 소스코드

 excel_write_file.js

// @breif xlsx 모듈추출

const xlsx = require( "xlsx" );


// @breif 가상의 엑셀파일을 생성한다.

const book = xlsx.utils.book_new();


// --------------------------------------------------------------------


// @breif 1번 시트

// @breif aoa_to_sheet 방식으로 데이터를 생성한다.

const doctors = xlsx.utils.aoa_to_sheet( [

      [ "학과", "직급", "이름", "나이" ]

    , [ "흉부외과", "병원장", "주전", "67" ]

    , [ "흉부외과", "교수", "천명태", "52" ]

    , [ "흉부외과", "치프", "도재학", "39" ]

    , [ "소아외과", "레지던트", "장겨울", "29" ]

    , [ "산부인과", "레지던트", "추민하", "34" ]

    , [ "산부인과", "레지던트", "명은원", "28" ]

    , [ "신경외과", "교수", "민기준", "55" ]

    , [ "신경외과", "치프", "용석민", "33" ]

    , [ "신경외과", "레지던트", "안치홍", "38" ]

    , [ "신경외과", "레지던트", "허선빈", "31" ]

    , [ "응급의학과", "조교수", "봉광현", "40" ]

    , [ "응급의학과", "펠로우", "배준희", "31" ]

] );


// @breif CELL 넓이 지정

doctors["!cols"] = [

      { wpx : 130 }   // A열

    , { wpx : 100 }   // B열

    , { wpx : 80 }    // C열

    , { wch : 60 }    // D열

]


// @breif 첫번째 시트에 작성한 데이터를 넣는다.

xlsx.utils.book_append_sheet( book, doctors, "DOCTOR" );


// --------------------------------------------------------------------


// @breif 2번 시트

// @details json_to_sheet 방식으로 데이터를 생성한다.

const nurses = xlsx.utils.json_to_sheet( [

      { A : "학과", B : "직급", C : "이름", D : "나이" }

    , { A : "흉부외과", B : "PA간호사", C : "소이현", D : "33" }

    , { A : "소아외과", B : "PA간호사", C : "한현희", D : "29" }

    , { A : "산부인과", B : "분만실간호사", C : "한한승주현희", D : "41" }

    , { A : "산부인과", B : "PA간호사", C : "은선진", D : "36" }

    , { A : "간담췌외과", B : "수간호사", C : "송수빈", D : "45" }

    , { A : "간담췌외과", B : "병동간호사", C : "이영하", D : "35" }

    , { A : "간담췌외과", B : "병동간호사", C : "김재환", D : "28" }

    , { A : "간담췌외과", B : "PA간호사", C : "국해성", D : "32" }

    , { A : "간담췌외과", B : "이식코디네이터", C : "함덕주", D : "37" }

    , { A : "신경외과", B : "PA간호사", C : "황재신", D : "39" }

    , { A : "응급의학과", B : "응급실간호사", C : "선우희수", D : "26" }

], { header : ["A", "B", "C", "D"], skipHeader : true } );


// @breif CELL 넓이 지정

nurses["!cols"] = [

      { wpx : 130 }   // A열

    , { wpx : 100 }   // B열

    , { wpx : 80 }    // C열

    , { wch : 60 }    // D열

]


// @details 두번째 시트에 작성한 데이터를 넣는다.

xlsx.utils.book_append_sheet( book, nurses, "NURSES" );


// --------------------------------------------------------------------


// @files 엑셀파일을 생성하고 저장한다.

xlsx.writeFile( book, "dramatis_personae.xlsx" ); 




# 실행결과

 $ node excel_write_file.js







반응형
저작자표시

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

[Noe.js] 실행시 값 입력하기  (0) 2020.05.04
[Node.js] Email 발송하기  (0) 2020.05.01
[Node.js] Serial Port를 이용한 Arduino 이벤트 실행  (0) 2019.06.13
[Node.js] Terminal 명령을 수행하는 node_cmd 모듈  (0) 2019.05.10
[Node.js] SCRAPING을 위한 cheerio 모듈과 cheerio-httpcli 모듈  (0) 2019.05.08
//

티스토리툴바