오랜만에 글을 써본다.. 이직으로 개발이 주 업무가 아니라 운영업무만 하다보니...

엑셀 파일을 읽어서 DB연동하는것 까지 기록해본다.

## 기본 class 파일 (그냥 갖다 생성해서 쓰면 된다) ##

1.ExcelCellRef.java

package egovframework.comm;


import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.util.CellReference;
 
public class ExcelCellRef {
 
    /**
     * Cell에 해당하는 Column Name을 가져온다(A,B,C..)
     * 만약 Cell이 Null이라면 int cellIndex의 값으로
     * Column Name을 가져온다.
     * @param cell
     * @param cellIndex
     * @return
     */
    public static String getName(Cell cell, int cellIndex) {
        int cellNum = 0;
        if(cell != null) {
            cellNum = cell.getColumnIndex();
        }
        else {
            cellNum = cellIndex;
        }
 
        return CellReference.convertNumToColString(cellNum);
    }
 
    @SuppressWarnings("deprecation")
    public static String getValue(Cell cell) {
        String value = "";
 
        if(cell == null) {
            value = "";
        }
        else {
            if( cell.getCellType() == Cell.CELL_TYPE_FORMULA ) {
                value = cell.getCellFormula();
            }
            else if( cell.getCellType() == Cell.CELL_TYPE_NUMERIC ) {
                value = cell.getNumericCellValue() + "";
            }
            else if( cell.getCellType() == Cell.CELL_TYPE_STRING ) {
                value = cell.getStringCellValue();
            }
            else if( cell.getCellType() == Cell.CELL_TYPE_BOOLEAN ) {
                value = cell.getBooleanCellValue() + "";
            }
            else if( cell.getCellType() == Cell.CELL_TYPE_ERROR ) {
                value = cell.getErrorCellValue() + "";
            }
            else if( cell.getCellType() == Cell.CELL_TYPE_BLANK ) {
                value = "";
            }
            else {
                value = cell.getStringCellValue();
            }
        }
 
        return value;
    }
}

2.ExcelFileType.java

package egovframework.comm;


import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
 
import org.apache.poi.hssf.usermodel.HSSFWorkbook;
import org.apache.poi.ss.usermodel.Workbook;
import org.apache.poi.xssf.usermodel.XSSFWorkbook;
 
public class ExcelFileType {
    public static Workbook getWorkbook(String filePath) {
 
        FileInputStream fis = null;
        try {
            fis = new FileInputStream(filePath);
        } catch (FileNotFoundException e) {
            throw new RuntimeException(e.getMessage(), e);
        }
 
        Workbook wb = null;
 
        if(filePath.toUpperCase().endsWith(".XLS")) {
            try {
                wb = new HSSFWorkbook(fis);
            } catch (IOException e) {
                throw new RuntimeException(e.getMessage(), e);
            }
        }
        else if(filePath.toUpperCase().endsWith(".XLSX")) {
            try {
                wb = new XSSFWorkbook(fis);
            } catch (IOException e) {
                throw new RuntimeException(e.getMessage(), e);
            }
        }
 
        return wb;
 
    }
}

3.ExcelRead.java

package egovframework.comm;


import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import org.apache.poi.ss.usermodel.Cell;
import org.apache.poi.ss.usermodel.Row;
import org.apache.poi.ss.usermodel.Sheet;
import org.apache.poi.ss.usermodel.Workbook;
 
public class ExcelRead {
    
    public static List<Map<String, String>> read(ExcelReadOption excelReadOption) {
 
        // 엑셀 파일 자체
        // 엑셀파일을 읽어 들인다.
        // FileType.getWorkbook() <-- 파일의 확장자에 따라서 적절하게 가져온다.
        Workbook wb = ExcelFileType.getWorkbook(excelReadOption.getFilePath());
 
        //    엑셀 파일에서 첫번째 시트를 가지고 온다.
        Sheet sheet = wb.getSheetAt(0);
 
        System.out.println("Sheet 이름: " + wb.getSheetName(0));
        System.out.println("데이터가 있는 Sheet의 수 :" + wb.getNumberOfSheets());
 
        // sheet에서 유효한(데이터가 있는) 행의 개수를 가져온다.
        int numOfRows = sheet.getPhysicalNumberOfRows()+2; //빈 cell은 카운터를 안하길래 +2를 추가 시켜줌
        
        int numOfCells = 0;
 
        Row row = null;
        Cell cell = null;
 
        String cellName = "";
        /**
         * 각 row마다의 값을 저장할 맵 객체 저장되는 형식은 다음과 같다. put("A", "이름"); put("B",
         * "게임명");
         */
        Map<String, String> map = null;
        /*
         * 각 Row를 리스트에 담는다. 하나의 Row를 하나의 Map으로 표현되며 List에는 모든 Row가 포함될 것이다.
         */
        List<Map<String, String>> result = new ArrayList<Map<String, String>>();
 
 
        /**
         * 각 Row만큼 반복을 한다.
         */
        for (int rowIndex = excelReadOption.getStartRow() - 1; rowIndex < numOfRows; rowIndex++) {
          /*
           * 워크북에서 가져온 시트에서 rowIndex에 해당하는 Row를 가져온다. 하나의 Row는 여러개의 Cell을 가진다.
           */
          row = sheet.getRow(rowIndex);
 
          if (row != null) {
            /*
             * 가져온 Row의 Cell의 개수를 구한다.
             */
            numOfCells = row.getPhysicalNumberOfCells();
            System.out.println("row의 cell의 갯수 : "+numOfCells);
            /*
             * 데이터를 담을 맵 객체 초기화
             */
            map = new HashMap<String, String>();
            /*
             * cell의 수 만큼 반복한다.
             */
            for (int cellIndex = 0; cellIndex < numOfCells; cellIndex++) {
              /*
               * Row에서 CellIndex에 해당하는 Cell을 가져온다.
               */
              cell = row.getCell(cellIndex);
              /*
               * 현재 Cell의 이름을 가져온다 이름의 예 : A,B,C,D,......
               */
              cellName = ExcelCellRef.getName(cell, cellIndex);
              /*
               * 추출 대상 컬럼인지 확인한다 추출 대상 컬럼이 아니라면, for로 다시 올라간다
               */
              if (!excelReadOption.getOutputColumns().contains(cellName)) {
                continue;
              }
              /*
               * map객체의 Cell의 이름을 키(Key)로 데이터를 담는다.
               */
              map.put(cellName, ExcelCellRef.getValue(cell));
            }
            /*
             * 만들어진 Map객체를 List로 넣는다.
             */
            result.add(map);
          }
        }
        return result;
      }
}

4.ExcelReadOption.java

package egovframework.comm;

import java.util.ArrayList;
import java.util.List;
 
public class ExcelReadOption {
    
    //    엑셀파일의 경로
    private String filePath;
    
    //  추출할 컬럼 명  
    private List<String> outputColumns;
    
    //  추출을 시작할 행 번호
    private int startRow;
 
    public String getFilePath() {
        return filePath;
    }
 
    public void setFilePath(String filePath) {
        this.filePath = filePath;
    }
 
    public List<String> getOutputColumns() {
 
        List<String> temp = new ArrayList<String>();
        temp.addAll(outputColumns);
 
        return temp;
    }
 
    public void setOutputColumns(List<String> outputColumns) {
 
  //        이걸 A,B,C,D 이런 식으로 추가하던데
        List<String> temp = new ArrayList<String>();
        temp.addAll(outputColumns);
 
        this.outputColumns = temp;
    }
 
    public void setOutputColumns(String ... outputColumns) {
 
        if(this.outputColumns == null) {
            this.outputColumns = new ArrayList<String>();
        }
 
        for(String ouputColumn : outputColumns) {
            this.outputColumns.add(ouputColumn);
        }
    }
 
    public int getStartRow() {
        return startRow;
    }
    public void setStartRow(int startRow) {
        this.startRow = startRow;
    }
  }

## jsp ##

<form name="searchForm" id="searchForm" enctype="multipart/form-data" method="post">

<button onClick="javascript:excelClick()" class="editUploadBtn">Excel Upload</button>

</form>

<script>

function excelClick(){
   var insertData = new FormData($('#searchForm')[0]);
   $.ajax({
     enctype : "multipart/form-data",
     type : "POST",
     url : "/management/commutingTimeExcelUpload.do",
     data : insertData,
     processData: false, //엑셀 업로드 하려면 설정해줘야한다
     contentType: false, //엑셀 업로드 하려면 설정해줘야한다
     success : function(data) {
     }
   });
}

</script>

## Controller ##

@ResponseBody
@Transactional
@RequestMapping(value = "/management/commutingTimeExcelUpload.do", produces = "application/text; charset=UTF-8")
public String  commutingTimeExcelUpload(MultipartHttpServletRequest request, Model model, MultipartFile testFile) throws Exception{
MultipartFile excelFile = request.getFile("EXCEL_UPLOAD");
String result = "N";
if(excelFile == null || excelFile.isEmpty()) {
throw new RuntimeException("엑셀파일을 선택해주세요");
}

File destFile = new File("c:\\upload\\"+excelFile.getOriginalFilename()); //엑셀을 업로드 할 위치

try {
//설정한 위치에 올린 파일을 만든다
excelFile.transferTo(destFile);
} catch(Exception e) {
throw new RuntimeException("e.getMessage()",e);
}

//업로드 진행
managementService.excelUpload(destFile);
result = "Y";
//업로드 후 삭제
destFile.delete();

return result;
}

## service ##

//엑셀 업로드
void excelUpload(File destFile);

## serviceImpl ##

@Override
public void excelUpload(File destFile) {
 ExcelReadOption excelReadOption = new ExcelReadOption();
        
        //파일경로 추가
        excelReadOption.setFilePath(destFile.getAbsolutePath());
        System.out.println("#### destFile.getAbsolutePath() : "+destFile.getAbsolutePath());
        //추출할 컬럼명 추가
        excelReadOption.setOutputColumns("A", "B", "C", "D", "E", "F");
        
        //시작행
        excelReadOption.setStartRow(6); //DB에 저장할 시작 위치
        
        //A행~ F행의 내용이 excelContent로 들어감 
        List<Map<String, String>>excelContent  = ExcelRead.read(excelReadOption);
        
        Map<String, Object> paramMap = new HashMap<String, Object>();
        paramMap.put("excelContent", excelContent);
        try {
         managementDAO.excelUpload(paramMap);
        }catch(Exception e) {
            e.printStackTrace();
        }
}

## DAO ##

public Integer excelUpload(Map<String , Object>inputMap) {
int seq = (int) insert("managementDAO.excelUpload", inputMap);
return seq;
}

## xml ##

<insert id="managementDAO.excelUpload" parameterClass="java.util.Map">
/* managementDAO.excelUpload */
<selectKey keyProperty="seq" resultClass="java.lang.Integer" >
SELECT 1 
</selectKey>
<dynamic> 
<iterate  property="excelContent"  conjunction=";" >
MERGE INTO COMMUTING_TIME C
USING (SELECT 1 AS DUAL) AS B
ON (
C.SYS_CREATE_DATE = #excelContent[].A# 
AND C.EMP_CODE = #excelContent[].C# 
AND C.DEVICE_CODE = #excelContent[].F#
)
WHEN MATCHED THEN 
UPDATE SET C.SYS_CREATE_TIME = #excelContent[].B# 
WHEN NOT MATCHED THEN
INSERT(
SYS_CREATE_DATE,
SYS_CREATE_TIME,
EMP_CODE,
EMP_NAME,
DEVICE_ID,
DEVICE_CODE
) 
VALUES 
(
#excelContent[].A#,
#excelContent[].B#,
#excelContent[].C#,
#excelContent[].D#,
#excelContent[].E#,
#excelContent[].F#
)
</iterate>
</dynamic>
;
</insert>

ajax로 json 타입으로 한글을 받아와야하는데 깨짐 현상이 발생했다 

생각보다 간단한데

java에서 

@RequestMapping(value = "/main/kchtest.do")

의 부분을

@RequestMapping(value = "/main/kchtest.do", produces = "application/text; charset=UTF-8")

추가해주면 된다

파일을 다운받을 경우, 용량이 많아서 로딩바가 필요한 경우가 있다.

로딩바 이미지는 파일첨부 했습니다

function fn_excelDown(){ //파일 다운버튼을 눌렀을때 호출되는 함수

    setCookie("fileDownload","false"); //쿠키 셋팅 
    blockUI(); //로딩바 호출

    var frm = document.frmFillExcel;

    frm.submit(); //엑셀 파일 다운 폼 

}

function setCookie(c_name,value){

    var date = new Date(1000);

    document.cookie = "fileDownload=; expires="+date.toUTCString()+";path=/";

}

function getCookie(name){

    var parts = document.cookie.split(name+"=");

    if(parts.length == 2){

        return parts.pop().split(";").shift();

    }

}

var downloadTimer;
 
function blockUI() {
    FunLoadingBarStart();
    downloadTimer = setInterval(function() {
        var token = getCookie("fileDownload");
        if(token == "true") {
            unBlockUI();
        }
    }, 1000 );
}

function unBlockUI() {
    FunLoadingBarEnd();
    clearInterval(downloadTimer);
}

function FunLoadingBarStart() {

    var backHeight = $(document).height(); //뒷 배경의 상하 폭

    var backWidth = window.document.body.clientWidth; //뒷 배경의 좌우 폭

    var backGroundCover = "<div id='back'></div>"; //뒷 배경을 감쌀 커버

    var loadingBarImage = ''; //가운데 띄워 줄 이미지

    loadingBarImage += "<div id='loadingBar'>";

    loadingBarImage += "<img src='../img/cultivation/loadingbar.gif' />";

    loadingBarImage += "</div>";

    $('body').append(backGroundCover).append(loadingBarImage);

    $('#back').css({ 'width': backWidth, 'height': backHeight, 'opacity': '0.3' });

    $('#back').show();

    $('#loadingBar').show();

}

function FunLoadingBarEnd() {
    $('#back, #loadingBar').hide();
    $('#back, #loadingBar').remove();
}

<style>

#back{ position: absolute; z-index: 100; background-color: #000000; display:none; left:0; top:0; width:100%; height:100%}
#loadingBar{ position:absolute; left:50%; top: 40%; display:none; z-index:200; }

</style>

java 단에

Cookie cookie = new Cookie("fileDownload", "true");
response.addCookie(cookie);

추가해준다.

1. SELECT로 하나의 데이터가 나올때 쓰는 경우 

  # JSP #

  $.ajax({

    contentType:"application/x-www-form-urlencoded; charset=UTF-8",

    type:"POST",  

    url:"/userLogin.do",

    data: $("#form").serialize(),
    dataType : 'json',
    async: false,
    success:function(data){

      var resultCode = data.resultCode;

    }

  });

  # JAVA #

  @ResponseBody
  @Transactional
  @RequestMapping(value = "/userLogin.do")

  public String loginUser(@ModelAttribute("vo") PlanResearcherVO vo, PlanResearcherVO failVo, ModelMap model, HttpServletRequest request, HttpSession sess) throws Exception {

    JSONObject json = new JSONObject();
    vo = planService.UserLogin(vo);

    json.put("resultCode","0000");  //클라이언트 단에서 data.resultCode; 이런식으로 데이터를 꺼낼 수 있다

  return json.toString();

  }

2.JSON array 를 사용할 경우 (SELECT로 로우데이터를 가져올 경우 쓴다)

# JSP #

  var addData = { "FM_SEQ": seq };

  $.ajax({      
    contentType:"application/x-www-form-urlencoded; charset=UTF-8",

    type:"POST",  

    url:"/farmerCropInfo.do",

    data: addData,
    dataType : 'json',
    success:function(data){

      for(ver i=0; i<data.length; i++){

        var crType = data[i].CR_TYPE;

      }

    }

});

# JAVA #

@ResponseBody
@Transactional
@RequestMapping(value = "/planMapSelect.do")

public String planMapSelect(@ModelAttribute("vo") PlanLandVO vo, ModelMap model, HttpServletRequest request, HttpSession sess) throws Exception {

  List<PlanLandVO> list = planService.PlanAddrList(vo);

  JSONObject json = new JSONObject();

  JSONArray jsonArray = new JSONArray();

  for(int i =0; i<list.size(); i++){

    json.put("SEQ", list.get(i).getSEQ());

    jsonArray.add(json); //클라이언트 단에서 data[i].SEQ; 이런식으로 데이터를 꺼낼 수 있다

  }

  return jsonArray.toString();

}

## 1 ##

{
"response":{
"service":{"name":"data","version":"2.0","operation":"getfeature","time":"140(ms)"},
"status":"OK",
"record":{"total":"1","current":"1"},
"page":{"total":"1","current":"1","size":"10"},
"result":{
"featureCollection":{
"type":"FeatureCollection",
"bbox":[14099848.519760042,4222017.192630637,14102257.127454491,4224338.827704868],
"features":[{
"type":"Feature",
"geometry":{
"type":"MultiPolygon",
"coordinates":[[[[14101983.644347072,4223638.7044454515],[14102014.844596948,4223626.199630966]]]]
},
"properties":{
"li_eng_nm":"Jugok-ri",
"full_nm":"전라북도 고창군 고창읍 주곡리",
"li_kor_nm":"주곡리",
"li_cd":"4579025031"
},
"id":"LT_C_ADRI_INFO.159350"
}]
}
}
}
}

위와 같은 데이터를 받고

나는 coordinates 값을 가져오고 싶다면

data.response.result.featureCollection.features[0].geometry.coordinates

## 2. JSON Array 형태, ajax로 ##

{
"result1":[
{"INX":2,"DRAW_TYPE":"circle","DRAW_ID":"admin_2020429152853","CIRCLE_SIZE":"19.642358412966132","coordinate":"14103421.623586332,4223354.067356597"},
{"INX":4,"DRAW_TYPE":"area","DRAW_ID":"admin_2020429155920","CIRCLE_SIZE":"","coordinate":"14103439.376051702,4223339.665497251"}
]
}

$.ajax({

  contentType:"application/x-www-form-urlencoded; charset=UTF-8",

  type:"POST",

  data:$("#researchForm").serialize(),

  dataType:'json',

  success:function(data){

    var count = data.result1.length;

    for(var i=0; i<count; i++){

      var getId = data.result1[i].DRAW_ID;

    }

  }

});

websocket : 사용자의 브라우저와 서버 사이의 인터렉티브 통신 세션을 설정할 수 있게 하는 기술.

## pom.xml 에 아래를 추가 한다 ##

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-websocket</artifactId>
  <version>4.2.4.RELEASE</version>
</dependency>

## servlet-context.xml (전자정부프레임워크에선 egov-com-servlet.xml) ##

<bean id = "echoHandler" class="egovframework.plantation.web.websocket"/>

<websocket:handlers>

  <websocket:mapping handler="echoHandler" path="/websocket/echo.do" />

</websocket:handlers>

// localhost:8080/websocket/echo.do 를 호출하면 echoHandler를 가진 id 인 class 를 호출하게 된다

## websocket.java ##

package egoveframework.plantation.web;

import java.util,ArrayList;

import java.util.List;

import org.springframework.web.socket.CloseStatus;

import org.springframework.web.socket.CloseStatusTextMessage;

import org.springframework.web.socket.CloseStatusWebSocketSession;

import org.springframework.web.socket.handler.CloseStatusTextWebSocketHandler;

public class websocket extends TextWebSocketHandler{
  private List<WebSocketSession>sessionList = new ArrayList<WebSocketSession>();

  @Override

  public void afterConnectionEstablished(WebSocketSession session) throws Exception {

    sessionList.add(session); //접속되어 있는 유저들을 담는다

    System.out.println("연결됨 : " +session.getId());

  }

  // 클라이언트가 서버로 메시지를 전송했을 때 실행되는 메서드

  @Override

  protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {

    System.out.println("받음 : "+message);

    String senderId = session.getId();

    for(WebSfor (WebSocketSession sess : sessionList) {

      sess.sendMessage(new TextMessage(senderId +" : " + message.getPayload()));

    }

  }

  // 클라이언트와 연결을 끊었을 때 실행되는 메소드

  @Override

  public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {

    sessionList.remove(session);

    System.out.println("끊김 : "+ session.getId());

  }

}

## top.jsp (어느 페이지에 있던 알림을 받기 위해서 공통적으로 쓰이는 페이지) ##

<div id="socketAlert" class="alert alert-success" role="alert" style="display:none;"></div>

<script>

  var socket = null;  //전역 변수로 선언

  $(document).ready(function(){
    connectWS();
  });

  function connectWS(){

    var ws = new WebSocket("ws://localhost:8080/websocket/echo.do");

    socket = ws;

    ws.open = function(message){

     console.log(message);

    };

    ws.onmessage = function(event){

      $("#socketAlert").text(event.data);

      $("#socketAlert").css("display", "block");

    };

    ws.onclose = function(event){

      console.log("Server disConnect");

    };

    ws.onerror = function(event){

      console.log("Server Error");

    };

</script>

## 클라이언트 화면 ##

<input id="btnSend" value="Send" type="button"> 
<input type="text" id="msg" value="1212테스트test" class="form-control" />

<script>

  $(document).ready(function(){

    $("#btnSend").on("click", function(evt){

      evt.preventDefault();

      if(socket.readyState != 1) return;

      let msg = $("#msg").val();

      socket.send(msg); //소켓에 입력된 메시지를 보낸다

    )};

  });

</script>

== 더 간단한 방법 아래 참조==

https://nowonbun.tistory.com/285

== 위 참조한걸 바탕으로 내 소스 적용 ==

jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
  <head>
    <c:import url="/layout/header.do"></c:import>
</head>
  <body>
    <form>
      <!-- 송신 메시지를 작성하는 텍스트 박스 -->
      <input id="textMessage" type="text" style="padding-top:100px;">
      <!-- 메시지 송신을 하는 버튼 -->
      <input onclick="sendMessage()" value="Send" type="button">
      <!-- WebSocket 접속 종료하는 버튼 -->
      <input onclick="disconnect()" value="Disconnect" type="button">
    </form>
    <br />
    <!-- 콘솔 메시지의 역할을 하는 로그 텍스트 에리어.(수신 메시지도 표시한다.) -->
    
    <script type="text/javascript">
  // 「WebSocketEx」는 프로젝트 명
  // 「websocket」는 호스트 명
  // WebSocket 오브젝트 생성 (자동으로 접속 시작한다. - onopen 함수 호출)
var webSocket = new WebSocket("ws://localhost:8080/WebSocketEx/websocket.do");
  // 콘솔 텍스트 에리어 오브젝트
  var messageTextArea = $(".messageTextArea").val();
  // WebSocket 서버와 접속이 되면 호출되는 함수
  webSocket.onopen = function(message) {
  $(".messageTextArea").val("Server connect...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버와 접속이 끊기면 호출되는 함수
webSocket.onclose = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"Server Disconnect...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버와 통신 중에 에러가 발생하면 요청되는 함수
webSocket.onerror = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"error...\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
// WebSocket 서버로 부터 메시지가 오면 호출되는 함수
webSocket.onmessage = function(message) {
$(".messageTextArea").val($(".messageTextArea").val()+"Recieve From Server => "+message.data+"\n"); // 콘솔 텍스트에 메시지를 출력한다.
};
  // Send 버튼을 누르면 호출되는 함수
function sendMessage() {
var message = $("#textMessage").val(); // 송신 메시지를 작성하는 텍스트 박스 오브젝트를 취득한다.
$(".messageTextArea").val($(".messageTextArea").val()+"Send to Server => "+message+"\n"); // 콘솔 텍스트에 메시지를 출력한다.
webSocket.send(message); // WebSocket 서버에 메시지를 송신한다.
message.value = ""; // 송신 메시지를 작성하는 텍스트 박스를 초기화한다.
}
// Disconnect 버튼을 누르면 호출되는 함수
function disconnect() {
webSocket.close(); // WebSocket 접속 해제
}
</script>
</body>
</html>

java

package egovframework.main.service;

import javax.websocket.OnClose;
import javax.websocket.OnError;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.server.ServerEndpoint;

@ServerEndpoint("/WebSocketEx/websocket.do")
public class websocket {
// WebSocket으로 브라우저가 접속하면 요청되는 함수
@OnOpen
public void handleOpen() {
// 콘솔에 접속 로그를 출력한다.
System.out.println("client is now connected...");
}
// WebSocket으로 메시지가 오면 요청되는 함수
@OnMessage
public String handleMessage(String message) {
// 메시지 내용을 콘솔에 출력한다.
System.out.println("receive from client : " + message);
// 에코 메시지를 작성한다.
String replymessage = "echo " + message;
// 에코 메시지를 콘솔에 출력한다.
System.out.println("send to client : "+replymessage);
// 에코 메시지를 브라우저에 보낸다.
return replymessage;
}
// WebSocket과 브라우저가 접속이 끊기면 요청되는 함수
@OnClose
public void handleClose() {
// 콘솔에 접속 끊김 로그를 출력한다.
System.out.println("client is now disconnected...");
}
// WebSocket과 브라우저 간에 통신 에러가 발생하면 요청되는 함수.
@OnError
public void handleError(Throwable t) {
// 콘솔에 에러를 표시한다.
t.printStackTrace();
}

}

GIS 개발을 하다가 좌표값을 db에 저장했는데  문자열을 치환해야하는 경우가 생겼다.

14102895.763908967,4224317.671008111,14102432.364424989,4223753.947924509,14103225.398593448,4223553.30072526,14103555.033277927,4223992.813637899,14102895.763908967,4224317.671008111

위의 좌표값을 아래와 같이 표시를 해야한다.

[[

[14105239.988929166, 4223257.282268806], 

[14105234.785437182, 4223249.518770073], 

[14105234.465436349 , 4223235.271775984],

[14105239.988929166 , 4223257.282268806]

]];

var getCoordinate =

14102895.763908967,4224317.671008111,14102432.364424989,4223753.947924509,14103225.398593448,4223553.30072526,14103555.033277927,4223992.813637899,14102895.763908967,4224317.671008111;

규칙을 살펴보면 두번째 콤마에 , -> ],[ 를 해주면 될 것 같다.

맨 앞의 [[[ 와 맨뒤의 ]]] 는 나중에 붙여주자.

var chg = getCoordinate.replace(/,/g, function (match, i, original) {
nth++;
return (nth%2 === 0) ? "],[" : match;
});
chg = '[[['+chg+']]]';

이렇게 하면 원하는 데이터가 나온다

match : 여기서는 콤마(,)

i : 콤마의 자릿수

original : 원래 데이터 

nth%2 === 0 : 2로 나누어 떨어지는 콤마에 대해서만 치환을 해주기 위해서

File file = new File(src+fileName);

/* File resize */
BufferedImage inputImage = ImageIO.read(file);
int width = 250;
int height = 200;

String[] ext = {"jpg","JPG", "PNG","png"};

for(String format : ext) {
BufferedImage outputImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics2D g = outputImage.createGraphics();
g.drawImage(inputImage, 0, 0, width, height, null);

File out = new File(src+fileName);
FileOutputStream fos = new FileOutputStream(out);
ImageIO.write(outputImage, format, fos);
}
/* File resize END*/

sftp를 활용하기 위해서는 jsch 라이브러리가 필요.

*maven 형태 

<dependency>

<groupId>com.jcraft</groupId>

<artifactId>jsch</artifactId>

<version>0.1.55</version>

</dependency>

*gradle 형태

// https://mvnrepository.com/artifact/com.jcraft/jsch

compile group: 'com.jcraft', name: 'jsch', version: '0.1.55'

해당 클래스에 

import com.jcraft.jsch.Channel;
import com.jcraft.jsch.ChannelSftp;
import com.jcraft.jsch.JSch;
import com.jcraft.jsch.Session;

프로세스를 작성한후 

sftpConnect(fileName); 호출 하면

  // 다른서버 SSH 전송
@SuppressWarnings("finally")
public String sftpConnect(String fileName) {
    String rfileName = "";
    try {
    String des = "/root/"; //파일을 이동시키고자 하는 위치
    String src = "/home/tomcat/webapps/Anticall/upload/";  //파일이 존재 하는 위치
JSch jsch = new JSch();
Session session = jsch.getSession("user", "192.168.xxx.xxx", 22);  //user, ip, port
session.setConfig("StrictHostKeyChecking", "no");
session.setPassword("password");  //이동시킬 서버의 password

session.connect();
Channel channel = session.openChannel("sftp");
channel.connect();
ChannelSftp sftpChannel = (ChannelSftp) channel;
sftpChannel.cd(des); 
File file = new File(src+fileName);
FileInputStream fis = new FileInputStream(file);
sftpChannel.put(fis, file.getName());
fis.close();

sftpChannel.disconnect();
channel.disconnect();
session.disconnect();   

rfileName = file.getName();
} catch(Exception e) {
logger.error("Exception:",e);
} finally {
return rfileName;
}   
}

버튼을 누르면 데이터를 하나만 생성해야하는데,

로딩이 너무 길어서(로딩바가 없다면) 사용자가 기다리지 못하고 버튼을 여러번 누를 경우,

데이터가 여러개가 생성되는 현상을 발견.

간단하게 처리 하려면 

변수값 = 0 이라 두고, 버튼 클릭시 변수값을 1로 변경한다음에

버튼을 다시 누르면 변수값이 0인지 체크하고 아니면 데이터를 생성 못하게 하는 방법도 있지만

웬지 욕심도 나고 해서 로딩바를 만들어보고 싶었다. ( + 화면 반투명하게 만들고 싶었다)

<script src="./spin.js"> </script>

js파일은 로딩바를 나타내기 위한 파일입니다.

위 파일은 http://spin.js.org/에서 받을 수 있고, 첨부파일로도 다운받으실 수 있습니다.

<style>

div.backLayer { display:none; background-color:black; position:absolute; left:0px; top:0px; } div#loadingDiv{ background-color:skyblue; display: none; position: absolute; width:300px; height:300px; } 

</style>

바탕화면에 반투명 레이어를 나타내기 위한 것 입니다.

<body>

  <div class="backLayer" style=""></div>

  <span class="ssBtn" onclick="voucherIssue()"> 발행 </span>

</body>

위의 발행을 클릭하면 voucherIssue()가 실행 되겠다.

function voucherIssue(){

var spinner;
/*화면 불투명하게*/
var width = $(window).width();
var height = $(window).height();
//화면을 가리는 레이어의 사이즈 조정
$(".backLayer").width(width);
$(".backLayer").height(height);
$(".backLayer").fadeTo(500, 0.3);//화면을 가리는 레이어를 보여준다 (0.5초동안 30%의 농도의 투명도)
/*화면 불투명하게*/

/* 로딩바 */
spinner = new Spinner().spin().el;
$(document.body).append(spinner);
/* 로딩바 */

}