原生JS WebSocket 完整实现 DAX德指实时行情监听

火柴oo

405人浏览 · 2026-07-14 16:11:55

火柴oo · 2026-07-14 16:11:55 发布

一、前言

德国DAX指数（德指）是欧洲核心股指，也是跨境多资产配置、欧美盘联动策略的重要参考标的。在开发前端行情看板、网页盯盘工具、实时指数监控页面时，通过原生JS WebSocket可直接直连行情服务，无需后端中转，实现毫秒级行情推送，彻底解决HTTP轮询延迟高、资源占用大的问题。

本文提供完整可直接嵌入HTML的原生JS代码，包含连接初始化、10秒心跳保活、订阅下发、异常捕获、断线自动重连、页面后台休眠优化全逻辑，同时完整拆解返回JSON结构、股指专属字段特性与前端工程优化方案。

二、通信规范与品种编码对照

1、市场通用简称：DAX 德指（德国法兰克福指数）

2、接口订阅编码：ZY_DAX

3、WebSocket统一长连接地址：ws://39.107.99.235/ws

4、强制心跳规则：客户端每10秒发送一次秒级时间戳心跳包 {"ping": 时间戳}，无心跳会被服务端主动断开连接

5、订阅规则：连接成功后单次下发订阅报文 {"Key":"ZY_DAX"}，无需重复订阅

6、推送机制：仅指数点位、日内涨跌数据变动时推送数据包，无变动静默待机，节省浏览器资源

三、完整原生JS可运行代码（适配所有浏览器）

代码全局封装连接实例与定时器，防止重复创建连接，内置页面后台休眠释放资源、断线自动重连、数据解析异常捕获，可直接嵌入任意HTML页面使用。

// 全局行情连接实例与心跳定时器，防止重复创建
let daxWsInstance = null;
let daxHeartbeatTimer = null;

/**
 * 初始化DAX德指WebSocket实时行情连接
 */
function initDaxQuoteWebSocket() {
    // 销毁已有连接和定时器，避免多重连接冲突
    if (daxWsInstance) {
        daxWsInstance.close();
    }
    if (daxHeartbeatTimer) {
        clearInterval(daxHeartbeatTimer);
    }

    // 初始化长连接
    daxWsInstance = new WebSocket("ws://39.107.99.235/ws");

    // 连接成功回调
    daxWsInstance.onopen = function () {
        console.log("DAX德指行情长连接建立成功，下发订阅指令");
        // 组装订阅报文
        const subscribeMsg = JSON.stringify({
            Key: "ZY_DAX"
        });
        daxWsInstance.send(subscribeMsg);

        // 开启10秒定时心跳保活
        daxHeartbeatTimer = setInterval(() => {
            const timestamp = Math.floor(new Date().getTime() / 1000);
            const pingMsg = JSON.stringify({ ping: timestamp });
            daxWsInstance.send(pingMsg);
        }, 10000);
    };

    // 接收实时行情推送
    daxWsInstance.onmessage = function (event) {
        try {
            const resData = JSON.parse(event.data);
            // 过滤有效行情数据
            if (!resData.body) return;

            const daxQuote = resData.body;
            console.log("======== DAX德指 实时行情更新 ========");
            console.log("品种编码：", daxQuote.StockCode);
            console.log("实时指数点位：", daxQuote.Price);
            console.log("当日开盘点位：", daxQuote.Open);
            console.log("昨日收盘点位：", daxQuote.LastClose);
            console.log("日内最高/最低：", daxQuote.High, "/", daxQuote.Low);
            console.log("涨跌点数：", daxQuote.Diff);
            console.log("涨跌幅：", daxQuote.DiffRate, "%");
            console.log("更新时间：", daxQuote.Time);
            console.log("=======================================\n");
        } catch (error) {
            console.error("德指行情数据解析失败：", error);
        }
    };

    // 连接断开自动重连
    daxWsInstance.onclose = function () {
        console.log("DAX德指行情连接断开，3秒后自动重连");
        clearInterval(daxHeartbeatTimer);
        setTimeout(initDaxQuoteWebSocket, 3000);
    };

    // 捕获通信异常
    daxWsInstance.onerror = function (err) {
        console.error("WebSocket通信异常：", err);
    };
}

// 页面加载完成自动启动行情监听
window.onload = function () {
    initDaxQuoteWebSocket();
};

// 页面切后台自动释放资源，前台激活自动重连，优化浏览器性能
document.addEventListener("visibilitychange", function () {
    if (document.hidden) {
        // 页面隐藏：关闭连接、清空定时器
        if (daxWsInstance) daxWsInstance.close();
        if (daxHeartbeatTimer) clearInterval(daxHeartbeatTimer);
    } else {
        // 页面显示：重新初始化连接
        initDaxQuoteWebSocket();
    }
});

四、服务端返回完整JSON数据结构

股指类品种无五档盘口、无成交量数据，仅返回核心点位与涨跌数据，为行业通用标准结构。

{
    "body": {
        "StockCode": "ZY_DAX",
        "Price": 18268.35,
        "Open": 18210.60,
        "LastClose": 18195.22,
        "High": 18296.41,
        "Low": 18182.75,
        "Time": "2026-07-14 16:02:35",
        "LastTime": 1784092955,
        "BP1": "",
        "BV1": "",
        "SP1": "",
        "SV1": "",
        "TotalVol": "",
        "Diff": 73.13,
        "DiffRate": 0.40
    }
}