GIS Developer

크아! 제목 한번 요상합니다. JavaScript가 클라이언트 뿐만 아니라 Java나 서버단(Node.js 등)에서도 활용되다 보니… 여튼, WebSoket과 웹에서의 Javascript를 통한 통신의 예로 Binary 데이터 타입을 주고 받는 코드를 정리합니다. 이 글은 텍스트 타입의 데이터를 주고 받는 [jetty를 이용한 WebSocket 서버 구현하기]라는 글을 기반으로 작성된 글입니다.

WebSocket을 위한 서버는 jetty를 활용하였습니다. 먼저 클라이언트가 서버 단에 바이너리 데이터가를 전달하는 코드는 다음과 같습니다.

var buffer = new ArrayBuffer(8);
var dataview = new DataView(buffer);

dataview.setInt32(0, 9438);
dataview.setFloat32(4, 3224.3224);
            
webSocket.send(buffer);

8 Bytes 크기의 데이터 덩어리를 만들고, 이 덩어리 안에 Int와 Float 타입에 대한 값으로 각각 9438과 3224.3224를 넣어서 웹소켓으로 전송하는 코드입니다. 이렇게 전송하면 서버가 받아야 하는데, 아래의 코드는 서버 측의 코드입니다.

@Override
public void onWebSocketBinary(byte[] payload, int offset, int len)
{
    if ((outbound != null) && (outbound.isOpen()))
    {
        InputStream is = new ByteArrayInputStream(payload);
        DataInputStream dis = new DataInputStream(is);
    		
        try {
            int v1 = dis.readInt();
            float v2 = dis.readFloat();
            double result = (double)v1 * (double)v2;
    			
            ByteBuffer bb = ByteBuffer.allocate(8);
            bb.putDouble(0, result);
            outbound.getRemote().sendBytes(bb);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

10번과 11번에서 클라이언트가 보낸 int와 float 값을 읽고, 엄청나게 복잡한 연산인 곱의 결과 값을 16번 코드에서 클라이언트로 전달하고 있는 코드입니다. 이제 아래는 다시 클라이언트가 서버가 계산한 소중한 결과를 받는 코드입니다.

webSocket.onmessage = function (message) {
    var blob = message.data;
    var fileReader = new FileReader();

    fileReader.onload = function (event) {
        var arrayBuffer = event.target.result;
        var dataview = new DataView(arrayBuffer);
        var answer = dataview.getFloat64(0);

        alert("Server> : " + answer);
    };

    fileReader.readAsArrayBuffer(blob);
};

서버로부터 받는 바이너리 데이터는 blob 형식으로 받습니다. 이 데이터는 FileReader를 통해 읽어 해석할 수 있습니다. 이상으로 웹소켓에서 바이너리 데이터를 주고 받는 코드에 대한 글을 정리한 글이였습니다.