자바심화 13일

화면 -> dto -> 매퍼(xml) -> 매퍼인터페이스 -> 서비스 -> 테스트

form은 전송하고 다음 화면으로 넘어가야 한다.
현재화면을 유지하면서 진행하고 싶다. ajax

http는 한번 내려준 후 연결을 끊는데, 웹소켓은 계속 연결한 상태를 유지.

보내고 받고 보내고 받고가 웹소켓에서는 가능하다.

클라이언트 서버에서 웹소켓을 이용한 채팅서버에 접속을 할거야~

그럼 /receiveall로 요청을 보내는데 이 메소드는 서버에 있어~

그럼 서버에서 receiveall이 동작하고 /send로 뿌려줘~
그런데 /send 같은 경우는 웹소켓에 접속한 모든 아이피에 뿌려줄거야~

sendme는?

나에게만 보낼거야~
서버 컨트롤러에서도 /send+id로 뿌릴건데,
클라이언트 측에서는 /send+cid로 오는거는 내가 받을거야~ 가됨.

enableSimpleBroker 의 첫번째 매개변수는 inbound, 두번째 매개변수는 outbound로 보낼 때 사용하는 경로임.

컨트롤러에서 /send를 이용해 보냄.


전송할 Msg의 구성요소.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>

<script>
    let pic = {
        myVideoStream:null,
        init:function(){
            this.myVideoStream = document.querySelector('#myVideo');
            $('#cfr_btn').click(function(){
                $('#cfr_form').attr({
                    'method':'post',
                    'action':'/cfrimpl'
                });
                $('#cfr_form').submit();
            });
        },
        getVideo:function(){
            navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            navigator.getMedia(
                {video: true, audio: false},
                function(stream) {
                    pic.myVideoStream.srcObject = stream
                    pic.myVideoStream.play();
                },
                function(error) {
                    alert('webcam not working');
                });
        },
        takeSnapshot:function(){
            var myCanvasElement = document.querySelector('#myCanvas');
            var myCTX = myCanvasElement.getContext('2d');
            myCTX.drawImage(this.myVideoStream, 0, 0, myCanvasElement.width, myCanvasElement.height);
        },
        send:function(){
            const canvas = document.querySelector('#myCanvas');
            const imgBase64 = canvas.toDataURL('image/jpeg', 'image/octet-stream');
            const decodImg = atob(imgBase64.split(',')[1]);
            let array = [];
            for (let i = 0; i < decodImg .length; i++) {
                array.push(decodImg .charCodeAt(i));
            }
            const file = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
            const fileName = 'snapshot_' + new Date().getMilliseconds() + '.jpg';
            let formData = new FormData();
            formData.append('file', file, fileName);
            $.ajax({
                type: 'post',
                url: '/saveimg/',
                enctype: 'multipart/form-data',
                cache: false,
                data: formData,
                processData: false,
                contentType: false,
                success: function (data) {
                    $('#imgname').val(data);
                }
            });
        },
        takeAuto:function(interval){
            this.getVideo();
            myStoredInterval = setInterval(function(){
                pic.takeSnapshot();
                pic.send();
            }, interval);
        }
    };
    $(function(){
        pic.init();
    });
</script>
<div class="col-sm-8 text-left">
    <h1>Pic</h1>
    <hr>
    <video  id="myVideo" width="400" height="300" style="border: 1px solid #ddd;"></video>
    <canvas id="myCanvas" width="160" height="140" style="border: 1px solid #ddd;"></canvas><br>
    <input type=button value="get Video" onclick="pic.getVideo();">
    <input type=button value="get Pic" onclick="pic.takeSnapshot();">
    <input type=button value="send Pic" onclick="pic.send();"><br>
    <input type=button value="Auto Pic" onclick="pic.takeAuto(5000);">
    <form id="cfr_form">
        Image Name:<input type="text" name="imgname" id="imgname"><br>
        <button id="cfr_btn">CFR</button>
    </form>
</div>

사진촬영, 자동촬영, 보내기