- 添加依赖
在pom.xml中加入WebSocket相关依赖：
<dependencies>
<!-- websocket -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>
<!-- websocket -->
</dependencies>
- 创建SocketHandler（我们socket的消息类型有两种：TextMessage 类型用于处理文本帧， BinaryMessage 类型用于处理二进制帧）
创建MyWebSocketHandler处理文本帧
import org.springframework.stereotype.Component;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
@Component
public class MyWebSocketHandler extends TextWebSocketHandler {
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
String payload = message.getPayload();//接收到的消息
System.out.println("Received: " + payload);
session.sendMessage(new TextMessage(payload));
}
}
创建MyBinaryWebSocketHandler处理二进制帧
import org.springframework.stereotype.Component;
import org.springframework.web.socket.BinaryMessage;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.BinaryWebSocketHandler;
import java.nio.ByteBuffer;
@Component
public class MyBinaryWebSocketHandler extends BinaryWebSocketHandler {
@Override
public void handleBinaryMessage(WebSocketSession session, BinaryMessage message) throws Exception {
// 从BinaryMessage中获取二进制数据
ByteBuffer byteBuffer = message.getPayload();
// 这里可以处理接收到的二进制数据
while (byteBuffer.hasRemaining()) {
byte b = byteBuffer.get();
// 处理每一个字节
System.out.println("Received byte: " + b);
}
//发送二进制响应
//session.sendMessage(new BinaryMessage(byteBuffer));
//或发送文本响应
session.sendMessage(new TextMessage("111111"));
}
}
- 创建WebSocketConfig
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {
private final MyWebSocketHandler myWebSocketHandler;
private final MyBinaryWebSocketHandler myBinaryWebSocketHandler;
public WebSocketConfig(MyWebSocketHandler myWebSocketHandler, MyBinaryWebSocketHandler myBinaryWebSocketHandler) {
this.myWebSocketHandler = myWebSocketHandler;
this.myBinaryWebSocketHandler = myBinaryWebSocketHandler;
}
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(myWebSocketHandler, "/TextMessage").setAllowedOrigins("*");//接收/TextMessage结尾的文本消息
registry.addHandler(myBinaryWebSocketHandler, "/BinaryMessage").setAllowedOrigins("*");//接收/BinaryMessage结尾的二进制帧消息
}
}
- 创建前端页面index.html 文件，包含一个简单的 WebSocket 客户端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Demo</title>
</head>
<body>
<h1>WebSocket Demo</h1>
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<br>
<input type="text" id="message" placeholder="Enter message">
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script>
var webSocket;
function connect() {
webSocket = new WebSocket('ws://localhost:8080/TextMessage');
webSocket.onmessage = function(event) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
message.textContent = event.data;
messages.appendChild(message);
};
webSocket.onopen = function(event) {
console.log('Connected to WebSocket');
};
webSocket.onclose = function(event) {
console.log('Disconnected from WebSocket');
};
}
function disconnect() {
if (webSocket) {
webSocket.close();
}
}
function sendMessage() {
var messageInput = document.getElementById('message');
var message = messageInput.value;
webSocket.send(message);
messageInput.value = '';
}
</script>
</body>
</html>
- 运行应用程序
运行 Spring Boot 应用程序，然后浏览器打开 index.html。你应该会看到一个简单的 WebSocket 客户端界面。
点击 “Connect” 按钮连接到 WebSocket 服务器，输入消息并点击 “Send” 按钮发送消息。你应该会在页面上看到服务器返回的 “Echo” 消息。
