第四章：WebSocket 通信机制全解与客户端发包实录

如果你以为一个游戏启动后只靠本地逻辑运转，那你真是低估了网络通信的存在感。在互动组件项目里，WebSocket 才是真正的灵魂通道——UI 再好看，没包发出去也等于白搭。

本章我们深入讲解 WebSocket 在安卓前端项目中的应用，从封装结构到消息分发，从心跳维持到断线重连，用实际的项目代码完整梳理一遍消息通信流程。

首先是通信初始化部分。项目的 Socket 一般集中封装在 NetManager 中。以下是一个典型实现：

const NetManager = {
    ws: null,
    isConnected: false,
    reconnectTimer: null,
    heartbeatTimer: null,

    connect(url) {
        if (this.ws && this.isConnected) return;

        this.ws = new WebSocket(url);
        this.ws.binaryType = "arraybuffer";

        this.ws.onopen = this._onOpen.bind(this);
        this.ws.onmessage = this._onMessage.bind(this);
        this.ws.onclose = this._onClose.bind(this);
        this.ws.onerror = this._onError.bind(this);
    },

    _onOpen() {
        console.log("连接服务器成功");
        this.isConnected = true;
        this._startHeartbeat();
    },

    _onClose() {
        console.warn("服务器连接断开");
        this.isConnected = false;
        this._reconnect();
    },

    _onError(err) {
        console.error("WebSocket 连接错误", err);
    },

    _onMessage(event) {
        let data = new Uint8Array(event.data);
        ProtocolManager.decodeMessage(data);
    },

    _reconnect() {
        clearTimeout(this.reconnectTimer);
        this.reconnectTimer = setTimeout(() => {
            this.connect("ws://your-server-address");
        }, 3000);
    },

    _startHeartbeat() {
        clearInterval(this.heartbeatTimer);
        this.heartbeatTimer = setInterval(() => {
            this.send(ProtocolManager.encodeHeartbeat());
        }, 5000);
    },

    send(data) {
        if (!this.isConnected) return;
        this.ws.send(data);
    }
};

这段代码具备连接管理、断线重连、心跳保活三大能力。只要初始化时调用 connect 即可自动绑定监听事件。

接下来是协议设计。客户端与服务器之间的通信是基于自定义协议的，通常结构如下：

[消息ID][消息体长度][消息体]

为了更规范，建议封装 ProtocolManager：

const ProtocolManager = {
    encodeMessage(msgId, payload) {
        let body = JSON.stringify(payload);
        let bodyBuffer = new TextEncoder().encode(body);

        let buffer = new Uint8Array(4 + bodyBuffer.length);
        buffer[0] = (msgId >> 8) & 0xFF;
        buffer[1] = msgId & 0xFF;
        buffer[2] = (bodyBuffer.length >> 8) & 0xFF;
        buffer[3] = bodyBuffer.length & 0xFF;

        buffer.set(bodyBuffer, 4);
        return buffer;
    },

    decodeMessage(buffer) {
        let msgId = (buffer[0] << 8) | buffer[1];
        let bodyLen = (buffer[2] << 8) | buffer[3];
        let json = new TextDecoder().decode(buffer.slice(4, 4 + bodyLen));

        let payload = JSON.parse(json);
        MessageDispatcher.dispatch(msgId, payload);
    },

    encodeHeartbeat() {
        return this.encodeMessage(0x0001, {});
    }
};

服务器返回后，前端需要有一个调度系统负责分发：

const MessageDispatcher = {
    listeners: {},

    register(msgId, callback, context) {
        this.listeners[msgId] = { callback, context };
    },

    dispatch(msgId, data) {
        if (!this.listeners[msgId]) {
            console.warn("未处理的消息：", msgId);
            return;
        }
        let { callback, context } = this.listeners[msgId];
        callback.call(context, data);
    }
};

示例注册方式如下：

MessageDispatcher.register(0x1001, this.onHallData, this);

断线重连与心跳机制是必不可少的，尤其在安卓端容易被系统后台挂起或回收，断线重连可以提升稳定性。心跳一般是定时每 5 秒发一个“空包”：

setInterval(() => {
    NetManager.send(ProtocolManager.encodeHeartbeat());
}, 5000);

如果连接断开，NetManager 会触发 reconnect，通过定时器进行重新连接尝试。

下面是一个完整的发包→收包→界面处理流程：

let payload = {
    userId: UserManager.userId
};
NetManager.send(ProtocolManager.encodeMessage(0x1003, payload));

服务器返回包结构如下：

{
    "nickname": "player001",
    "avatar": "icon_12.png",
    "level": 5,
    "gender": 1
}

接收方式如下：

MessageDispatcher.register(0x1004, function (data) {
    UIManager.showUI("UIUserInfo", (ui) => {
        ui.updateUserInfo(data);
    });
}, this);

到这里为止，客户端发包、收包、处理 UI 的整个流程已经完整建立。

总结一下：这一章我们完成了客户端通信模块的封装与调用实践，包括了 WebSocket 的初始化、协议设计、消息派发与重连策略。下一章将进入 Node.js 服务端，看看服务器是如何处理这些消息与房间广播的。