1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- <html>
- <head>
- <meta charset="UTF-8"/>
- <title>广播式WebSocket</title>
- <script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
- <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
- </head>
- <body onload="disconnect()">
- <noscript><h2 style="color: #e80b0a;">Sorry,浏览器不支持WebSocket</h2></noscript>
- <div>
- <div>
- <button id="connect" onclick="connect();">连接</button>
- <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
- </div>
- <div id="conversationDiv">
- <label>服务端响应:</label>
- <p id="callback"></p>
- </div>
- </div>
- <script type="text/javascript">
- var stompClient = null;
- function setConnected(connected) {
- document.getElementById("connect").disabled = connected;
- document.getElementById("disconnect").disabled = !connected;
- document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
- $("#response").html();
- $("#callback").html();
- }
- function connect() {
- var socket = new SockJS('/simple');
- stompClient = Stomp.over(socket);
- stompClient.connect({}, function (frame) {
- setConnected(true);
- console.log('Connected:' + frame);
- stompClient.subscribe('/topic/callback', function (response) {
- $("#callback").html(response.body);
- });
- });
- }
- function disconnect() {
- if (stompClient != null) {
- stompClient.disconnect();
- }
- setConnected(false);
- console.log('Disconnected');
- }
- </script>
- </body>
- </html>
|