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

1、WebSocket简介

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

2、服务端环境搭建

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

2.1、maven依赖

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

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*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

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;//用户IDprivate 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>();/*** 链接成功调用的方法*/@OnOpenpublic 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());}}/*** 链接关闭调用的方法*/@OnClosepublic 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*/@OnMessagepublic void onMessage(String message) {log.info("WebSocket消息收到客户端消息:"+message);}/** 发送错误时的处理* @param session* @param error*/@OnErrorpublic 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());}}}}

2.4、测试类WebSocketController

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

@Controller
@RequestMapping("/api/msg")
public class WebSocketController {@Resourceprivate 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());}}

3、前端环境搭建

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

<template><div class="order-list"><span>TestMsg:{{ message }}</span></div>
</template>
<script>
export default {name: 'HomeView',data() {return {message:''}},components: {},created() {},mounted() {//初始化websocketthis.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>

4、测试

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