HTML5网页端基于地理位置实时下发优惠券的核心是：用Geolocation API获取用户位置，通过WebSocket与后端长连接，后端依位置匹配附近优惠券并主动推送，全程无轮询。
要在HTML5网页端基于地理位置实时下发优惠券，核心是：用 Geolocation API 获取用户位置，通过 WebSocket 与后端保持长连接，后端根据位置匹配附近优惠券并主动推送。整个过程不依赖轮询，真正实现实时性。
1. 前端获取用户地理位置
浏览器需在安全上下文（HTTPS 或 localhost）中调用 navigator.geolocation。注意处理权限拒绝、定位失败等常见情况：
- 使用
getCurrentPosition()获取一次精准坐标（经度/纬度），比持续监听更轻量，适合优惠券触发场景 - 设置合理超时（如 5000ms）和最大缓存时间（
maximumAge: 60000），避免旧位置误判 - 若获取成功，立即将坐标通过 WebSocket 发送给服务端，例如：
ws.send(JSON.stringify({type: 'location', lat: 39.9042, lng: 116.4074}))
2. 建立并维护 WebSocket 连接
连接需健壮，不能“发完就断”：
- 使用
new WebSocket('wss://your-api.com/ws')（生产环境必须用wss） - 监听
onopen后立即发送身份或初始化消息；监听onerror和onclose，异常时自动重连（建议带退避策略，如 1s → 2s → 4s） - 避免页面隐藏（
visibilitychange）时断连，可暂停非关键消息，但保持连接活跃（如定时发 ping）
3. 后端匹配并主动推送优惠券
WebSocket 服务端（如 Node.js + ws 库、Java + Spring WebFlux、Python + websockets）需做三件事：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 将用户连接与地理位置绑定（例如用 Map 存储
connection → {lat, lng, timestamp}） - 当新优惠券上架或用户位置更新时，查询“附近 N 公里内未领取的可用券”（可用 Redis Geo 或 PostGIS 实现高效范围查询）
- 筛选出匹配项后，直接调用对应连接的
send()推送结构化数据，例如：{"type":"coupon","id":"cpn_abc123","title":"咖啡立减10元","radius":500,"expiresAt":"2025-04-10T23:59:59Z"}
4. 前端接收并展示优惠券
收到消息后，前端应平滑呈现，而非简单弹窗打扰用户：
- 监听
ws.onmessage，解析 JSON，校验type === 'coupon'及必要字段 - 检查是否已展示过该券 ID（用 Set 缓存），避免重复推送
- 结合地图（如 Leaflet 或高德 JS API）在对应位置打点，并在右下角以 toast 形式提示：“附近500米有1张新券”，点击展开详情
- 优惠券附带时效和地理围栏信息，前端可定期（如每30秒）用
watchPosition校验是否仍在有效范围内，过期则自动隐藏
不复杂但容易忽略：地理位置精度受设备、网络、系统设置影响较大，建议后端匹配时预留 200–500 米容差；同时优惠券推送需加业务去重和频控（如同一用户 10 分钟内最多推 2 张），防止骚扰。
