登山節微信實現思路簡述｜實現定位和數據處理

去年 10 月份左右，學校組織活動需要，要求 7 天內實現一個登山節打卡用微信網頁，包含定位打卡，排行榜，抽獎等等功能，其實當時一週內我就已經完成並迭代至穩定，~~但是當時這個博客還沒有重構完故沒有記錄~~，如今新一期的活動準備開始，新功能和管理面板的開發需求也已經接近完成。但還沒完成 ~~（硬控了我好久）~~，分享一下核心功能的實現思路。

定位區域和有效範圍實現#

首先最重要的功能就是確定打卡範圍，我的想法是最低成本實現且對精度沒有高要求，就確認一個中心點，然後用得到的坐標和這個坐標計算距離，小於要求距離即可，實現大概是這樣：

private boolean isWithinCheckinRange(BigDecimal latitude, BigDecimal longitude, int type) {
        // 這裡從 checkpoint 表中獲取簽到點的經緯度
        CheckPoint checkPoint = checkPointService.getById(type);

        BigDecimal checkinLatitude = checkPoint.getLatitude();
        BigDecimal checkinLongitude = checkPoint.getLongitude();

        // 計算提供的坐標和簽到點之間的距離
        double distance = calculateDistance(latitude, longitude, checkinLatitude, checkinLongitude);

        // 檢查距離是否在 50 米以內
        return distance <= 50;
    }

    private double calculateDistance(BigDecimal lat1, BigDecimal lon1, BigDecimal lat2, BigDecimal lon2) {
        final int R = 6371000; // 地球半徑，單位為米

        double latDistance = Math.toRadians(lat2.subtract(lat1).doubleValue());
        double lonDistance = Math.toRadians(lon2.subtract(lon1).doubleValue());

        double a = Math.sin(latDistance / 2) * Math.sin(latDistance / 2)
                + Math.cos(Math.toRadians(lat1.doubleValue())) * Math.cos(Math.toRadians(lat2.doubleValue()))
                * Math.sin(lonDistance / 2) * Math.sin(lonDistance / 2);

        double c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));

        return R * c; // 距離，單位為米
    }

問題來了，國內為了隱私考慮，採用了 gcj02 坐標體系，而只有通用的 wgs84 坐標才能進行計算得到距離，好在這方面已有很多現成開源的算法實現，我們可以這樣：

const a = 6378245.0;
const ee = 0.00669342162296594323;

function outOfChina(lng: number, lat: number): boolean {
    return (lng < 72.004 || lng > 137.8347 || lat < 0.8293 || lat > 55.8271);
}

function transformLat(x: number, y: number): number {
    let ret = -100.0 + 2.0 * x + 3.0 * y + 0.2 * y * y + 0.1 * x * y + 0.2 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(y * Math.PI) + 40.0 * Math.sin(y / 3.0 * Math.PI)) * 2.0 / 3.0;
    ret += (160.0 * Math.sin(y / 12.0 * Math.PI) + 320 * Math.sin(y * Math.PI / 30.0)) * 2.0 / 3.0;
    return ret;
}

function transformLng(x: number, y: number): number {
    let ret = 300.0 + x + 2.0 * y + 0.1 * x * x + 0.1 * x * y + 0.1 * Math.sqrt(Math.abs(x));
    ret += (20.0 * Math.sin(6.0 * x * Math.PI) + 20.0 * Math.sin(2.0 * x * Math.PI)) * 2.0 / 3.0;
    ret += (20.0 * Math.sin(x * Math.PI) + 40.0 * Math.sin(x / 3.0 * Math.PI)) * 2.0 / 3.0;
    ret += (150.0 * Math.sin(x / 12.0 * Math.PI) + 300.0 * Math.sin(x / 30.0 * Math.PI)) * 2.0 / 3.0;
    return ret;
}

export function wgs84ToGcj02(lng: number, lat: number): [number, number] {
    if (outOfChina(lng, lat)) {
        return [lng, lat];
    }
    let dLat = transformLat(lng - 105.0, lat - 35.0);
    let dLng = transformLng(lng - 105.0, lat - 35.0);
    const radLat = lat / 180.0 * Math.PI;
    let magic = Math.sin(radLat);
    magic = 1 - ee * magic * magic;
    const sqrtMagic = Math.sqrt(magic);
    dLat = (dLat * 180.0) / ((a * (1 - ee)) / (magic * sqrtMagic) * Math.PI);
    dLng = (dLng * 180.0) / (a / sqrtMagic * Math.cos(radLat) * Math.PI);
    const mgLat = lat + dLat;
    const mgLng = lng + dLng;
    return [mgLng, mgLat];
}

到了這一步，我們只需要遍歷每個點和提交數據的範圍就好了，但是遍歷...，為了防止給後端造成計算壓力，我們這裡的計算是分兩個方面的。

首先為了地圖上範圍的標註，前端本身就會拉取簽到點信息，那我們就可以利用這個，在前端就做好一次距離計算，僅在範圍內才會允許發起簽到，並且這裡還會指定哪個簽到點，這樣就分散了計算壓力，也就是這樣：

matchedPoint.value = checkPoints.value.find(point => {
        const distance = AMap.GeometryUtil.distance([res.longitude, res.latitude], [point.longitude, point.latitude]);
        return distance <= 50;
      });

      if (matchedPoint.value) {
        if (currentStep.value === 0 || !matchedPoint.value.isEnd) {
          form.value.type = matchedPoint.value.id;
        }
        if (currentStep.value === 1 && !matchedPoint.value.isEnd) {
          showNotify({type: 'warning', message: '不在終點打卡點範圍內，請移動到終點打卡點附近'});
        }
        if (currentStep.value === 0 && matchedPoint.value.isEnd) {
          showNotify({type: 'warning', message: '不在起點打卡點範圍內，請移動到起點打卡點附近'});
        }
        canCheckIn.value = true;
      } else {
        canCheckIn.value = false;
        showNotify({type: 'warning', message: '不在打卡點範圍內，請移動到打卡點附近'});
      }

而後端最後準備要計算的大概是這樣，這樣只需要判斷是否符合簽到進度和簽到範圍就可以啦：

package com.csu54sher.csudynamicyouth.dto;

@Data
public class CheckInInfo {
    private BigDecimal latitude;
    private BigDecimal longitude;
    // 這個 type 要對應 checkpoint 的 id
    private int type;
}

簡單的加密和防修改手段#

這裡不能說得太詳細，畢竟這一次活動還沒開始呢，但是實際活動中...emm 大部分都在玩虛擬定位，這個從根本上數據就不可信，並且我們的軟件載體還是微信網頁，沒有防範的方法（其實也有，這次灰度了幾個，我看看效果，用打 tag 的方式）

首先是為了防止重放攻擊，我們的核心經緯度數據是經過算法加密的，同時也算了一個 state 帶了一個時間戳：

package com.csu54sher.csudynamicyouth.dto;

import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotNull;
import lombok.Data;

/**
 * @author grtsinry43
 * @date 2024/10/19 10:29
 * @description 熱愛可抵歲月漫長
 */
@Data
public class CheckInRequest {
    @NotNull
    @NotBlank
    private String data;
    @NotNull
    @NotBlank
    private String state;
    @NotNull
    @NotBlank
    private String timestamp;
}

面對面組隊的簡單實現#

emm... 這功能被砍掉了啊啊啊啊啊啊啊啊啊啊啊！！！

這個的核心功能就是發起組隊會生成一個組隊碼，規定時間內，其他人輸入這個相同的號碼就可以進去，有點類似面對面建群。

生成和存儲#

組隊碼是隨機生成的四位數，在判斷不重複之後插入數據庫和 Redis 中，有效期五分鐘，在過期之前，收到請求時都會從 redis 取出，然後將用戶團隊對象插入 / 刪除。

具體實現是這樣的：

public void joinTeam(String teamCode, Long userId) {
        // 這裡沒有就是錯誤
        TempTeam team = lambdaQuery().eq(TempTeam::getPwd, teamCode).one();
        if (team == null) {
            throw new BusinessException(ErrorCode.NOT_FOUND);
        }

        // 這裡沒了就是過期
        TempTeam redisTeam = (TempTeam) redisService.get("temp_team_" + team.getId());
        if (redisTeam == null) {
            throw new BusinessException(ErrorCode.CODE_HAS_EXPIRED);
        }

        // 避免重複插入
        boolean isMember = userTempTeamService.lambdaQuery()
                .eq(UserTempTeam::getUserId, userId)
                .eq(UserTempTeam::getTempTeamId, redisTeam.getId())
                .count() > 0;
        if (isMember) {
            throw new BusinessException(ErrorCode.ALREADY_IN_TEAM);
        }

        UserTempTeam userTempTeam = new UserTempTeam();
        userTempTeam.setTempTeamId(redisTeam.getId());
        userTempTeam.setUserId(userId);
        userTempTeamService.save(userTempTeam);
        // 這裡的通知用於實時刷新
        notifyTeamUpdate(redisTeam.getId());
    }

實時列表刷新#

組隊列表還要求實時性，於是我們需要一個伺服器端事件（SSE）來實現：

首先是事件觸發的部分：

public void addEmitter(Long teamId, SseEmitter emitter) {
        emitters.put(teamId, emitter);
    }

    public void removeEmitter(Long teamId) {
        emitters.remove(teamId);
    }

    public void notifyTeamUpdate(Long teamId) {
        SseEmitter emitter = emitters.get(teamId);
        if (emitter != null) {
            try {
                TeamInfo teamInfo = getTeamInfoById(teamId, null);
                emitter.send(SseEmitter.event().name("teamUpdate").data(teamInfo));
            } catch (Exception e) {
                emitters.remove(teamId);
            }
        }
    }

然後提供一個伺服器事件的 api 端點：

@GetMapping(value = "/stream/{id}", produces = MediaType.TEXT_EVENT_STREAM_VALUE)
    public ResponseEntity<SseEmitter> streamTeamUpdates(@PathVariable Long id) {
        TempTeam team = (TempTeam) redisService.get("temp_team_" + id);
        if (team == null) {
            throw new BusinessException(ErrorCode.NOT_FOUND);
        }

        SseEmitter emitter = new SseEmitter();
        tempTeamService.addEmitter(id, emitter);

        emitter.onCompletion(() -> tempTeamService.removeEmitter(id));
        emitter.onTimeout(() -> tempTeamService.removeEmitter(id));
        emitter.onError((ex) -> tempTeamService.removeEmitter(id));

        // 心跳保持連接
        Executors.newSingleThreadScheduledExecutor().scheduleAtFixedRate(() -> {
            try {
                emitter.send(SseEmitter.event().name("heartbeat").data("keep-alive"));
            } catch (Exception e) {
                tempTeamService.removeEmitter(id);
            }
        }, 0, 3, TimeUnit.SECONDS); 

        // 當過期時主動斷開和標記結束
        Executors.newSingleThreadScheduledExecutor().scheduleAtFixedRate(() -> {
            if (redisService.get("temp_team_" + id) == null) {
                try {
                    emitter.send(SseEmitter.event().name("finish").data("Team expired"));
                    emitter.complete();
                } catch (Exception e) {
                    tempTeamService.removeEmitter(id);
                }
            }
        }, 0, 1, TimeUnit.SECONDS);

        return ResponseEntity.ok(emitter);
    }

簡單總結#

大概就是這樣，在經過網絡安全評測之後我們也終於遷入了校內，有了統一的身份管理和鑑權措施，另外管理端也從無到有... 希望這個項目能繼續用下去吧，不出問題就是最大的幸運了，短時間寫 crud 感覺要吐了