html:
<script type="text/javascript" src="https://cdn.bootcss.com/sockjs-client/1.0.0/sockjs.min.js" ></script> <script type="text/javascript" src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js" ></script>
js:
connectwebsocket() { const initialize = () => { this.setState({ lastTime: new Date().getTime(), }); let origin = window.origin; //连接服务端的端点,连接以后才可以订阅广播消息和个人消息 let socket = new window.SockJS(`${origin}/xxxx`); let stompClient = window.Stomp.over(socket); stompClient.debug = null; //禁用调试功能 stompClient.heartbeat.incoming = 10000; stompClient.heartbeat.outgoing = 20000; stompClient.connect( {}, () => { this.setState({ connectStatus: true }); //设置连接状态 stompClient.send('/app/xxx', { priority: 9 }, xx); //订阅广播消息 stompClient.subscribe('/topic/xxx/' + xx, reception => { xxx }); const checkHearBeat = () => { const nowTime = new Date().getTime(); const Time = nowTime - this.state.lastTime; if (Time > 300000) { console.log('超时。。。'); socket.close(); this.setState({ connectStatus: false }); clearInterval(reconnect); } }; const reconnect = setInterval(checkHearBeat, 5 * 1000); }, error => { console.log('error===:', error); setTimeout(initialize, 5000); } ); socket.onclose = () => { console.log('close===='); }; socket.onheartbeat = () => { console.log('heartbeat'); this.setState({ lastTime: new Date().getTime(), }); }; }; initialize(); setInterval(() => { if (!this.state.connectStatus) { initialize(); } }, 15 * 1000); }