databus.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  1. <html>
  2. <head>
  3. <meta charset="UTF-8"/>
  4. <title>广播式WebSocket</title>
  5. <script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
  6. <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
  7. <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  8. </head>
  9. <body onload="disconnect()">
  10. <noscript><h2 style="color: #e80b0a;">Sorry,浏览器不支持WebSocket</h2></noscript>
  11. <div>
  12. <div>
  13. <button id="connect" onclick="connect();">连接</button>
  14. <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
  15. </div>
  16. <div id="conversationDiv">
  17. <label>服务端响应:</label>
  18. <p id="callback"></p>
  19. </div>
  20. </div>
  21. <script type="text/javascript">
  22. var stompClient = null;
  23. function setConnected(connected) {
  24. document.getElementById("connect").disabled = connected;
  25. document.getElementById("disconnect").disabled = !connected;
  26. document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
  27. $("#response").html();
  28. $("#callback").html();
  29. }
  30. function connect() {
  31. var socket = new SockJS('/simple');
  32. stompClient = Stomp.over(socket);
  33. stompClient.connect({}, function (frame) {
  34. setConnected(true);
  35. console.log('Connected:' + frame);
  36. stompClient.subscribe('/topic/callback', function (response) {
  37. $("#callback").html(response.body);
  38. });
  39. });
  40. }
  41. function disconnect() {
  42. if (stompClient != null) {
  43. stompClient.disconnect();
  44. }
  45. setConnected(false);
  46. console.log('Disconnected');
  47. }
  48. </script>
  49. </body>
  50. </html>