使用WebSocket实现从后端向前端推送信息

本文做一个简单的应用，使用单例模式+WebSocket向前端提示需要处理的消息数量。

“+”和“-”表示用户端做的操作；“查看消息[8]”表示管理端需要处理的消息。

引入依赖

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.2</version>
        <relativePath/>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    <dependencies>

注入ServerEndpointExporter，这个Bean会自动注册使用了@ServerPoint注解声明的类。

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

创建数量单例，这里的单例是本文主要向前端推送的内容。

由于此单例需要频繁使用，所以创建为饿汉式单例。

public class CountSingle {
    private Integer count = 10;
    private final static CountSingle countSingle = new CountSingle();
    public static Integer getCount() {
        return getInstance().count;
    }
    public static synchronized void setCount(OperEnum operEnum) {
        if (operEnum == OperEnum.ADD) {
            getInstance().count++;
        }
        if (operEnum == OperEnum.SUB) {
            getInstance().count--;
        }
    }
    public static CountSingle getInstance() {
        return countSingle;
    }
}

创建操作枚举，规范代码。

public enum OperEnum {
    ADD(1), SUB(2);
    private final Integer code;
    OperEnum(int code) {
        this.code = code;
    }
    public Integer getCode() {
        return code;
    }
}

WebSocket服务类创建。

@Component
@ServerEndpoint("/websocket")
public class WebSocketServer {
    private static final CopyOnWriteArraySet<WebSocketServer> connections = new CopyOnWriteArraySet<>();
    private Session session;
    @OnOpen
    public void onOpen(Session session) {
        this.session = session;
        connections.add(this);
        this.sendMessage(String.valueOf(CountSingle.getCount()));
        System.out.println("新建连接: " + session.getId());
    }
    @OnClose
    public void onClose() {
        connections.remove(this);
        System.out.println("连接关闭: " + session.getId());
    }
    @OnError
    public void onError(Throwable error) {
        error.printStackTrace();
    }
    private void sendMessage(String message) {
        try {
            this.session.getBasicRemote().sendText(message);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
    public static void broadcast(String message) {
        for (WebSocketServer client : connections) {
            client.sendMessage(message);
        }
    }
}

创建控制器，对于CountSingle的count数量加减的操作。

@RestController
public class CountController {
    @GetMapping("add")
    public void add() {
        CountSingle.setCount(OperEnum.ADD);
        WebSocketServer.broadcast(String.valueOf(CountSingle.getCount()));
    }
    
    @GetMapping("sub")
    public void sub() {
        CountSingle.setCount(OperEnum.SUB);
        WebSocketServer.broadcast(String.valueOf(CountSingle.getCount()));
    }
}

前端功能编写。使用jQuery的Ajax发送请求（或给查看信息后面的徽章赋值）、Layui的徽章组件编写主要样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/lib/jquery-3.4.1.min.js"></script>
    <script src="/lib/layui-v2.5.5/layui.js"></script>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
    <style>
        div {
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="add()">+</button>
    <button class="layui-btn layui-btn-sm layui-btn-warm" onclick="sub()">-</button>
    <button class="layui-btn">查看消息<span class="layui-badge layui-bg-gray" id="count"></span></button>
</div>

    let socket = new WebSocket("ws://localhost:8080/websocket");
    socket.onmessage = function (event) {
        $("#count").text(event.data);
    };
    function add() {
        $.ajax({
            url: '/add', // 请求的 URL
            type: 'GET', // 请求方法：GET、POST 等
            dataType: 'json', // 预期服务器返回的数据类型
        });
    }
    function sub() {
        $.ajax({
            url: '/sub', // 请求的 URL
            type: 'GET', // 请求方法：GET、POST 等
            dataType: 'json', // 预期服务器返回的数据类型
        });
    }

最后实现的效果。这里需要使用两个浏览器才能看到效果。

首先打开Edge浏览器（初始）。这里为了更好的看到效果，加上了一个显示时间的组件。

点击加号按钮。

打开Chrome浏览器查看到消息成功推送。

最后附上gitee地址：WebsocketTest: 本系统做一个简单的应用，使用单例模式+WebSocket向前端提示需要处理的消息数量。

标签： websocket 网络协议网络

本文转载自: https://blog.csdn.net/triumph55/article/details/140076529
版权归原作者 triumph qy 所有，如有侵权，请联系我们删除。

使用WebSocket实现从后端向前端推送信息

发表评论

“使用WebSocket实现从后端向前端推送信息”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航