SpringBoot2整合WebSocket，实现后端实时推送数据

最新推荐文章于 2024-04-21 09:34:15 发布

是小宗啊？

最新推荐文章于 2024-04-21 09:34:15 发布

阅读量1.6k

点赞数 3

分类专栏：开发百宝箱系列文章标签： websocket java spring

本文链接：https://blog.csdn.net/shaofengzong/article/details/118265372

版权

开发百宝箱系列专栏收录该内容

38 篇文章 5 订阅

订阅专栏

首先声明，本文只是一个demo，演示WebSocket推送流程，不能简单用于生产，需要改造

最近在做的很多项目中，涉及到非常多的实时数据图表展示，采用axios或ajax长轮询的方式，非常的消耗资源。于是有了这一篇，本文主要演示的是WebSocket的API使用，如果要实现服务端主动推送实时数据的功能，需要进行重新设计和编码实现，保证推送的唯一可达性和具备容错机制。

本文在“Moshow郑锴”大佬的教程上，进行了一些微小的改动，比如使用JUC的原子类代替了手动加锁来记录在线人数，亦能保证线程安全，又比如log打印日志，依照阿里巴巴编码规范要求使用占位符，而不是采用字符串拼接的形式，因为每一次拼接都需要new一个StringBuilder，而占位符只是替换，都是一些小细节，大佬的原文在最后给出，可以详细学习一下。

1. 项目目录很简单

在这里插入图片描述

2. POM文件-最少依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.ieslab.util</groupId>
    <artifactId>websocket</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>
    <name>websocket</name>
    <description>WebSocket Util</description>
    <properties>
        <java.version>1.8</java.version>
        <commons-lang3.version>3.11</commons-lang3.version>
        <fastJson.version>1.2.75</fastJson.version>
    </properties>
    <dependencies>
        <!--整合WebSocket-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!--commons-lang3-->
        <dependency>
            <groupId>org.apache.commons</groupId>
            <artifactId>commons-lang3</artifactId>
            <version>${commons-lang3.version}</version>
        </dependency>
        <!--fastJson-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>${fastJson.version}</version>
        </dependency>

        <!--三大公共基础依赖-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

3.WebSocket配置类

package com.ieslab.util.websocket.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;

/**
 * @version V1.0
 * @Title: WebSocket配置类
 * @Package com.ieslab.util.websocket.config
 * @Description: 开启WebSocket支持
 * @author: zongshaofeng
 * @date 2021/6/26
 */
@Configuration
public class WebSocketConfig {

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

4.创建WebSocketServer，这是核心类

package com.ieslab.util.websocket.server;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.stereotype.Component;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.atomic.AtomicInteger;

/**
 * @version V1.0
 * @Title: WebSocket核心类
 * @Package com.ieslab.util.websocket.server
 * @Description: 指定WebSocket服务端所有核心处理
 * @author: zongshaofeng
 * @date 2021/6/26
 */
@Component
@ServerEndpoint(value = "/websocket/{userId}")
@Slf4j
public class WebSocketServer {

    /**
     * 用来记录当前的在线连接数，采用JUC的原子类来保证线程安全
     */
    private final static AtomicInteger onlineCount = new AtomicInteger(0);
    /**
     * 创建Map存放每个连接对应的WebSocket对象，采用JUC的ConcurrentHashMap并发Map保证线程安全
     */
    private final static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();
    /**
     * 与某个客户端的连接会话，需要通过它来推送数据
     */
    private Session session;
    /**
     * 接收userId
     */
    private String userId;

    /**
     * 连接建立成功调用的方法
     *
     * @param session
     * @param userId
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("userId") String userId) {
        this.session = session;
        this.userId = userId;
        //记录当前的在线连接数
        int nowOnlineCount = 0;
        if (webSocketMap.containsKey(userId)) {
            webSocketMap.remove(userId);
            //加入到Map中
            webSocketMap.put(userId, this);
        } else {
            webSocketMap.put(userId, this);
            //在线数加1
            nowOnlineCount = onlineCount.incrementAndGet();
        }
        log.info("ID为{}的用户连接成功，当前在线人数为：{}", userId, nowOnlineCount);
        try {
            //发送消息，检验是否连接成功
            sendMessage("来自服务端的提示消息，ID为" + userId + "的用户连接成功！");
        } catch (Exception e) {
            log.error("ID为{}的用户连接失败，失败原因：{}", userId, e.getMessage());
        }
    }

    /**
     * 连接关闭时调用的方法
     */
    @OnClose
    public void onClose() {
        //记录当前的在线连接数
        int nowOnlineCount = 0;
        if (webSocketMap.containsKey(this.userId)) {
            //移除对应的WebSocket对象，相应的在线连接数减1
            webSocketMap.remove(this.userId);
            nowOnlineCount =onlineCount.decrementAndGet();
        }
        log.info("ID为{}的用户断开连接，当前在线人数为：{}", this.userId, nowOnlineCount);
    }

    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用户ID：{}，报文：{}", this.userId, message);
        if (StringUtils.isNotBlank(message)) {
            try {
                //解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                //追加发送人(防止串改)
                jsonObject.put("fromUserId", this.userId);
                String toUserId = jsonObject.getString("toUserId");
                //传送给对应toUserId用户的websocket
                if (StringUtils.isNotBlank(toUserId) && webSocketMap.containsKey(toUserId)) {
                    webSocketMap.get(toUserId).sendMessage(jsonObject.toJSONString());
                } else {
                    log.error("请求的userId:{}不在该服务器上", toUserId);
                    //否则不在这个服务器上，发送到mysql或者redis
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 发生错误时调用的方法
     *
     * @param session
     * @param error
     */
    @OnError
    public void onError(Session session, Throwable error) {
        log.error("用户错误:{},原因:{}", this.userId, error.getMessage());
        error.printStackTrace();
    }

    /**
     * 实现服务器主动推送的方法
     *
     * @param message
     * @throws IOException
     */
    public void sendMessage(String message) throws IOException {
        this.session.getBasicRemote().sendText(message);
    }


    /**
     * 发送自定义消息
     *
     * @param message 消息内容
     * @param userId
     * @throws IOException
     */
    public static void sendInfo(String message, @PathParam("userId") String userId) throws IOException {
        log.info("发送消息到:{}，报文:{}", userId, message);
        if (StringUtils.isNotBlank(userId) && webSocketMap.containsKey(userId)) {
            webSocketMap.get(userId).sendMessage(message);
        } else {
            log.error("用户{},不在线！", userId);
        }
    }

}

5.application.yml

server:
  port: 8081
  servlet:
    context-path: /

6. 测试页面

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>websocket通讯</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            var socketUrl="http://localhost:8081/websocket/"+$("#userId").val();
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log(msg.data);
                //发现消息进入    开始处理前端触发逻辑
            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
        }
    }
</script>
<body>
<p>【userId】：<div><input id="userId" name="userId" type="text" value="10"></div>
<p>【toUserId】：<div><input id="toUserId" name="toUserId" type="text" value="20"></div>
<p>【toUserId】：<div><input id="contentText" name="contentText" type="text" value="hello websocket"></div>
<p>【操作】：<div><a onclick="openSocket()">开启socket</a></div>
<p>【操作】：<div><a onclick="sendMessage()">发送消息</a></div>
</body>

</html>

7. 测试

浏览器打开两个一模一样的测试页面
在这里插入图片描述

首先在各自的页面中点击开启Socket，就是模拟上线呗

在小明窗口点击发送消息，查看结果

反向操作
![(https://img-blog.csdnimg.cn/20210627085357506.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoYW9mZW5nem9uZw==,size_16,color_FFFFFF,t_70)
再看看后台打印的日志消息
在这里插入图片描述
当前台页面关闭时，后端亦能实时感知

这不就好了嘛
完事手工

参考文章：SpringBoot2.0集成WebSocket，实现后台向前端推送信息

感谢上述大佬的教程，非常详细。

是小宗啊？

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot2整合WebSocket，实现后端实时推送数据

首先声明，本文只是一个demo，演示WebSocket推送流程，不能简单用于生产，需要改造最近在做的很多项目中，涉及到非常多的实时数据图表展示，采用axios或ajax长轮询的方式，非常的消耗资源。于是有了这一篇，本文主要演示的是WebSocket的API使用，如果要实现服务端主动推送实时数据的功能，需要进行重新设计和编码实现，保证推送的唯一可达性和具备容错机制。本文在“Moshow郑锴”大佬的教程上，进行了一些微小的改动，比如使用JUC的原子类代替了手动加锁来记录在线人数，亦能保证线程安全，又比如lo
复制链接

扫一扫