• 数据分析
• 游戏开发

demoparser 是一个用 Rust 编写的 Counter-Strike 2 回放（.dem）解析工具，其官方 WASM 版本demoparser2让 CS2 回放解析直接跑在浏览器里——无需服务器、无需 Node 环境，前端把演示文件交给它，就能像查询数据库一样取回击杀事件、玩家坐标、回合状态等结构化数据。本文带你 5 分钟完成 demoparser WASM 前端集成。

为什么要在浏览器里解析 CS2 回放

传统的 CS2 回放解析方案（Python、Node.js 版本）都需要在服务器上运行。而 demoparser 的 WASM 版本把整个 Rust 解析核心编译成了 WebAssembly 模块，带来三个直接好处：

• 零后端：前端页面直接解析，省去"上传文件 → 服务器解析 → 返回结果"的链路
• 隐私友好：.dem 文件无需离开用户浏览器
• 即装即用：npm 一条命令安装，npm i demoparser2

WASM 包的核心产物位于 src/wasm/www/pkg/，包含三个文件：

核心 API：7 个函数速查

与 Python / Node 版本最大的区别：WASM 版本接收的是Uint8Array（文件字节）而不是文件路径，所有函数定义可参考 src/wasm/src/lib.rs。

以parseEvent为例，其签名为：

parseEvent(file, event_name, wanted_player_props, wanted_other_props)

第 3、4 个参数是"扩展列"：wanted_player_props从事件关联的玩家身上取值（如X、Y坐标），wanted_other_props取游戏状态值（如total_rounds_played）。详细参数说明见 documentation/js/README.md。

最快上手：4 步在网页中解析回放

项目自带一个完整的浏览器 demo：src/wasm/www/index.html，核心逻辑不到 40 行。

第 1 步：安装并引入 WASM 包

import init, { parseEvents, parseHeader, listGameEvents } from './pkg/demoparser2.js'; await init();

第 2 步：用 FileReader 把选中的 .dem 文件读成字节数组

const reader = new FileReader(); reader.onload = function (event) { const uint8Array = new Uint8Array(event.target.result); // 开始解析…… }; reader.readAsArrayBuffer(this.files[0]);

第 3 步：调用解析函数

let result = parseEvents( uint8Array, ["player_death", "player_footstep"], // 要查询的事件 [], // 玩家扩展属性 ["total_rounds_played", "is_warmup_period"] // 游戏状态扩展属性 );

第 4 步：把结果渲染到页面

返回的是普通 JS 对象数组，可直接生成表格展示，demo 中提供了generateTableFromData函数，可筛选出attacker_name、user_name、weapon、tick等列渲染成 HTML 表格。

实战技巧

1. 快速识别回放文件：先用 parseHeader

不想跑完整解析时，parseHeader只读文件头，速度最快，可拿到map_name、server_name等字段：

let header = parseHeader(uint8Array); console.log(header.map_name); // 例如 "de_overpass"

2. 为事件补充坐标：extra 参数的正确用法

bomb_planted（下包）事件默认只有site、tick、user_name等少量字段。想定位"包具体下在哪里"，加上玩家属性即可，输出会多出user_X、user_Y两列：

parseEvent(uint8Array, "bomb_planted", ["X", "Y"], ["total_rounds_played"]);

3. 解析全量 tick 时开启 SoA 模式提速 2~3 倍

parseTicks的最后一个参数structOfArrays设为true时，输出从"对象数组"变为"按列存储"的数组（每列一个数组，同一索引对应同一条记录），在解析整个回放的所有 tick 时可提速 2~3 倍：

let ticks = parseTicks(uint8Array, ["X", "Y"], null, null, true);

4. 性能注意：WASM 版本是单线程模式

浏览器环境无法像 Node / Python 版本那样多线程解析，WASM 绑定内部固定使用ForceSingleThreaded模式（见 src/wasm/src/lib.rs）。处理几百 MB 的大文件时建议：

• 只查询必要的事件和字段，避免"全量拉取"
• parseGrenades第二个参数可关闭非投掷物 grenade，显著降低内存与耗时
• 参考 examples/efficiently_parse_multi_events_and_ticks/index.js 的多次解析复用思路

相关参考资料

• 官方浏览器 demo 页面：src/wasm/www/index.html
• WASM 函数绑定源码：src/wasm/src/lib.rs
• JS API 完整签名与输出示例：documentation/js/README.md
• 更多解析案例（击杀统计、区域 KDA、炸弹点位等）：examples/
• 支持的全部字段清单（玩家、武器、游戏状态）：README.md

掌握以上内容，你就已经可以在任意前端项目中集成 demoparser，让浏览器直接变成一台 CS2 回放分析机。

• 数据分析
• 游戏开发