websocket使用，spring boot + vite + vue3

Websocket是什么
WebSocket 服务端
- 构建websocket 服务
- 实现处理器
- pom文件
客户端
仓库地址

Websocket是什么

WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455，后由 RFC 7936 补充规范。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

WebSocket 服务端

使用 spring boot ，添加坐标。

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

构建websocket 服务

SpringSocketController 是 websocket 处理类
addHandler 是指定处理器、路径
setAllowedOrigins 是设置允许的跨域请求源

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {registry.addHandler(webSocketHandler(), "/websocket").setAllowedOrigins("*"); }@Beanpublic WebSocketHandler webSocketHandler() {return new SpringSocketController();}
}

实现处理器

SpringSocketController.java 内容如下！


public class SpringSocketController implements WebSocketHandler {// 用于存储所有连接的sessionprivate List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();// 建立连接后@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");sessions.add(session);}// 收到消息后@Overridepublic void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception {System.out.println("收到消息：" + message.getPayload());System.out.println(session);// 判断消息类型if (message.getPayloadLength() > 0) {// 发送消息给所有连接的客户端System.out.println(sessions.size());for (WebSocketSession s : sessions) {if (s.isOpen()){s.sendMessage(new TextMessage("服务器收到消息：" + message.getPayload()));}}}}// 传输错误后@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("传输错误: " + exception.getMessage());}// 关闭连接后@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {System.out.println("连接关闭");session.close();}// 是否支持部分消息@Overridepublic boolean supportsPartialMessages() {return false;}
}

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>3.3.0</version><relativePath/> <!-- lookup parent from repository --></parent><groupId>com.example</groupId><artifactId>practiceJava</artifactId><version>0.0.1-SNAPSHOT</version><name>practiceJava</name><description>practiceJava</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

客户端

客户端使用的是 vite、 vue3

<template><div>websocket</div><el-button @click="send">send</el-button>
</template>
<script setup>  
const ws = new WebSocket('ws://localhost:8080/websocket');
ws.binaryType = "arraybuffer";
ws.onopen = function () {console.log('WebSocket连接已打开');
};
ws.onmessage = function (event) {console.log('收到消息：', event.data);
};
ws.onclose = function () {console.log('WebSocket连接已关闭');
};
ws.onerror = function (error) {console.log('WebSocket发生错误：', error);
};
// ws.send('Hello, WebSocket!');const send = () => {ws.send('Hello, WebSocket!');
}</script>