当前位置:首页 » 《关于电脑》 » 正文

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

10 人参与  2024年09月12日 13:21  分类 : 《关于电脑》  评论

点击全文阅读


目录

一. 写本文的初衷

二. 实例概述

三. 开始实践

        1. 引入依赖

        2. Websocket 相关配置

        3. 创建消息数量单例

        4.  创建操作枚举

        5.  主要服务类

                <1> sendMessage

                <2> broadcast

        6. 消息数量单例控制器

        7. 前端页面

                <1>页面结构

                <2>js部分

        8. 效果展示


一. 写本文的初衷

        学习如何使用 WebSocket 技术,了解Java全双端通信。通过实践下面这个实例,以便于更好的理解。(最后附上了本demo的gitee地址,有需要可以随时下载)

二. 实例概述

        使用单例模式+WebSocket向前端用户提示需要处理的消息数量。这里的单例模式用来存储消息的数量,将初始数量设置为10。这里的"+"号和"-"是一个抽象的概念,泛指用户在某数据上做的操作使得该数据增加或减少。

三. 开始实践

        1. 引入依赖
    <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>
        2. Websocket 相关配置
@Configurationpublic class WebSocketConfig {        @Bean    public ServerEndpointExporter serverEndpointExporter() {        return new ServerEndpointExporter();    }}
        3. 创建消息数量单例
由于此单例需要频繁使用,所以创建为饿汉式单例。
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;    }}
        4.  创建操作枚举

        此枚举分别对应用户做的加或减操作 

public enum OperEnum {    ADD(1), SUB(2);    private final Integer code;    OperEnum(int code) {        this.code = code;    }    public Integer getCode() {        return code;    }}
        5.  主要服务类

        这里主要说两个重要的方法:

                <1> sendMessage

                向当前会话主体对象发送信息

                <2> broadcast

                向所有会话主体对象广播信息

@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);        }    }}
        6. 消息数量单例控制器
@RestControllerpublic 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()));    }}
        7. 前端页面
                <1>页面结构
<!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>
                <2>js部分
    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', // 预期服务器返回的数据类型        });    }
        8. 效果展示

        这里需要使用两个浏览器才能看到效果。 

websocket测试

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/158762.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

关于我们 | 我要投稿 | 免责申明

Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1