websocket使用,spring boot + vite + vue3
- Websocket是什么
- [WebSocket 服务端](#WebSocket 服务端)
- 客户端
- 仓库地址
Websocket是什么
WebSocket 是一种网络传输协议,可在单个 TCP 连接上进行全双工通信,位于 OSI 模型的应用层。WebSocket 协议在 2011 年由 IETF 标准化为 RFC 6455,后由 RFC 7936 补充规范。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就可以创建持久性的连接,并进行双向数据传输。
WebSocket 服务端
使用 spring boot , 添加坐标。
xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
构建websocket 服务
- SpringSocketController 是 websocket 处理类
- addHandler 是指定处理器、路径
- setAllowedOrigins 是设置允许的跨域请求源
java
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(webSocketHandler(), "/websocket").setAllowedOrigins("*");
}
@Bean
public WebSocketHandler webSocketHandler() {
return new SpringSocketController();
}
}
实现处理器
SpringSocketController.java 内容如下!
java
public class SpringSocketController implements WebSocketHandler {
// 用于存储所有连接的session
private List<WebSocketSession> sessions = new CopyOnWriteArrayList<>();
// 建立连接后
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
System.out.println("连接成功");
sessions.add(session);
}
// 收到消息后
@Override
public 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()));
}
}
}
}
// 传输错误后
@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
System.out.println("传输错误: " + exception.getMessage());
}
// 关闭连接后
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception {
System.out.println("连接关闭");
session.close();
}
// 是否支持部分消息
@Override
public boolean supportsPartialMessages() {
return false;
}
}
pom文件
xml
<?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
js
<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>