1. 程式人生 > >使用spring websocket 和stomp實現訊息功能

使用spring websocket 和stomp實現訊息功能

<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title>Home</title>
    <spring:url value="/webjars/jquery/2.0.3/jquery.min.js" var="jQueryCore"/>
    <script src="${jQueryCore}"></script>
    <spring:url value="/webjars/sockjs-client/0.3.4/sockjs.min.js" var="sockJs"/>
    <script src="${sockJs}"></script>
    <spring:url value="/webjars/stomp-websocket/2.3.4/lib/stomp.min.js" var="stomp"/>
    <script src="${stomp}"></script>
    <spring:url value="/" var="context"/>
</head>
<body>
<button id="stop">Stop</button>

<script th:inline="javascript">
    var sock = new SockJS("${context}"+"/marcopolo");
    var stomp = Stomp.over(sock);

    stomp.connect('guest', 'guest', function(frame) {
        console.log('*****  Connected  *****');
        stomp.subscribe("/topic/marco", handlePolo);
        sayMarco();
    });

    function handleOneTime(message) {
        console.log('Received: ', message);
    }

    function handlePolo(message) {
        console.log('Received: ', message);
        $('#output').append("<b>Received: " +
                JSON.parse(message.body).message + "</b><br/>")
        if (JSON.parse(message.body).message === 'Polo!') {
            setTimeout(function(){sayMarco()}, 2000);
        }
    }

    function handleErrors(message) {
        console.log('RECEIVED ERROR: ', message);
        $('#output').append("<b>GOT AN ERROR!!!: " +
                JSON.parse(message.body).message + "</b><br/>")
    }

    function sayMarco() {
        console.log('Sending Marco!');
        stomp.send("/app/marco", {},
                JSON.stringify({ 'message': 'Marco!' }));
//        stomp.send("/topic/marco", {},
//                JSON.stringify({ 'message': 'Marco!' }));
        $('#output').append("<b>Send: Marco!</b><br/>")
    }

    $('#stop').click(function() {sock.close()});
</script>

<div id="output"></div>
</body>
</html>
PS: