基于SpringBoot + Vue的项目整合WebSocket的入门教程

1、WebSocket简介

  WebSocket是一种网络通信协议，可以在单个TCP连接上进行全双工通信。它于2011年被IETF定为标准RFC 6455，并由RFC7936进行补充规范。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。这使得客户端和服务器之间的数据交换变得更加简单，并允许服务端主动向客户端推送数据。

2、服务端环境搭建

  服务端基于SpringBoot实现，首先引入对应的jar包，然后进行ServerEndpointExporter配置，然后再定义了一个WebSocket操作类，最后编写了一个测试的类WebSocketController（一个普通的Controller类）。

2.1、maven依赖

<dependency>
   <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-websocketartifactId>
dependency>
1
2
3
4
5

2.2、配置类WebSocketConfig

  ServerEndpointExporter是Spring框架中的一个类，主要用于在Spring Boot应用中启动和管理WebSocket服务器端点。

  在Spring Boot内置容器（嵌入式容器）中运行时，必须由ServerEndpointExporter提供ServerEndpointExporter bean，它会在启动时自动扫描和注册应用中的WebSocket端点。

  注意：在Tomcat等其他容器中运行时，容器的扫描工作会由容器自己处理，不需要手动注入ServerEndpointExporter bean，即不需要该配置！！！

@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

2.3、WebSocket操作类

  WebSocket操作类定义了WebSocket中的onOpen()、onMessage()、onClose()、onError()等方法，同时提供了一个发送广播（全部订阅用户）和点对点信息的方法。

1、这里@ServerEndpoint(“/api/websocket/{userId}”)中的定义可以根据自己的需要进行修改，因为我的项目里使用了SpringSecurity了，为了避免登录鉴权，这里使用“/api/**”配置了免登陆Api。后续会继续完善需要登录鉴权的使用方式。
2、这里的WebSocket操作类，每次建立 WebSocket 连接时，就会初始化一个新的 bean。这是由于 WebSocket 是一种双向的、长时间的通信机制，它需要维护每个连接的状态，处理每个从客户端发来的消息，并根据这些消息生成响应消息发送回客户端。因此，为每个 WebSocket 连接创建一个单独的 bean 是必要的，这样可以让 Spring Boot 为每个连接提供必要的管理和生命周期控制。这种方式也可以使用单例模式实现，后续再更新相关用法。

@Component
@Slf4j
@ServerEndpoint("/api/websocket/{userId}")
public class WebSocket {
    //与某个客户端的连接会话，需要通过它来给客户端发送数据
    private Session session;
    //用户ID
    private String userId;

    //concurrent包的线程安全Set，用来存放每个客户端对应的MyWebSocket对象。
    //虽然@Component默认是单例模式的，但springboot还是会为每个websocket连接初始化一个bean，所以可以用一个静态set保存起来。
    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消息有新的连接，总数为:"+webSockets.size());
        } catch (Exception e) {
            log.error("WebSocket异常-链接失败(onOpen)，原因：" + e.getMessage());
        }
    }

    /**
     * 链接关闭调用的方法
     */
    @OnClose
    public void onClose() {
        try {
            webSockets.remove(this);
            sessionPool.remove(this.userId);
            log.info("WebSocket消息连接断开，总数为:"+webSockets.size());
        } catch (Exception e) {
            log.error("WebSocket异常-链接关闭失败(onClose)，原因：" + e.getMessage());
        }
    }
    /**
     * 收到客户端消息后调用的方法
     *
     * @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());
        log.error("WebSocket异常-错误信息(onError)，原因：" + error.getMessage());
    }


    // 此为广播消息
    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) {
                log.error("WebSocket异常-广播消息异常(sendAllMessage)，原因：" + e.getMessage());
            }
        }
    }

    // 此为单点消息
    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) {
                log.error("WebSocket异常-点对点消息异常(sendOneMessage)，原因：" + e.getMessage());
            }
        }
    }

}
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

2.4、测试类WebSocketController

  这个测试类，主要是为了测试发送信息后，页面可以自动更新。至此，服务端的配置就完成了。

@Controller
@RequestMapping("/api/msg")
public class WebSocketController {

    @Resource
    private WebSocket webSocket;

    @RequestMapping("/all/{msg}") // 将消息发送到/topic/greetings路径下
    public void all(@PathVariable String msg) {
        //创建业务消息信息
        JSONObject obj = new JSONObject();
        obj.put("msg", msg);//消息内容
        //全体发送
        webSocket.sendAllMessage(obj.toJSONString());
    }
    @RequestMapping("/{userId}/{msg}") // 将消息发送到/topic/greetings路径下
    public void sendUser(@PathVariable String userId,@PathVariable String msg) {
        //创建业务消息信息
        JSONObject obj = new JSONObject();
        obj.put("msg", msg);//消息内容
        webSocket.sendOneMessage(userId, obj.toJSONString());
    }

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

3、前端环境搭建

  前端是基于Vue实现，具体代码如下：

<template>
  <div class="order-list">
    <span>TestMsg:{{ message }}span>
  div>
template>
<script>
export default {
    name: 'HomeView',
    data() {
      return {
          message:''
      }
    },
    components: {},
    created() {},
    mounted() {
      //初始化websocket
      this.initWebSocket()
    },
    destroyed: function () { // 离开页面生命周期函数
    	this.websocketclose();
    },
    computed: {},
    methods: {
      initWebSocket: function () { // 建立连接
        var userId = "test"//this.COMMON.getStorage("user");
        //对应@ServerEndpoint("/api/websocket/{userId}")中的地址
        var url = "ws://ip:port/项目名/api/websocket/" + userId;
        this.websock = new WebSocket(url);
        this.websock.onopen = this.websocketonopen;
        this.websock.send = this.websocketsend;
        this.websock.onerror = this.websocketonerror;
        this.websock.onmessage = this.websocketonmessage;
        this.websock.onclose = this.websocketclose;
      },
      // 连接成功后调用
      websocketonopen: function () {
        console.log("WebSocket连接成功");
      },
      // 发生错误时调用
      websocketonerror: function (e) {
        console.log("WebSocket连接发生错误" + JSON.stringify(e));
      },
      // 给后端发消息时调用
      websocketsend: function (e) {
        console.log("WebSocket连接发生错误" + JSON.stringify(e));
      },
// 接收后端消息
      // vue 客户端根据返回的cmd类型处理不同的业务响应
      websocketonmessage: function (e) {
        this.message = data;
      },
      // 关闭连接时调用
      websocketclose: function (e) {
        console.log("connection closed (" + e.code + ")");
      }
    },
  }
script>
<style lang="scss">style>
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

4、测试

  至此，我们就完成了WebSocket的服务端和前端的环境搭建，首先启动后台服务，然后启动前端服务，进入上述页面，这个时候就会建立起来链接，然后访问“http://localhost:8803/qriver-lab/api/msg/test/6666”，其中test对应的是userId，6666是msg信息，这个时候就会发现页面会自动显示6666，不需要进行刷新。