?‍?作者：bug菌
✏️博客：CSDN、掘金、infoQ、51CTO等
?简介：CSDN|阿里云|华为云|51CTO等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金 | InfoQ | 51CTO等社区优质创作者，全网粉丝合计15w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。

…

✍️温馨提醒：本文字数：1999字, 阅读完需：约 5 分钟

?本文收录于《Spring Boot从入门到精通》，专门攻坚指数提升。

本专栏致力打造最硬核 Spring Boot 从零基础到进阶系列学习内容，?均为全网独家首发，打造精品专栏，专栏持续更新中…欢迎大家订阅持续学习。

环境说明：Windows10 + Idea2021.3.2 + Jdk1.8 + SpringBoot 2.3.1.RELEASE

1. 前言

在上一期《SpringBoot之集成WebSocket及使用说明》，我对WebSocket进行了基础及理论知识普及学习，而这一期，我重点是要带着你们进行实战教学，手把手教学如何在springboot架构基础上集成WebSocket及实现前后端通讯功能。具有很好的学习价值，希望大家在学习的过程中能得到你想要的。

这将又会是干货满满的一期，全程无尿点不废话只抓重点教，具有非常好的学习效果，拿好小板凳准备就坐！希望学习的过程中大家认真听好好学，学习的途中有任何不清楚或疑问的地方皆可评论区留言或私信，bug菌将第一时间给予解惑，那么废话不多说，直接开整！Fighting！！

2. 环境说明?

本地的开发环境：

开发工具：IDEA 2021.3

JDK版本： JDK 1.8

Spring Boot版本：2.3.1 RELEASE

Maven版本：3.8.2

3. 集成WebSocket

3.1 添加WebSocket依赖

在你项目的pom.xml文件中添加以下包。

<!--集成WebSocket-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

<!--Thymeleaf 静态模板-->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

<!--fastjson-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.51</version>
</dependency>

3.2 添加WebSocket配置类

我们需要对WebSocket进行配置，以开启对WebSocket的使用。

@Configuration
public class WebSocketConfig {

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

3.3 创建服务端WebSocket的server端

如下我们来定义一个类，专门把WebSocket相关的启动类及相关方法封装好，这也是服务端对WebSocket的支持核心。

@Component
@ServerEndpoint("/server/{uid}")
@Slf4j
public class WebSocketServer {


    /**
     * 用来记录当前在线连接数量,应该把它设计成线程安全的。
     */
    private static int onlineCount = 0;


    /**
     * concurrent包是线程安全的Set，用来存放每个客户端对应的WebSocket对象。
     */
    private static ConcurrentHashMap<String, WebSocketServer> webSocketMap = new ConcurrentHashMap<>();

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

    /**
     * 接收客户端消息的uid
     */
    private String uid = "";

    /**
     * 连接建立成功调用的方法
     */
    @OnOpen
    public void onOpen(Session session, @PathParam("uid") String uid) {
        this.session = session;
        this.uid = uid;
        if (webSocketMap.containsKey(uid)) {
            webSocketMap.remove(uid);
            //加入到set中
            webSocketMap.put(uid, this);
        } else {
            //加入set中
            webSocketMap.put(uid, this);
            //在线数加1
            addOnlineCount();
        }

        log.info("用户连接:" + uid + ",当前在线人数为:" + getOnlineCount());

        try {
            sendMsg("连接成功");
        } catch (IOException e) {
            log.error("用户:" + uid + ",网络异常!!!!!!");
        }
    }

    /**
     * 连接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        if (webSocketMap.containsKey(uid)) {
            webSocketMap.remove(uid);
            //从set中删除
            subOnlineCount();
        }
        log.info("用户退出:" + uid + ",当前在线人数为:" + getOnlineCount());
    }

    /**
     * 收到客户端消息后调用的方法
     * @param message 客户端发送过来的消息
     */
    @OnMessage
    public void onMessage(String message, Session session) {
        log.info("用户id:" + uid + ",接收到的报文:" + message);
        //可以群发消息
        //消息保存到数据库、redis
        if (!StringUtils.isEmpty(message)) {
            try {
                //解析发送的报文
                JSONObject jsonObject = JSON.parseObject(message);
                //追加发送人(防止串改)
                jsonObject.put("fromUID", this.uid);
                String toUID = jsonObject.getString("toUID");
                //传送给对应的toUserId用户的WebSocket
                if (!StringUtils.isEmpty(toUID) && webSocketMap.containsKey(toUID)) {
                    webSocketMap.get(toUID).sendMsg(jsonObject.toJSONString());
                } else {
                    //若果不在这个服务器上，可以考虑发送到mysql或者redis
                    log.error("请求的UserId:" + toUID + "不在该服务器上");
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

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

    /**
     * 实现服务器主动推送
     */
    private void sendMsg(String msg) throws IOException {
        this.session.getBasicRemote().sendText(msg);
    }

    /**
     * 发送自定义消息
     */
    public static void sendInfo(String message, @PathParam("uid") String uid) throws IOException {
        log.info("发送消息到:" + uid + ",发送的报文:" + message);
        if (!StringUtils.isEmpty(uid) && webSocketMap.containsKey(uid)) {
            webSocketMap.get(uid).sendMsg(message);
        } else {
            log.error("用户" + uid + ",不在线！");
        }
    }

    private static synchronized int getOnlineCount() {
        return onlineCount;
    }

    private static synchronized void addOnlineCount() {
        WebSocketServer.onlineCount++;
    }

    private static synchronized void subOnlineCount() {
        WebSocketServer.onlineCount--;
    }
}

拓展：

给大家科普一下，以上所用到的几个注解。分别如下：


注解	作用
@ServerEndpoint	创建了一个服务器端的URI，客户端可以通过这个URL来连接到WebSocket服务器端
@OnOpen	打开连接触发事件
@OnMessage	收到消息触发事件
@OnClose	关闭连接触发事件
@OnError	处理错误

3.4 创建Controller接口

编写一个Controller，用于定义WebSocket通信的接口。

@RestController
@RequestMapping("/websocket")
@Api(tags = "WebSocket模块", description = "WebSocket模块")
public class WebSocketController {


    @GetMapping("/page")
    @ApiOperation(value = "跳转WebSocket微聊天室页面", notes = "跳转WebSocket微聊天室页面")
    public ModelAndView page() {
        return new ModelAndView("webSocket");
    }

    @GetMapping("/push/{toUID}")
    @ApiOperation(value = "指定用户进行消息推送", notes = "指定用户进行消息推送")
    public ResultResponse<String> pushToClient(String message, @PathVariable String toUID) throws IOException {
        WebSocketServer.sendInfo(message, toUID);
        return new ResultResponse<>("send ok!");
    }

}

3.5 创建页面进行WebSocket测试连接及发送消息

以下我们一切从简，我们就写个html来实现WebSocket的连接及消息推送。

<!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;


    //打开WebSocket
    function openSocket() {
        if (typeof(WebSocket) === "undefined") {
            console.log("您的浏览器不支持WebSocket");
        } else {
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口,建立连接.
            var socketUrl = "http://localhost:8080/server/" + $("#uid").val();
            //将https与http协议替换为ws协议
            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('{"toUID":"' + $("#toUID").val() + '","Msg":"' + $("#msg").val() + '"}');
            socket.send('{"toUID":"' + $("#toUID").val() + '","Msg":"' + $("#msg").val() + '"}');
        }
    }
</script>
<body>
<p>【uid】：
<div><input id="uid" name="uid" type="text" value="5"></div>
<p>【toUID】：
<div><input id="toUID" name="toUID" type="text" value="10"></div>
<p>【Msg】：
<div><input id="msg" name="msg" type="text" value="hello WebSocket"></div>
<p>【第一步操作:】：
<div><button onclick="openSocket()">开启socket</button></div>
<p>【第二步操作:】：
<div><button onclick="sendMessage()">发送消息</button></div>
</body>

</html>

3.6 项目结构

接下来，给大家看下我的项目结构目录。

4. 页面测试

我们既可以通过访问http://localhost:8080/websocket/page，也可以直接打开webSocket.html页面，两种方式随你哪一种。

接着，我们先来开启客户端A注册一个在线用户，uid=‘张三’。然后点击【开启socket】，我们可以看到控制台，是成功连接了服务端的WebSocket服务的。

你也可以检查服务端的控制台，也可以看到，[张三]用户已经登录在线了，且在线人数为1。

我们再开启客户端B也注册一个在线用户。uid=‘李四’，点击【开启socket】连接，查看控制台打印，是成功连接了服务端的WebSocket服务。

你也查看系统控制台，可以看到共2个在线用户，分别为[张三]和[李四]。

转存失败，建议直接上传图片文件编辑

接下来我们用客户端A给客户端B进行信息推送，信息内容为：你好李四，我是张三！

控制台是成功获取到了客户端A用户的消息推送。

并且客户端B也是捕获到了来自客户端A推送的消息。

相反客户端B在收到客户端A的广播消息，于是进行消息回复。我们就通过客户端B进行推送消息，发送消息内容为：你好张三，我是李四！

接下来，我们来查看下客户端A的控制台，显然是成功接收到了来自客户端B推送的消息。

查看服务端控制台也是可以得知。

以上是客户端开启WebSocket连接后进行的单通道推送。

5. 服务端推送消息到指定客户端

接下来我们再来测试一下通过服务端向指定客户端进行消息推送。

我们如上是有实现一个发送消息的接口，我们只需要在swagger中将收件人toUID及sendMsg指定即可，具体如下：

查看控制台，我们可以看到，消息是被成功推送的。

接着我们来验证一下，客户端B是否有接收到来自服务器端的消息。

经测试，客户端A是没接收到消息的；而客户端B是完整接收到了来自服务器端的消息。

相反，我们只发送到客户端A，测试过程也是的。这里就不给大家具体演示了，我们直接看结果。

ok，以上就是WebSocket通讯的简单玩法，更多有趣的玩法还得靠自己去琢磨啦。

… …

ok，以上就是我这期的全部内容啦，如果还想学习更多，你可以看看如下的往期热文推荐哦，每天积累一个奇淫小知识，日积月累下去，你一定能成为令人敬仰的大佬。

「赠人玫瑰，手留余香」，咱们下期拜拜~~

6. 热文推荐?

若想学习更多，可以参考这篇专栏总结《2023最新首发，全网最全 Spring Boot 学习宝典(附思维导图)》，本专栏致力打造最硬核 Spring Boot 进阶系列学习内容，?均为全网独家首发，打造精品专栏，专栏持续更新中。欢迎大家订阅持续学习。

在入门及进阶之途，我必助你一臂之力，系统性学习，从入门到精通，带你不走弯路，直奔终点；投资自己，永远性价比最高，都这么说了，你还不赶紧来学？？

7. 文末?

我是bug菌，CSDN | 阿里云 | 华为云 | 51CTO 等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金 | InfoQ | 51CTO等社区优质创作者，全网粉丝合计15w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。