WebSocket实现地理天气预警需前后端协同：前端用geolocation获取位置并建立wss连接，发送坐标注册；后端关联连接与地理围栏，接入气象API匹配推送；前端用Notification和卡片展示去重预警。
要在HTML5中用WebSocket实现基于地理位置的实时天气预警推送，核心是“前端获取位置 + 建立长连接 + 后端按地理围栏/坐标主动推送”。纯前端无法完成预警逻辑和数据源接入，必须配合后端服务。下面分关键环节说明：
1. 前端获取用户实时地理位置
使用navigator.geolocation获取经纬度，注意需在HTTPS环境下运行（本地localhost也允许）：
- 调用
getCurrentPosition()获取一次定位，或watchPosition()持续监听位置变化（适合移动场景） - 建议加超时、高精度（
{enableHighAccuracy: true, timeout: 10000}）和错误处理（如用户拒绝授权、定位失败） - 获取成功后，立即将
latitude和longitude通过WebSocket发给服务端，用于绑定该连接与地理区域
2. 建立并维护WebSocket连接
使用WebSocket API连接后端预警服务（如wss://weather.example.com/ws）：
- 连接建立后，立即发送含位置信息的认证/注册消息，例如：
{"type":"register","lat":39.9042,"lng":116.4074,"city":"Beijing"} - 监听
onmessage，解析后端推送的预警消息（如台风路径进入50km范围、暴雨红色预警） - 监听
onclose和onerror，实现自动重连（带退避策略，如1s→3s→10s） - 避免页面卸载时连接残留：在
beforeunload中调用websocket.close()
3. 后端需支持地理动态订阅与事件触发
WebSocket服务端（如Node.js + ws库，或Java Spring WebSocket）必须具备：
立即学习“前端免费学习笔记（深入）”；
- 将客户端连接与地理坐标/行政区域（如区县编码）关联存储（可用内存Map或Redis GEO）
- 接入气象API（如中国气象局、OpenWeatherMap、或自建预报模型），定时拉取/接收预警数据
- 对每条新预警（如“北京市朝阳区未来2小时雷电预警”），计算其影响范围（圆形半径或GeoJSON多边形），匹配当前所有在线且位于该范围内的客户端连接
- 向匹配连接精准推送结构化消息，例如：
{"alert_id":"CMA20240521001","level":"red","area":"朝阳区","text":"预计14:00-16:00有强雷电，请勿户外逗留","expires":"2024-05-21T16:00:00Z"}
4. 前端渲染与交互提醒
收到预警消息后，不只弹窗，还要兼顾体验与实用性：
- 用
Notification API发起系统级通知（需用户授权），即使浏览器后台也能提醒 - 在页面显眼位置（如右上角）显示可关闭的卡片式预警条，包含等级图标（红/橙/黄）、倒计时、详情链接
- 点击预警可跳转到气象局详情页，或展开本地雷达图、分钟级降水预测（需额外加载）
- 为防消息刷屏，对同一预警ID做去重，相同内容5分钟内不重复展示
整个流程依赖前后端协同：前端负责定位、连接、展示；后端负责地理匹配、预警判定、精准投递。没有第三方地理围栏服务或实时气象数据源，仅靠WebSocket本身无法生成预警——它只是高速通道，不是预警引擎。
