定时推送后台数据到前台websocket和sse实现

最新推荐文章于 2024-07-09 11:27:54 发布

程序猿渣渣帅

最新推荐文章于 2024-07-09 11:27:54 发布

阅读量4.2k

点赞数 1

分类专栏： web

本文链接：https://blog.csdn.net/l1394049664/article/details/83962418

版权

前言：本文的实现环境基于springboot2

1、websocket的实现

前端页面：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8" />
    <title></title>
</head>
<body>
欢迎页面
<h1>${cid}</h1>
<div id="ws">

</div>

</body>
</html>

<script language="javascript" type="text/javascript">
    var socket;

    if(typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    }else{
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接（默认同Tomcat的端口）
        socket = new WebSocket("ws://localhost:1111/websocket/20");
        //打开事件
        socket.onopen = function() {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
            var dom = document.getElementById( "ws" );
            dom.innerHTML=msg.data;

        };
        //关闭事件
        socket.onclose = function() {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
    }
</script>

后台实现

配置类
@Configuration
public class WebSocketConfig {

    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }

}


websocket服务类
@ServerEndpoint("/websocket/{sid}")
@Component
public class WebSocketServer {

     private static Logger log= LoggerFactory.getLogger(WebSocketServer.class);
    //静态变量，用来记录当前在线连接数。应该把它设计成线程安全的。
    private static int onlineCount = 0;
    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    private static CopyOnWriteArraySet<WebSocketServer> webSocketSet = new CopyOnWriteArraySet<WebSocketServer>();

    //与某个客户端