[week4] 15김혜원 4주차 과제 제출

week4/colyseus-test/MyRoom.ts

@@ -0,0 +1,90 @@
+// **1️⃣ `MyRoom.ts`**
+
+// **👉 Room 클래스 (게임 방 역할)를 정의하는 파일이에요.**
+
+// - `Room` 클래스를 만들고 아래 메서드를 포함해주세요:
+//     - `onCreate`: Room이 만들어질 때 호출
+//     - `onJoin`: 플레이어가 입장할 때 호출
+//     - `onLeave`: 플레이어가 나갈 때 호출
+// - 입장한 플레이어마다 **Player 객체를 만들고**, `state.players`에 추가해보세요.
+// - 나간 플레이어는 `state.players.delete()`로 제거해요.
+
+
+
+
+// colyseus 라이브러리, MyState 파일에서 클래스 가져오기
+import { Room, Client } from "colyseus";
+import { MyState, Player } from "./MyState";
+
+
+/* Room<MyState> 상속 --> colyseus에 이미 있는 기능 사용 가능
+   onCreate: room이 생성될 때 실행됨
+   options: 클라이언트가 방을 만들 때 전달할 수 있는 추가 설정값 ex최대인원?
+   this.setState: 초기 상태 설정. new MyState()를 넘김-->room의 상태가 MyState 클래스의 구조를 따라감 */ 
+export class MyRoom extends Room<MyState> {
+  onCreate(options: any) {
+    this.setState(new MyState());
+
+    // 클라이언트가 메시지 보내면 서버가 응답(보너스과제)
+    // gpt가 써줬는데 사실 요거 이해를 못하겠어요... 뭐지진짜
+    this.onMessage("ping", (client, message) => {
+      console.log(`ping 메시지 수신: ${message}`);
+      client.send("pong", "pong 응답!");
+    });
+  }
+
+  /* onJoin: 클라이언트가 입장할 때 실행되는 메서드
+  (파라미터) client --> 고유한 sessionId 가짐 
+  플레이어 객체 생성
+  플레이어 이름 설정(sessionId이용)
+  현재 room의 상태에 플레이어 등록(키:client.sessionId, 값:player인스턴스)
+  --> 이 상태를 접속 중인 클라이언트 모두에게 실시간 동기화함 */
+  onJoin(client: Client, options: any) {
+    const player = new Player();
+    player.name = `Player_${client.sessionId}`;
+    this.state.players.set(client.sessionId, player);
+    console.log(`플레이어${client.sessionId}님이 입장하셨습니다.`)
+  }
+
+  /* onLeave: 클라이언트가 나갈 때 실행되는 메서드
+  room 상태에 플레이어 삭제
+  --> 이 상태를 접속 중인 클라이언트 모두에게 실시간 동기화 */
+  onLeave(client: Client) {
+    console.log(`플레이어${client.sessionId}님이 퇴장하셨습니다.`)
+    this.state.players.delete(client.sessionId);
+  }
+}
+
+
+
+
+
+// import { Room, Client } from "colyseus";
+// import { Schema, type, MapSchema } from "@colyseus/schema";
+
+// // 상태 정의
+// class MyState extends Schema {
+//   @type("string") message: string = "hello from the server!";
+// }
+
+// export class MyRoom extends Room<MyState> {
+//   // 방이 생성될 때 실행됨
+//   onCreate(options: any) {
+//     this.setState(new MyState());
+
+//     this.onMessage("chat", (client, message) => {
+//       console.log(`받은 메시지: ${message}`);
+//       this.state.message = message;  // 상태 업데이트
+//     });
+//   }
+
+//   // 클라이언트가 입장할 때 실행되는 메서드
+//   onJoin(client: Client, options: any) {
+//     console.log(`${client.sessionId} 가 입장했습니다.`);
+//   }
+
+//   // 클라이언트가 나갈 때 실행되는 메서드
+//   onLeave(client: Client, consented: boolean) {
+//     console.log(`${client.sessionId} 가 퇴장했습니다.`);
+//   }
+// }

week4/colyseus-test/MyState.ts

@@ -0,0 +1,37 @@
+// **2️⃣ `MyState.ts`**
+
+// **👉 게임 상태(state)를 정의하는 파일이에요.** `MyState`라는 클래스는 `MyRoom.ts`에서 사용할 상태 정의입니다!
+
+// - `Player` 클래스 안에 다음 세 가지 속성을 추가해주세요:
+//     - `name: string`, `x: number`, `y: number`
+// - `MapSchema`를 사용해서 플레이어 목록을 관리하세요!
+
+
+
+
+import { Schema, type, MapSchema } from "@colyseus/schema";
+
+/* Player 클래스 --> Colyseus의 Schema 상속
+   (Schema: 실시간 상태를 정의할 때 사용하는 기본 클래스.
+   상속하면 클래스 필드를 자동으로 클라이언트와 동기화해줌)
+
+   @type: 데코레이터. 이 필드는 클라이언트와 동기화해야 한다고 알려주는 표시.
+   ex) @type("string") name: string = "";
+       name 속성이 string 타입이고, 이건 클라이언트와 실시간 동기화가 필요함. */
+export class Player extends Schema {
+  @type("string") name: string = "";
+  @type("number") x: number = 0;
+  @type("number") y: number = 0;
+
+  // hp, score, color 속성 추가(보너스과제)
+  @type("number") hp: number = 100;
+  @type("number") score: number = 0;
+  @type("string") color: string = "red";
+}
+
+/*  player라는 이름의 속성 생성
+    MapSchema<Player>: 실시간 동기화 가능한 딕셔너리 구조
+    */
+export class MyState extends Schema {
+  @type({ map: Player }) players = new MapSchema<Player>();
+}

week4/colyseus-test/client.ts

@@ -0,0 +1,20 @@
+import { Client } from "colyseus.js";
+
+const client = new Client("ws://localhost:2567");
+(async () => {
+  try {
+    const room = await client.joinOrCreate("my_room");
+    console.log("Joined successfully!", room.sessionId);
+
+    // 서버에 메시지 보내기
+    room.send("ping", { message: "클라이언트에서 ping 보냄!" });
+
+    // 서버 응답 받기
+    room.onMessage("pong", (data) => {
+      console.log("서버 응답:", data);
+    });
+
+  } catch (e) {
+    console.error("방 참가 실패", e);
+  }
+})();

week4/colyseus-test/index.ts

@@ -0,0 +1,23 @@
+// **3️⃣ `index.ts`**
+
+// **👉 서버를 실행하고, 방(Room)을 등록하는 파일이에요.**
+
+// - Colyseus 서버를 만들고 `"my_room"`이라는 이름으로 `MyRoom`을 등록해주세요.
+// - 서버 포트는 2567로 설정!
+
+
+console.log("서버시작");
+
+import { Server } from "colyseus";
+import { MyRoom } from "./MyRoom";
+import { createServer } from "http";
+
+
+const port = 2567;
+const httpServer = createServer(); //이 HTTP 서버는 WebSocket 요청을 처리하는 데 사용됨...? 실시간 통신인가 보다
+const gameServer = new Server({ server: httpServer });
+
+gameServer.define("my_room", MyRoom);
+
+gameServer.listen(port);
+console.log(`게임 서버 실행 중! 포트: ${port}`);