위 게시글에서 레디스 서버는 설치가 완료된 상태이다.
이제 크롬다이노 서버에서 사용하기 위하여 준비해보자..
npm list redis
또는 package.json
확인하면 된다.
기존 레디스의 경우 connect()를 별도로 호출해주지 않아도 createClient() 호출 시 바로 연결 시도 하였다고 했으나, 현재 버전인 v4.7.0의 경우 (4.x이상) connect() 메서드를 명시적으로 호출해주어야 한다고 한다.
import redis from "redis";
export const redisClient = redis.createClient({
host: "192.168.0.3",
port: 6379,
});
// Redis 연결 및 에러 처리
export const connectRedis = async () => {
try {
await redisClient.connect();
console.log("Connected to Redis");
} catch (err) {
console.error("Redis connection error:", err);
}
};
redisClient.on("error", (err) => {
console.log("Redis Error : ", err);
});
상단에 connectRedis()
만 추가해주면 된다.
제일 먼저 구현해볼 것은 본인의 최고점수를 현재는 로컬 스토리지에 저장하고 있지만 유저간 최고점수를 비교하기 위해서는 서버측에서 관리되어야 한다.
그 전에 내 점수가 브라우저를 껐다가 켜도 남아있게 하기 위해서는 로그인 시스템을 도입해야 하는데, 고작 크롬다이노를 하자고 가입을? 전에 최고점수를 저장했던 로컬스토리지를 활용하여 uuid를 저장하는 방향으로 가기로 했다.
주의
localStorage.getItem("저장할 변수명");
불러올 변수가 없으면 null을 반환하는데, 그냥 null이 아니라 문자열 "null" 을 반환한다.
하도 안돼서 문자열로 테스트 하니까 해결되었다;;;;;
let uuid = localStorage.getItem("uuid"); // 없으면 "null" 반환
const socket = io("http://localhost:3000", {
query: {
clientVersion: CLIENT_VERSION,
uuid,
},
});
let userId = null;
socket.on("connection", (data) => {
console.log("connection: ", data, uuid);
if (uuid === "null") {
localStorage.setItem("uuid", data.uuid);
console.log("UUID saved to localStorage:", data.uuid);
}
userId = data.uuid;
});
const registerHandler = (io) => {
io.on("connection", (socket) => {
const { uuid } = socket.handshake.query;
const userUUID = uuid !== "null" ? uuid : uuidV4();
addUser({ uuid: userUUID, socketId: socket.id });
handleConnection(socket, userUUID);
socket.on("event", (data) => handlerEvent(io, socket, data));
// 접속 해제시 이벤트
socket.on("disconnect", () => {
handleDisconnect(socket, userUUID);
});
});
};
처음에 const userUUID = uuid | uuidV4(); 했다가 자꾸 null만 반환돼서
확인해보니 문자열...
저장 잘되고 나갔다가 들어와도 한번 받은 uuid로 접속!
게임이 끝나면 sendEvent를 통하여 서버에 점수를 전달하고 서버는 받은 점수를 레디스에 저장하고 저장된 점수보다 높으면 최신화 하는 방향으로 가겠다.
전에 있던 setHighScore 메서드를 활용하여 수정하겠다.