Spring Boot+Socket实现与html页面的长连接( 三 ) _Spring

SocketTask.java(轮询调度往客户端推送消息)#

文章插图

package com.cyb.socket.schedule;import com.cyb.socket.websocket.WebSocket;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.scheduling.annotation.Scheduled;import org.springframework.stereotype.Component;import java.io.IOException;import java.text.SimpleDateFormat;import java.util.Date;@Componentpublic class SocketTask { @Autowired private WebSocket webSocket; private SimpleDateFormat sdf =new SimpleDateFormat("yyyy-MM-dd HH:mm:ss SSS" ); //5秒轮询一次 @Scheduled(fixedRate = 5000) public void sendClientData() throws IOException { String msg="{"message":"你好","userId":"002","to":"All"}"; webSocket.sendMessageAll(msg); System.out.println("消息推送时间："+ sdf.format(new Date())); }}
测试网页#index.html#<!DOCTYPE HTML><html><head> <title>Test My WebSocket</title></head> <body>TestWebSocket<input id="text" type="text" style="width:500px"/><button onclick="send()">SEND MESSAGE</button><button onclick="closeWebSocket()">CLOSE</button><div id="message"></div></body> <script type="text/JavaScript"> var websocket = null; //判断当前浏览器是否支持WebSocket if('WebSocket' in window){ //连接WebSocket节点 websocket = new WebSocket("ws://localhost:8083/connectWebSocket/001"); } else{ alert('Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function(){ setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event){ setMessageInnerHTML("open"); } //接收到消息的回调方法 websocket.onmessage = function(event){ setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function(){ setMessageInnerHTML("close"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口， server端会抛异常。window.onbeforeunload = function(){ websocket.close(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML){ document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭连接 function closeWebSocket(){ websocket.close(); } //发送消息 function send(){ var message = document.getElementById('text').value; websocket.send(message); }</script></html>index2.html#<!DOCTYPE HTML><html><head> <title>Test My WebSocket</title></head> <body>TestWebSocket<input id="text" type="text" style="width:500px" /><button onclick="send()">SEND MESSAGE</button><button onclick="closeWebSocket()">CLOSE</button><div id="message"></div></body> <script type="text/javascript"> var websocket = null; //判断当前浏览器是否支持WebSocket if('WebSocket' in window){ //连接WebSocket节点 websocket = new WebSocket("ws://localhost:8083/connectWebSocket/002"); } else{ alert('Not support websocket') } //连接发生错误的回调方法 websocket.onerror = function(){ setMessageInnerHTML("error"); }; //连接成功建立的回调方法 websocket.onopen = function(event){ setMessageInnerHTML("open"); } //接收到消息的回调方法 websocket.onmessage = function(event){ setMessageInnerHTML(event.data); } //连接关闭的回调方法 websocket.onclose = function(){ setMessageInnerHTML("close"); } //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口， server端会抛异常。window.onbeforeunload = function(){ websocket.close(); } //将消息显示在网页上 function setMessageInnerHTML(innerHTML){ document.getElementById('message').innerHTML += innerHTML + '<br/>'; } //关闭连接 function closeWebSocket(){ websocket.close(); } //发送消息 function send(){ var message = document.getElementById('text').value; websocket.send(message); }</script></html>项目地址#链接：https://pan.baidu.com/s/1yiAXTkCjHac-F3S1HFyNJQ 提取码：53tp功能演示#客户端给所有在线用户发消息#