- 添加依赖
在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结尾的二进制帧消息
}
}
提供另一种方式:同时接收TextMessage 类型用于处理文本帧, BinaryMessage 类型用于处理二进制帧
创建SocketHandler
package com.game.module.gamemodule.config;
import com.game.module.gamemodule.domain.moneyComing.Content;
import com.game.module.gamemodule.domain.moneyComing.UserAccount;
import com.game.module.gamemodule.utils.UserAccountCacheUtils;
import com.google.gson.Gson;
import org.json.JSONObject;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.BinaryMessage;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import lombok.extern.slf4j.Slf4j;
import java.io.IOException;
import java.nio.ByteBuffer;
import java.text.SimpleDateFormat;
import java.util.Date;
@Component
@Slf4j
public class SocketHandler extends TextWebSocketHandler {
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 连接建立时调用
log.info("WebSocket connection established: " + session.getId());
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
// 连接关闭时调用
log.info("WebSocket connection closed: " + session.getId() + ", Status: " + status);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
// 处理文本消息
log.info("Received text message: " + message.getPayload());
session.sendMessage(new TextMessage(message.getPayload()));
}
@Override
protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) {
// 处理二进制消息
ByteBuffer payload = message.getPayload();
payload.rewind(); // 重置position到0以确保从头开始读取
// 读取指定长度的字节数组
byte[] byteArray = new byte[payload.remaining()];
payload.get(byteArray);
// 或者转换整个ByteBuffer为字节数组
byte[] fullByteArray = payload.array();
StringBuffer stringBuffer = new StringBuffer();
for (byte aByte : fullByteArray) {
stringBuffer.append(aByte + " ,");
}
log.info("Received binary message : {}", stringBuffer.toString());
log.info("Received binary message with length: {}", payload.limit());
try {
session.sendMessage(new TextMessage("111"));
} catch (IOException e) {
throw new RuntimeException(e);
}
}
}
创建WebSocketConfig
package com.game.module.gamemodule.config;
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 SocketHandler socketHandler;
public WebSocketConfig(SocketHandler socketHandler) {
this.socketHandler = socketHandler;
}
@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
registry.addHandler(socketHandler, "/ws").setAllowedOrigins("*");
// 接收/ws结尾的消息
}
}
- 创建前端页面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>
增强版可发文本和二进制
<!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()">SendText</button>
<button onclick="sendBinaryMessage()">SendBinary</button>
<ul id="messages"></ul>
<script>
var webSocket;
function connect() {
webSocket = new WebSocket('ws://localhost:9101/ws');
webSocket.binaryType = 'arraybuffer';
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 sendBinaryMessage() {
var data = new Uint8Array([1, 2, 3, 4, 5]); // 创建一个二进制数组
webSocket.send(data.buffer); // 发送 ArrayBuffer 对象
}
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” 消息。
6.升级版动态路径
每个用户登陆成功后用Token拼在WS路径中
package com.game.module.common.config;
import com.game.module.common.proto.loginData;
import com.game.module.common.proto.serverProto;
import com.google.protobuf.ByteString;
import com.google.protobuf.InvalidProtocolBufferException;
import lombok.extern.slf4j.Slf4j;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.BinaryMessage;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;
import java.io.IOException;
import java.net.URI;
import java.nio.ByteBuffer;
import java.util.Map;
import java.util.concurrent.ConcurrentHashMap;
@Component
@Slf4j
public class SocketHandler extends TextWebSocketHandler {
private final Map<String, WebSocketSession> sessions = new ConcurrentHashMap<>();
private String getTokenFromSession(WebSocketSession session) {
// 从WebSocketSession中获取用户token
return session.getUri().getPath().split("/")[3]; // 路径格式为 /xx/xxx/{token}
}
@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
// 连接建立时调用
log.info("WebSocket connection established: {}", session.getId());
URI uri = session.getUri();
String path = uri.getPath();
log.info("WebSocket 已连接 path: {}", path);
// 获取查询参数
String query = uri.getQuery();
if (query != null) {
String[] params = query.split("&");
for (String param : params) {
String[] keyValue = param.split("=");
if (keyValue.length == 2) {
log.info("{}: {}", keyValue[0], keyValue[1]);
}
}
}
//获取用户token
String token = getTokenFromSession(session);
log.info("WebSocket 已连接 token: {}", token);
//如果token失效,则移除用户
// if (isValidToken) {
// session.close();
// return;
// }
sessions.put(token, session);
}
@Override
public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {
// 连接关闭时调用
URI uri = session.getUri();
String path = uri.getPath();
log.info("WebSocket 断开连接 path: {}", path);
log.info("WebSocket connection closed: {}", session.getId() + ", Status: " + status);
// 断开连接时移除用户的WebSocketSession
String userId = getTokenFromSession(session);
sessions.remove(userId);
}
@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
log.info("Received text message: " + message.getPayload());
// 处理文本消息
session.sendMessage(new TextMessage("111111"));
}
@Override
protected void handleBinaryMessage(WebSocketSession session, BinaryMessage message) {
//打印消息
try {
printBinaryMessage(message);
} catch (InvalidProtocolBufferException e) {
throw new RuntimeException(e);
}
try {
serverProto.Command.Builder command = serverProto.Command.newBuilder();
command.setType(50);
session.sendMessage(new BinaryMessage(command.build().toByteArray()));
} catch (IOException e) {
throw new RuntimeException(e);
}
}
private void printBinaryMessage(BinaryMessage message) throws InvalidProtocolBufferException {
// 处理二进制消息
ByteBuffer payload = message.getPayload();
payload.rewind(); // 重置position到0以确保从头开始读取
// 读取指定长度的字节数组
byte[] byteArray = new byte[payload.remaining()];
payload.get(byteArray);
// 或者转换整个ByteBuffer为字节数组
byte[] fullByteArray = payload.array();
StringBuffer stringBuffer = new StringBuffer();
for (byte aByte : fullByteArray) {
stringBuffer.append(aByte + " ,");
}
serverProto.Command command = serverProto.Command.parseFrom(fullByteArray);
log.info("command : {}", command.toString());
ByteString data = command.getData();
loginData.LoginDataAck loginDataAck = loginData.LoginDataAck.parseFrom(data);
log.info("loginDataAck : {}", loginDataAck.toString());
log.info("Received binary message : {}", stringBuffer.toString());
log.info("Received binary message with length: {}", payload.limit());
}
// private String buildUserAccount() {
// //session.sendMessage(new TextMessage("{\"error\":0,\"message\":\"{\\\"cmdType\\\":9,\\\"content\\\":{\\\"Errcode\\\":0,\\\"Message\\\":\\\"\\\",\\\"Time\\\":\\\"2024-07-30T10:05:56.859130816+07:00\\\",\\\"Balance\\\":199833,\\\"CurrencyNumber\\\":6,\\\"AccountID\\\":0}}\"}"));
// JSONObject transformedObject = new JSONObject();
// transformedObject.put("error", 0);
// UserAccount userAccount = UserAccountCacheUtils.getCacheValue("monkey");
// if (userAccount == null) {
// userAccount = new UserAccount();
// userAccount.setCmdType(9);
// Content content = new Content();
// SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSSSSSZZZ");
// String format = sdf.format(new Date());
// content.setTime("2024-07-30T10:05:56.859130816+07:00");
// content.setAccountID(0);
// content.setMessage("");
// content.setCurrencyNumber(6);
// content.setBalance(200000.0);
// content.setErrcode(0);
// userAccount.setContent(content);
// UserAccountCacheUtils.setCacheValue("monkey", userAccount);
// }
// Gson gson = new Gson();
// String json = gson.toJson(userAccount);
// transformedObject.put("message", json.toString());
// return transformedObject.toString();
// }
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Demo</title>
</head>
<body>
<h1>WebSocket Demo</h1>
<input type="text" id="token" placeholder="Enter token">
<button onclick="connect()">Connect</button>
<button onclick="disconnect()">Disconnect</button>
<br>
<br>
<input type="text" id="message" placeholder="Enter message">
<button onclick="sendMessage()">SendText(发送文本消息)</button>
<button onclick="sendBinaryMessage()">SendBinary(发送二进制消息)</button>
<ul id="messages"></ul>
<script>
var webSocket;
function connect() {
var token = document.getElementById('token').value;
webSocket = new WebSocket('ws://localhost:9102/avitor/ws/' + token + '?r=123');
webSocket.binaryType = 'arraybuffer';
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 sendBinaryMessage() {
var data = new Uint8Array([18, 66, 26, 58, 8, 146, 140, 229, 151, 4, 18, 12, 98, 50, 100, 54, 52, 101, 118, 55, 100, 106, 105, 106, 34, 36, 8, 6, 17, 123, 20, 174, 71, 33, 217, 194, 64, 25, 0, 0, 0, 0, 0, 0, 240, 63, 33, 133, 235, 81, 184, 30, 133, 219, 63, 42, 3, 226, 130, 185, 48, 4, 58, 4, 8, 1, 18, 0]); // 创建一个二进制数组
webSocket.send(data.buffer); // 发送 ArrayBuffer 对象
}
function sendMessage() {
var messageInput = document.getElementById('message');
var message = messageInput.value;
webSocket.send(message);
messageInput.value = '';
}
function SendToken() {
var tokenInput = document.getElementById('token');
var token = tokenInput.value;
// 发送 HTTP 请求
var url = "http://localhost:9102/setTokenSocket?token=" + token;
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
alert('Token sent successfully')
})
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
}
</script>
</body>
</html>