JS如何实现基于websocket的多端桥接平台

ws.open(serverId)
    .then(() => {
        // PC 端成功建立连接后

        setStatus("linked"); // 更新页面的状态
        // 生成二维码
        qrcode(`/tools/index.html#/newslist?serverId=${serverId}`).then(url => {
            setCodeUrl(url);
        });
    })
    .catch(e => {
        // 建立连接失败
        console.error(e);
        Modal.error({ title: "当前服务器出现问题啦，正在抢修中" });
        setStatus("unlink");
    });

// 断开连接时
ws.onclose(() => {
    timer = setTimeout(() => {
        setStatus("unlink");
        setCodeUrl("");
    }, 500);

    reconnectNum--;
    // 限制重连的次数
    if (reconnectNum >= 0) {
        _open(); // 尝试重新连接
    }
});

ws.open(serverId).then(() => {
    // PC 端成功建立连接后
    +reconnectNum = 3;
    +timer && clearTimeout(timer);

    setStatus("linked"); // 更新页面的状态
    // 生成二维码
    qrcode(`/tools/index.html#/newslist?serverId=${serverId}`).then(url => {
        setCodeUrl(url);
    });
});

// 持续监测客户端的连接状态
// 若已断开连接，则将客户端清除
let aliveClients = new Map();
let lastAliveLength = new Map();
setInterval(() => {
    let clients = {};
    wss.clients.forEach(function each(ws) {
        if (ws.isAlive === false) {
            return ws.terminate();
        }
        const serverId = ws.serverId;
        if (clients[serverId]) {
            clients[serverId].push(ws);
        } else {
            clients[serverId] = [ws];
        }

        ws.isAlive = false;
        ws.ping(() => {});
    });
    for (let serverId in clients) {
        aliveClients.set(serverId, clients[serverId]);
        const length = clients[serverId].length;

        // 若当前serverId连接的设备数量发生变化，则发送消息
        if (length !== lastAliveLength.get(serverId)) {
            // 想当前所有serverId的设备发送消息
            sendAll("devices", clients[serverId], serverId);

            // 存储上次当前serverId的连接数
            lastAliveLength.set(serverId, length);
        }
    }

    const size = wss.clients.size;

    console.log("connection num: ", size, new Date().toTimeString());
}, 2000);

const params = {
    type: "post", // 类型
    msg: {
        // 参数
        url: "https://api.prize.qq.com/v1/newsapp/answer/share/oneQ?qID=506336"
    }
};

// 请求的方法
const post = url => {
    if (window.TencentNews && window.TencentNews.post) {
        window.TencentNews.post(url, {}, window[id], { loginType: "qqorweixin" }, {});
    } else if (window.TencentNews && window.TencentNews.postData) {
        window.TencentNews.postData(url, '{"a":"b"}', id, "requestErrorCallback");
    }
};

// 移动端向服务端发起的数据
ws.send({
    type: "postCb", // 执行的结果
    msg: {
        method: "post",
        result,
        cookie: document.cookie,
        appInfo
    }
});

// 直接调用
window.TencentNews.login("qqorweixin", isLogined => console.log(isLogined));

// invoke方式调用
window.TencentNews.invoke("login", "qqorweixin", isLogined => console.log(isLogined));

ws.send({
    type: "call",
    msg: {
        method: method,
        params: slice.call(arguments)
    }
});

const handleNewsApi = async (msg: any): Promise<any> => {
    await tencentReady();

    const { method, params } = msg;
    return new Promise(resolve => {
        window.TencentNews.invoke(method, ...params, (result: any) => {
            resolve({ method, result });
        });
    });
};