SpringBoot整合WebSocket详细教程_spring-boot-starter-websocket

作者：笔触狂放9 | 2024-06-14 08:22:52

踩

spring-boot-starter-websocket

预期效果

在这里插入图片描述

在这里插入图片描述
共开启两个页面，实现一对一聊天。

服务端代码：https://gitee.com/lianaozhe/springboot-websocket.git

代码实现逻辑

服务端

导入相关依赖：

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

        <!-- hutool 工具包，各种封装功能 一应俱全-->
        <dependency>
            <groupId>cn.hutool</groupId>
            <artifactId>hutool-all</artifactId>
            <version>5.8.5</version>
        </dependency>
1
2
3
4
5
6
7
8
9
10
11

WebSocketConfig配置类：

package com.web.config;

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

/**
 * @ClassName WebSocketConfig
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:18
 * @Version 1.0
 */
@Configuration
public class WebSocketConfig {

    /**
     * 	注入ServerEndpointExporter，
     * 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint
     */
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
    
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

WebSocket操作类：

package com.web.websocket;

import java.util.concurrent.ConcurrentHashMap;
import java.util.concurrent.CopyOnWriteArraySet;

import javax.websocket.*;
import javax.websocket.server.PathParam;
import javax.websocket.server.ServerEndpoint;

import cn.hutool.json.JSONObject;
import cn.hutool.json.JSONUtil;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;

/**
 * @ClassName WebSocket
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:20
 * @Version 1.0
 */
@Component
@Slf4j
@ServerEndpoint("/websocket/{userId}")
public class WebSocket {

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

    /**
     * 用来存放每个客户端对应的MyWebSocket对象。
     */
    private static CopyOnWriteArraySet<WebSocket> webSockets =new CopyOnWriteArraySet<>();
    // 用来存在线连接用户信息
    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消息】有新的连接，用户id是【{}】总数为【{}】",userId,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
     * @param message
     */
    @OnMessage
    public void onMessage(String message) {
        log.info("【websocket消息】收到客户端消息:"+message);
        JSONObject jsonObject = JSONUtil.parseObj(message);
        Object toUserId = jsonObject.get("toUserId");
        Session session = sessionPool.get(toUserId);

        session.getAsyncRemote().sendText(JSONUtil.toJsonStr(jsonObject.get("msg")));

    }

    /** 发送错误时的处理
     * @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();
                }
            }
        }

    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142

TestController测试接口类：

package com.web.controller;

import com.web.websocket.WebSocket;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

/**
 * @ClassName TestController
 * @Description TODO
 * @Author laz
 * @Date 2023/4/26 16:23
 * @Version 1.0
 */
@RestController
@RequestMapping("web")
public class TestController {

    @Autowired
    private WebSocket webSocket;

    @RequestMapping("test")
    public String test(String userId,String msg){
        webSocket.sendOneMessage(userId,msg);
        return "成功";
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

客户端

test.html文件：

<!doctype html>
<html lang="zh-CN">
	<head>
		<!-- 必须的 meta 标签 -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

		<!-- Bootstrap 的 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
			integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">



		<title>WebSocket1</title>

		<style>
			form {
				width: 820px;
				margin: auto;
			}

			.div1 {
				width: 820px;
				height: 500px;
				border: #000000;
				border-width: thin;
				border-style: solid;
			}

			.div2 {
				text-align: center;
				width: 800px;
				height: 50px;
			}
		</style>

		<script>
			function clearData() {
				$("#div1").html("");
			}


			var socket;

			function openSocket() {
				if (typeof(WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					console.log("您的浏览器支持WebSocket");

					//websocket地址
					var socketUrl = "ws://localhost:8088/websocket/20";
					console.log(socketUrl);
					if (socket != null) {
						socket.close();
						socket = null;
					}
					socket = new WebSocket(socketUrl);
					//打开事件
					socket.onopen = function() {
						console.log("websocket已打开");
						$("#div1").append("websocket已打开" + "<br \>");
					};
					//获得消息事件
					socket.onmessage = function(msg) {
						console.log(msg.data);
						$("#div1").append("接收到消息：" + msg.data + "<br \>");

					};
					//关闭事件
					socket.onclose = function() {
						console.log("websocket已关闭");
						$("#div1").append("websocket已关闭" + "<br \>");
					};
					//发生了错误事件
					socket.onerror = function() {
						console.log("websocket发生了错误");
						$("#div1").append("websocket发生了错误" + "<br \>");
					}
				}
			}

			function sendMsg() {
				if (typeof(WebSocket) == "undefined") {
					console.log("您的浏览器不支持WebSocket");
				} else {
					console.log("您的浏览器支持WebSocket");
					console.log('{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');
					socket.send('{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');

					var msg = document.getElementById("msg").value;
					$("#div1").append("发送消息：" + msg + "<br \>");
					document.getElementById("msg").value = "";
				}


			}
		</script>

	</head>
	<body>

		<h1 align="center">WebSocket测试Demo</h1><br />
		<form class="form-inline">

			<div class="form-group mx-sm-3 mb-2">
				<label for="toUserId" class="sr-only">toUserId</label>
				<input type="text" class="form-control" id="toUserId" placeholder="toUserId">
			</div>
			<div class="form-group mb-2">
				<label for="msg" class="sr-only">消息內容</label>
				<input type="text" class="form-control" id="msg" placeholder="消息內容">
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-primary" onclick="openSocket()">开启socket</button>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-danger" onclick="sendMsg()">发送消息</button>
			</div>
			<div class="form-group mx-sm-3 mb-2">
				<button type="button" class="btn btn-secondary" onclick="clearData()">清空内容</button>
			</div>
			<div class="div2"></div>
			<div class="div1" id="div1"></div>

		</form>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
		integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
	</script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous">
	</script>

</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138