Around October last year, the school organized an event that required the implementation of a WeChat webpage for a mountain climbing festival check-in within 7 days, including features like location check-in, leaderboard, lottery, etc. In fact, I had already completed and iterated it to stability within a week, but at that time, this blog had not been fully restructured, so there was no record. Now, the new round of activities is about to start, and the development requirements for new features and the management panel are nearing completion. However, it is not finished yet (it took me a long time to hard control), so I will share the core functionality implementation ideas.
Implementation of Location Area and Effective Range#
The most important function is to determine the check-in range. My idea is to achieve it at the lowest cost without high precision requirements, just confirming a central point, and then using the obtained coordinates to calculate the distance. If it is less than the required distance, it can be implemented like this:
private boolean isWithinCheckinRange(BigDecimal latitude, BigDecimal longitude, int type) {
// Here we get the latitude and longitude of the check-in point from the checkpoint table
CheckPoint checkPoint = checkPointService.getById(type);
BigDecimal checkinLatitude = checkPoint.getLatitude();
BigDecimal checkinLongitude = checkPoint.getLongitude();
// Calculate the distance between the provided coordinates and the check-in point
double distance = calculateDistance(latitude, longitude, checkinLatitude, checkinLongitude);
// Check if the distance is within 50 meters
return distance <= 50;
}
private double calculateDistance(BigDecimal lat1, BigDecimal lon1, BigDecimal lat2, BigDecimal lon2) {
final int R = 6371000; // Earth's radius in meters
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; // Distance in meters
}
The problem arises because, in China, for privacy reasons, the gcj02 coordinate system is used, while only the universal wgs84 coordinates can be used to calculate the distance. Fortunately, there are many existing open-source algorithm implementations in this area, and we can do it like this:
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];
}
At this point, we only need to traverse each point and the range of submitted data, but for traversal... to prevent putting pressure on the backend, our calculations are divided into two aspects.
First, for marking the range on the map, the frontend will pull the check-in point information, so we can utilize this to perform a distance calculation on the frontend. Check-ins will only be allowed within the range, and the specific check-in point will also be designated, thus dispersing the computational pressure, which is done like this:
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: 'Not within the endpoint check-in range, please move closer to the endpoint check-in point'});
}
if (currentStep.value === 0 && matchedPoint.value.isEnd) {
showNotify({type: 'warning', message: 'Not within the starting point check-in range, please move closer to the starting point check-in point'});
}
canCheckIn.value = true;
} else {
canCheckIn.value = false;
showNotify({type: 'warning', message: 'Not within the check-in point range, please move closer to the check-in point'});
}
The backend's final preparation for calculation is roughly like this, so we only need to check if it meets the check-in progress and check-in range:
package com.csu54sher.csudynamicyouth.dto;
@Data
public class CheckInInfo {
private BigDecimal latitude;
private BigDecimal longitude;
// This type must correspond to the checkpoint's id
private int type;
}
Simple Encryption and Anti-Modification Measures#
I can't go into too much detail here since this event hasn't started yet, but in actual activities... emm most people are playing with virtual positioning, which fundamentally makes the data unreliable. Moreover, our software carrier is still the WeChat webpage, and there are no preventive methods (actually, there are a few that have been gray tested, and I'm checking the effects using a tagging method).
First, to prevent replay attacks, our core latitude and longitude data is encrypted through an algorithm, and a state with a timestamp is also calculated:
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 Love can withstand the long years
*/
@Data
public class CheckInRequest {
@NotNull
@NotBlank
private String data;
@NotNull
@NotBlank
private String state;
@NotNull
@NotBlank
private String timestamp;
}
Simple Implementation of Face-to-Face Team Formation#
emm... this feature was cut out ah ah ah ah ah ah ah ah ah ah ah!!!
The core function of this is to initiate a team formation that generates a team code. Within a specified time, others can enter by inputting the same number, somewhat similar to face-to-face group creation.
Generation and Storage#
The team code is a randomly generated four-digit number. After ensuring it is not duplicated, it is inserted into the database and Redis, with a validity period of five minutes. Before expiration, requests will always retrieve it from Redis, and then the user team object will be inserted/deleted.
The specific implementation is like this:
public void joinTeam(String teamCode, Long userId) {
// Here, if it doesn't exist, it's an error
TempTeam team = lambdaQuery().eq(TempTeam::getPwd, teamCode).one();
if (team == null) {
throw new BusinessException(ErrorCode.NOT_FOUND);
}
// If it doesn't exist here, it's expired
TempTeam redisTeam = (TempTeam) redisService.get("temp_team_" + team.getId());
if (redisTeam == null) {
throw new BusinessException(ErrorCode.CODE_HAS_EXPIRED);
}
// Avoid duplicate insertion
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);
// This notification is used for real-time refresh
notifyTeamUpdate(redisTeam.getId());
}
Real-Time List Refresh#
The team list also requires real-time updates, so we need a server-sent event (SSE) to achieve this:
First, the part that triggers the event:
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);
}
}
}
Then provide an API endpoint for server events:
@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));
// Heartbeat to keep the connection alive
Executors.newSingleThreadScheduledExecutor().scheduleAtFixedRate(() -> {
try {
emitter.send(SseEmitter.event().name("heartbeat").data("keep-alive"));
} catch (Exception e) {
tempTeamService.removeEmitter(id);
}
}, 0, 3, TimeUnit.SECONDS);
// Actively disconnect and mark as finished when expired
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);
}
Simple Summary#
That's about it. After undergoing network security assessment, we finally migrated to the campus, with unified identity management and authentication measures. Additionally, the management side has gone from non-existent to established... I hope this project can continue to be used, and not having issues would be the greatest luck. Writing CRUD in a short time feels overwhelming.