Java后端与JavaScript前端WebSocket连接问题求助

看起来你已经通过HTTP Hijack拿到了双向长连接，但问题在于这只是底层的连接通道，并没有实现WebSocket协议规范，所以前端的WebSocket对象无法识别这个连接，自然达不到你想要的双向通信效果。下面给你两种可行的解决方案，从手动适配到用现成框架，你可以根据自己的场景选择：

方案一：在现有HttpHijack基础上实现WebSocket协议 #

如果一定要基于你现有的Hijack代码改造，核心是完成两步：WebSocket握手和数据帧编解码。

1. 处理WebSocket握手

前端发起WebSocket连接时，会发送一个带Upgrade: websocket头的HTTP请求，你需要返回符合规范的响应：

• 从请求头中获取Sec-WebSocket-Key
• 把这个Key和固定字符串258EAFA5-E914-47DA-95CA-C5AB0DC85B11拼接，计算SHA-1哈希后再做Base64编码，得到Sec-WebSocket-Accept的值
• 返回HTTP 101响应，包含Upgrade: websocket、Connection: Upgrade、Sec-WebSocket-Accept: [计算出的值]这些头

Java代码示例（简化版）：

String key = request.getHeader("Sec-WebSocket-Key");
String acceptKey = Base64.getEncoder().encodeToString(
    MessageDigest.getInstance("SHA-1").digest(
        (key + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11").getBytes()
    )
);

// 构造101响应
response.setStatus(101);
response.setHeader("Upgrade", "websocket");
response.setHeader("Connection", "Upgrade");
response.setHeader("Sec-WebSocket-Accept", acceptKey);

// 之后通过Hijack拿到的Socket进行通信
Socket socket = response.getHttpChannel().getSocket();
InputStream in = socket.getInputStream();
OutputStream out = socket.getOutputStream();

2. 处理WebSocket数据帧

WebSocket的消息不是直接明文传输的，而是封装成帧的格式，你需要实现：

• 前端发送的帧：需要解码（处理掩码、解析帧类型和 payload）
• 后端发送的帧：需要编码（添加帧头、后端发前端无需掩码）

这里给一个简单的文本帧解码/编码示例：

// 解码前端发来的文本帧（简化版，仅处理单帧文本）
byte[] buffer = new byte[1024];
int read = in.read(buffer);
boolean fin = (buffer[0] & 0x80) != 0;
byte opcode = (byte) (buffer[0] & 0x0F);
boolean masked = (buffer[1] & 0x80) != 0;
int payloadLength = buffer[1] & 0x7F;

byte[] mask = new byte[4];
System.arraycopy(buffer, 2, mask, 0, 4);
byte[] payload = new byte[payloadLength];
System.arraycopy(buffer, 6, payload, 0, payloadLength);

// 应用掩码
for (int i = 0; i < payloadLength; i++) {
    payload[i] = (byte) (payload[i] ^ mask[i % 4]);
}
String message = new String(payload, StandardCharsets.UTF_8);
System.out.println("Received: " + message);

// 编码并发送文本帧到前端
String responseMsg = "Hello from backend!";
byte[] payloadBytes = responseMsg.getBytes(StandardCharsets.UTF_8);
int len = payloadBytes.length;

ByteArrayOutputStream frame = new ByteArrayOutputStream();
frame.write(0x81); // FIN + Text opcode

if (len < 126) {
    frame.write(len);
} else if (len <= 0xFFFF) {
    frame.write(126);
    frame.write((len >> 8) & 0xFF);
    frame.write(len & 0xFF);
} else {
    // 处理大帧，这里省略
}

frame.write(payloadBytes);
out.write(frame.toByteArray());
out.flush();

方案二：直接用Java原生WebSocket API（JSR 356） #

手动实现协议容易出错，推荐直接用Java EE提供的WebSocket标准API，不用关心底层Hijack和协议细节：

1. 后端ServerEndpoint

import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.concurrent.CopyOnWriteArrayList;

@ServerEndpoint("/ws/terminal")
public class TerminalWebSocket {
    // 保存所有连接的会话
    private static CopyOnWriteArrayList<Session> sessions = new CopyOnWriteArrayList<>();

    @OnOpen
    public void onOpen(Session session) {
        sessions.add(session);
        System.out.println("New connection: " + session.getId());
        // 启动终端输入监听
        new Thread(() -> {
            BufferedReader console = new BufferedReader(new InputStreamReader(System.in));
            String line;
            try {
                while ((line = console.readLine()) != null) {
                    // 发送到所有连接的前端
                    for (Session s : sessions) {
                        if (s.isOpen()) {
                            s.getBasicRemote().sendText("Terminal command: " + line);
                        }
                    }
                }
            } catch (IOException e) {
                e.printStackTrace();
            }
        }).start();
    }

    @OnMessage
    public void onMessage(String message, Session session) throws IOException {
        System.out.println("Received from frontend: " + message);
        session.getBasicRemote().sendText("Received your message: " + message);
    }

    @OnClose
    public void onClose(Session session) {
        sessions.remove(session);
        System.out.println("Connection closed: " + session.getId());
    }
}

2. 前端JavaScript代码

const ws = new WebSocket('ws://localhost:8080/your-app-context/ws/terminal');

ws.onopen = function() {
    console.log('WebSocket connected');
    ws.send('Hello from frontend!');
};

ws.onmessage = function(event) {
    console.log('Received from backend:', event.data);
    // 可以把消息显示在页面上
    document.getElementById('message-area').innerText += event.data + '\n';
};

ws.onclose = function() {
    console.log('WebSocket disconnected');
};

为什么原来的HttpHijack不行？ #

你之前的代码只是劫持了HTTP连接，拿到了双向的Socket，但前端的WebSocket对象要求连接必须遵循RFC 6455规范：包括特定的握手响应、数据帧格式等。如果不满足这些要求，前端的WebSocket会在握手后立刻断开，或者无法解析收到的数据。

总结 #

如果只是快速实现功能，优先选择方案二（原生WebSocket API）或者Spring WebSocket这类框架，避免手动处理协议的繁琐和潜在bug。如果必须基于现有Hijack代码改造，就需要完整实现WebSocket的握手和帧处理逻辑。

内容的提问来源于stack exchange，提问作者user9637175