Springboot整合WebSocket实现主动向前端推送消息

本文介绍了如何在Springboot项目中利用WebSocket实现服务器主动向客户端推送消息,包括WebSocket的工作原理、与HTTP的区别以及在服务器端的实现步骤,同时展示了前端客户端的HTML5WebSocket连接和消息交互。
摘要由CSDN通过智能技术生成

前言

        在上篇文章tcp编程中,我们实现了C++客户端与java服务器之间的通信,客户端发送了一个消息给服务器,今天我们要实现基于WebSocket实现服务器主动向前端推送消息,并且以服务器接收到C++客户端的消息主动向前端推送消息的触发条件。

了解Websocket

WebSocket 的诞生背景

        在早期,网站为了实现推送技术,通常使用轮询(或称为短轮询)。轮询是指浏览器每隔一段时间向服务器发出 HTTP 请求,然后服务器返回最新的数据给客户端。这种方式存在明显的缺点:浏览器需要不断地向服务器发出请求,而每次请求都包含较长的头部信息,导致带宽资源浪费。

        为了解决这个问题,HTML5 定义了 WebSocket 协议,它能更好地节省服务器资源和带宽,并且能够更实时地进行通讯。

WebSocket 的基本原理

  1. WebSocket 是什么?

  • WebSocket 是一种网络传输协议,基于 TCP 实现。
  • 它在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层。
  • 与 HTTP 不同,WebSocket 需要先创建连接,然后可以进行双向数据传输。
  1. WebSocket 握手过程

  • 客户端通过 WebSocket 构造函数创建 WebSocket 对象,连接到服务器的 WebSocket URL。
  • 客户端发送类似于 HTTP 请求的报文,服务器返回接受 WebSocket 协议的响应。
  • 握手成功后,客户端和服务器之间的 WebSocket 连接建立,后续数据以帧序列的形式传输。

WebSocket 与 HTTP 的区别

  • WebSocket 使用类似于 HTTP 的握手连接,但数据传输更高效。
  • 较少的控制开销:头部信息较小。
  • 更强的实时性:实时通信,避免等待请求响应。
  • 保持连接状态:WebSocket 是全双工通信,不需要反复发出请求。无需重新发起连接。
  • 更好的二进制支持:处理二进制内容。
  • 可以支持扩展:自定义子协议。

 WebSocket可以做什么

  • 推文
  • 广告
  • 聊天室
  • 公告消息

    ................... 

服务器端

打开idea,创建一个Springboot项目,添加WebSocket依赖

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

创建一个WebSocket控制类,代码如下

/**
 * WebSocket操作类
 */
@Component
@Slf4j
@ServerEndpoint("/websocket/{userId}")  // 接口路径 ws://localhost:8081/webSocket/userId;
public class WebSocket {

    /**
     * 与某个客户端的连接会话,需要通过它来给客户端发送数据
     */
    private Session session;
    /**
     * 用户ID
     */
    private String userId;

    /**
     * concurrent包的线程安全Set,用来存放每个客户端对应的MyWebSocket对象。
     * 虽然@Component默认是单例模式的,但springboot还是会为每个websocket连接初始化一个bean,
     * 所以可以用一个静态set保存起来。
     * 注:底下WebSocket是当前类名
     */
    private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
    /**
     * 用来存所有在线连接用户信息,用来存每个session
      */
    private static ConcurrentHashMap<String,Session> sessionPool = new ConcurrentHashMap<String,Session>();
    /**
     * 链接成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam(value="userId")String userId) {
        try {
            this.session = session;
            this.userId = userId;
            webSockets.add(this);
            sessionPool.put(userId, session);
            log.info("【websocket消息】有新的连接,总数为:"+webSockets.size());
        } catch (Exception e) {
        }
    }
    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        try {
            webSockets.remove(this);
            sessionPool.remove(this.userId);
            log.info("【websocket消息】连接断开,总数为:"+webSockets.size());
        } catch (Exception e) {
        }
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @param message
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端消息:"+message);
    }

    /** 发送错误时的处理
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误,原因:"+error.getMessage());
        error.printStackTrace();
    }


    /**
     * 广播消息
      */
    public void sendAllMessage(String message) {
        log.info("【websocket消息】广播消息:"+message);
        for(WebSocket webSocket : webSockets) {
            try {
                if(webSocket.session.isOpen()) {
                    webSocket.session.getAsyncRemote().sendText(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 单点消息
      */
    public void sendOneMessage(String userId, String message) {
        Session session = sessionPool.get(userId);
        if (session != null&&session.isOpen()) {
            try {
                log.info("【websocket消息】 单点消息:"+message);
                session.getAsyncRemote().sendText(message);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 向多人发消息
     */
    public void sendMoreMessage(String[] userIds, String message) {
        for(String userId:userIds) {
            Session session = sessionPool.get(userId);
            if (session != null&&session.isOpen()) {
                try {
                    log.info("【websocket消息】 单点消息:"+message);
                    session.getAsyncRemote().sendText(message);
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
    }
}

添加一个和上篇文章一样的ServerThread类,添加@Component注解并添加WebSocket的调用代码

@Component//注册为Springboot管理的bean,否则不能使用Springboot的其它bean
public class faceServerThread implements Runnable{
    @Autowired
    private studentDao dao;//用于访问数据库
    WebSocket webSocket=new WebSocket();//用于使用WebSocket中的方法
    @Override
    public void run() {
        try {
            ServerSocket server=new ServerSocket(8888);
            Socket socket;
            byte[] buffer = new byte[1024];
            int len;
            student stu;
            while(true)
            {
                socket=server.accept();//处于阻塞状态,直到客户端连接
                System.out.println("客户端连接成功");
                InputStream input=socket.getInputStream();//用于读取客户端发来的字节流
                while ((len=input.read(buffer))!=-1){
                    String str = new String(buffer, 0, len);
                    //此处为代码修改部分
                    stu=dao.selectById(str);
                    if(stu!=null){
                        System.out.println(str);
                        webSocket.sendOneMessage("0",str);
                    }
                    ///
                }
                System.out.println("接收消息完毕");
                //System.out.println("收到消息:"+id);
            }
        } catch (IOException e) {
            System.out.println("客户端连接失败:");
            e.printStackTrace();
        }
    }
}

此处实现了runnable接口,是为了另外开一条线程,不与Springboot冲突。 

在启动类中添加启动线程

@SpringBootApplication
public class FreshmandemoApplication {
	public static void main(String[] args){
        ConfigurableApplicationContext context=SpringApplication.run(FreshmandemoApplication.class, args);
        faceServerThread faceThread=context.getBean(faceServerThread.class);
        new Thread(faceThread).start();
    }
}

前端客户端 

添加一个HTML文件,实现WebSocket

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
<script type="text/javascript">
    var socket;
    if (typeof (WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
    } else {
        console.log("您的浏览器支持WebSocket");
        //实现化WebSocket对象,指定要连接的服务器地址与端口  建立连接
        var reqUrl = "http://localhost:8081/websocket/0" ;
        socket = new WebSocket(reqUrl.replace("http", "ws"));
        //打开事件
        socket.onopen = function () {
            console.log("Socket 已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function (msg) {
            console.log("onmessage--" + msg.data);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function () {
            console.log("Socket已关闭");
        };
        //发生了错误事件
        socket.onerror = function () {
            alert("Socket发生了错误");
            //此时可以尝试刷新页面
        }
        //离开页面时,关闭socket
        //jquery1.8中已经被废弃,3.0中已经移除
        // $(window).unload(function(){
        //     socket.close();
        //});
    }

  /*  function sendMessage() {
        if (typeof (WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            // console.log("您的浏览器支持WebSocket");
            var toUserId = document.getElementById('toUserId').value;
            var contentText = document.getElementById('contentText').value;
            var msg = '{"sid":"' + toUserId + '","message":"' + contentText + '"}';
            console.log(msg);
            socket.send(msg);
        }
    }*/

</script>
</html>

测试

运行服务器,打开HTML文件,并开启浏览器控制台,打开上篇文章中的Qt客户端项目向后端服务器发送一个消息,

可以看到Qt客户端向后端服务器发送一个消息的同时,浏览器控制台也接收到一个消息。

  • 27
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: Spring Boot 2.0 是一套快速开发框架,其中包含了 WebSocket 模块,能够轻松地集成 WebSocket实现服务端主动前端推送数据。 首先,在pom.xml文件中引入Spring Boot的Starter Websocket依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> 然后,在Spring Boot的启动类上使用@EnableWebSocket注解开启 WebSocket: @SpringBootApplication @EnableWebSocket public class MyApp { public static void main(String[] args) { SpringApplication.run(MyApp.class, args); } } 接着,编写一个 WebSocketEndpoint 类用于处理 WebSocket 连接和消息的收发: @Component public class WebSocketEndpoint implements WebSocketHandler { private static final List<WebSocketSession> SESSIONS = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { SESSIONS.add(session); } @Override public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { // 接收到消息 } @Override public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception { SESSIONS.remove(session); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception { SESSIONS.remove(session); } @Override public boolean supportsPartialMessages() { return false; } // 服务器向前端推送消息 public static void sendMessage(String message) throws IOException { for (WebSocketSession session : SESSIONS) { if (session.isOpen()) { session.sendMessage(new TextMessage(message)); } } } } 最后,当服务端需要向前端推送数据时,可以调用 WebSocketEndpoint 中的 sendMessage 方法: WebSocketEndpoint.sendMessage("Hello, websocket!"); 前端则需要开启 WebSocket 连接,并在 onmessage 方法中接收服务端推送的数据: var socket = new WebSocket("ws://localhost:8080/websocket"); socket.onmessage = function(event) { var data = event.data; // 处理服务端推送的数据 }; 总之,Spring Boot 2.0 整合 WebSocket 实现服务端主动前端推送数据非常简单,只需要几行代码即可实现。 ### 回答2: Spring Boot 2.0 提供了与 WebSocket 相关的依赖和注解,可以方便地实现前端的实时通信。下面介绍如何使用 Spring Boot 2.0 整合 WebSocket 实现服务器主动推送数据到前端。 首先,在 pom.xml 文件中添加以下依赖: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 然后,创建一个 WebSocket 配置类,使用 `@EnableWebSocket` 注解启用 WebSocket: ``` @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myWebSocketHandler(), "/websocket").setAllowedOrigins("*"); } @Bean public WebSocketHandler myWebSocketHandler() { return new MyWebSocketHandler(); } } ``` 其中 `MyWebSocketHandler` 是自己实现WebSocket 消息处理类,可以在其中实现处理客户端发送过来的消息以及向客户端发送消息的逻辑。 下面是 `MyWebSocketHandler` 的一个示例: ``` public class MyWebSocketHandler extends TextWebSocketHandler { private Set<WebSocketSession> sessions = new CopyOnWriteArraySet<>(); @Override public void afterConnectionEstablished(WebSocketSession session) { sessions.add(session); } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) { sessions.remove(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) { // 处理客户端发送过来的消息 } public void pushMessage(String message) { for (WebSocketSession session : sessions) { try { session.sendMessage(new TextMessage(message)); } catch (IOException e) { // 发送消息失败 } } } } ``` 在 `pushMessage` 方法中,可以遍历所有连接的客户端会话,向它们发送消息。 最后,在需要推送数据的地方,注入 `MyWebSocketHandler`,调用 `pushMessage` 方法即可: ``` @Autowired private MyWebSocketHandler webSocketHandler; public void sendData() { // 处理数据 webSocketHandler.pushMessage(data); } ``` 至此,我们就成功地在 Spring Boot 2.0 中整合WebSocket,并实现了服务器主动前端推送数据的功能。 ### 回答3: 随着现代web应用的流行,实时数据交换变得越来越重要,而websocket作为实时双向通信的技术,成为了重要的实时数据传输协议。Spring Boot2.0整合websocket可以让我们通过服务器主动前端推送数据,实现实时数据交换,满足现代web应用的高实时性需求。 WebSocket是一种基于HTTP协议的双向通信协议,在通信过程中,浏览器和服务器相互发送数据,实现实时数据交互。Spring Boot2.0已经内置了对WebSocket协议的支持,通过使用Spring WebSocket API可以很容易地配置WebSocket端点和处理程序。 服务器端可通过定义一个WebSocketConfig的配置类,配置WebSocket的Endpoint和Handler,并注册到拦截器链中,如下所示: @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(webSocketHandler(), "/ws").addInterceptors(new HttpSessionHandshakeInterceptor()); } @Bean public WebSocketHandler webSocketHandler() { return new MyWebSocketHandler(); } } 在MyWebSocketHandler中,通过实现WebSocketHandler接口的handleMessage方法,可以处理客户端发送来的消息。如下所示: public class MyWebSocketHandler implements WebSocketHandler { @Override public void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception { //处理客户端发送来的消息 } } 服务器端推送消息前端,可以通过WebSocketSession的sendMessage方法实现,如下所示: session.sendMessage(new TextMessage("Hello,World!")); 客户端需要使用WebSocket API接收服务器推送来的数据,并处理数据,如下所示: var socket = new WebSocket("ws://localhost:8080/ws"); socket.onmessage = function(event) { //处理服务器推送过来的数据 }; 综上所述,Spring Boot2.0整合websocket可以通过配置WebSocket的Endpoint和Handler,在服务器端主动前端推送数据,实现实时数据交换。对于现代web应用的高实时性需求,该技术具有重要意义。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值