springBoot快速搭建WebSocket

  1. 添加依赖
    在pom.xml中加入WebSocket相关依赖:
<dependencies>
      <!-- websocket -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
        <!-- websocket -->
</dependencies>

  1. 创建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"));
    }
}
  1. 创建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结尾的消息
    }
}
  1. 创建前端页面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>
  1. 运行应用程序
    运行 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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值