[spring boot] websocket 예제 중 html 부분

Java 2017. 10. 18. 21:57


spring boot websocket 예제인 https://spring.io/guides/gs/messaging-stomp-websocket/ 에서


webjar(bootstrap, jquery) 안쓰고

html/js 부분에서 직접 stomp, sockjs 가져와 사용한 테스트.




1.   build.gradle 에서 webjars 관련 디펜던시 모두 제거


2.  stomp.min.js, sockjs.min.js 다운로드

stomp : https://github.com/jmesnil/stomp-websocket/releases

sockjs : https://github.com/sockjs/sockjs-client/releases


3. src/main/resources/static/js 에 js 파일 복사 및 app.js 작성

var stompClient = null;


function setConnected(connected) {

document.getElementById("connect").disabled = connected;

document.getElementById("disconnect").disabled = !connected;

    if (connected) {

    document.getElementById("conversation").style.display = 'block';

    }

    else {

    document.getElementById("conversation").style.display = 'none';

    }

    document.getElementById("greetings").innerHTML ="";

}


function connect() {

    var socket = new SockJS('/websocket');

    stompClient = Stomp.over(socket);

    //stompClient.debug = () => {};

    stompClient.debug = f => f;

    stompClient.connect({}, function (frame) {

        setConnected(true);

        console.log('Connected: ' + frame);

        stompClient.subscribe('/topic/gretting', function (greeting) {

            showGreeting(JSON.parse(greeting.body).name);

        });

    });

}


function disconnect() {

    if (stompClient !== null) {

        stompClient.disconnect();

    }

    setConnected(false);

    console.log("Disconnected");

}


function sendName() {

var name = document.getElementById("name").value;

    stompClient.send("/app/hello", {}, JSON.stringify({'name': name}));

}


function showGreeting(message) {

var add = "<tr><td>" + message + "</td></tr>";

document.getElementById("greetings").innerHTML += add;

}

 



4. src/main/resources/static 에 index.html 작성

<!DOCTYPE html>

<html>

<head>

    <title>Hello Websocket</title>

    <script src="/js/sockjs.min.js" type="text/javascript"></script>

    <script src="/js/stomp.min.js" type="text/javascript"></script>

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

</head>

<body>

<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websocket relies on Javascript being

    enabled. Please enable

    Javascript and reload this page!</h2></noscript>

<br>

<br>

<label for="connect">WebSocket connection:</label>

<button id="connect" class="btn btn-default" onclick="connect()">Connect</button>

<button id="disconnect" class="btn btn-default" disabled="disabled" onclick="disconnect()">Disconnect</button>

<br>

<br>

<label for="name">What is your name?</label>

<input type="text" id="name" class="form-control" placeholder="Your name here...">

<button id="send" class="btn btn-default" type="submit" onclick="sendName()">Send</button>


<table id="conversation" class="table table-striped">

    <thead>

    <tr>

        <th>Greetings</th>

    </tr>

    </thead>

    <tbody id="greetings">

    </tbody>

</table>



</body>

</html> 





저작자표시

'Java' 카테고리의 다른 글

[spring boot 2.1.7] 개발 준비  (0) 2019.08.29
OpenJDK 설치  (0) 2019.08.08
CentOS 자바 설치  (0) 2019.01.04
Java System.loadLibrary 로 native module 로드시 에러  (0) 2017.11.17
클라이언트/서버 심플  (0) 2012.06.21
Thread 기본, IO, NIO 기본 내용들  (0) 2011.01.03
Java에서 XML 다루기 DOM, SAX, JDOM, StAX  (3) 2010.02.06
간단하게 gzip 압축 및 해제 해보기  (0) 2010.02.03

티스토리툴바