สร้างเกม TicTacToe ผู้เล่นหลายคนแบบเรียลไทม์ที่ปรับขนาดได้ด้วย Node.js, Socket.IO และ Redis

ในบทช่วยสอนนี้ เราจะสร้างเกม Tic-Tac-Toe ที่มีผู้เล่นหลายคนแบบเรียลไทม์ โดยใช้ Node.js , Socket.IO และ แดง . เกมนี้อนุญาตให้ผู้เล่นสองคนเชื่อมต่อจากแท็บเบราว์เซอร์ที่แตกต่างกัน ผลัดกันเล่น และดูการอัปเดตแบบเรียลไทม์ขณะเล่น เราจะใช้ Redis เพื่อจัดการการซิงโครไนซ์สถานะของเกมบนเซิร์ฟเวอร์ WebSocket หลายเซิร์ฟเวอร์ ทำให้แอปพลิเคชันของเราปรับขนาดได้

ในตอนท้าย คุณจะมีเกมที่มีฟังก์ชันการทำงานเต็มรูปแบบพร้อมความสามารถแบบเรียลไทม์และความเข้าใจที่ชัดเจนเกี่ยวกับวิธีการใช้ WebSockets และ Redis เพื่อสร้างแอปพลิเคชันแบบเรียลไทม์ที่ปรับขนาดได้

สิ่งที่คุณจะได้เรียนรู้

• วิธีใช้ Socket.IO สำหรับการสื่อสารแบบเรียลไทม์

• วิธีใช้ Redis Pub/Sub เพื่อซิงโครไนซ์สถานะของเกมกับไคลเอนต์หลายตัว

• วิธีการตั้งค่าสถาปัตยกรรมเซิร์ฟเวอร์ WebSocket ที่ปรับขนาดได้

ข้อกำหนดเบื้องต้น

ก่อนที่เราจะเริ่ม ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งสิ่งต่อไปนี้แล้ว:

• Node.js (v16 หรือสูงกว่า)

• เรดดิส

• นักเทียบท่า (เป็นทางเลือก สำหรับการเรียกใช้ Redis ในคอนเทนเนอร์)

• ความรู้พื้นฐานเกี่ยวกับ JavaScript, Node.js และ WebSockets

สารบัญ

• ภาพรวมโครงการ

• ขั้นตอนที่ 1:การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

• ขั้นตอนที่ 2:การตั้งค่าโครงการ

• ขั้นตอนที่ 3:การใช้งาน WebSocket Server ด้วย Redis

• ขั้นตอนที่ 4:ใช้อินเทอร์เฟซ React Frontend

• ขั้นตอนที่ 5:เรียกใช้แอปพลิเคชัน

• ขั้นตอนที่ 6:การดูข้อความ Redis แบบเรียลไทม์

• สาธิต

• บทสรุป

ภาพรวมโครงการ

เราจะสร้างเกม Tic-Tac-Toe แบบเรียลไทม์พร้อมคุณสมบัติดังต่อไปนี้:

• ผู้เล่นสองคน สามารถเชื่อมต่อและเล่นเกมได้

• บอร์ดเกมจะอัปเดตตามเวลาจริงผ่านแท็บเบราว์เซอร์ต่างๆ

• เกมจะประกาศผู้ชนะหรือเสมอเมื่อกระดานเต็ม

เราจะใช้:

• โหนด js ด้วย Socket.IO สำหรับการจัดการการเชื่อมต่อ WebSocket

• เรดิส Pub/Sub เพื่อจัดการการซิงโครไนซ์สถานะของเกมกับไคลเอนต์

ขั้นตอนที่ 1:การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ

การติดตั้ง Node.js

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Node.js บนระบบของคุณ:

node -v

หากคุณยังไม่ได้ติดตั้ง ให้ดาวน์โหลดจาก Node.js

การติดตั้ง Redis

คุณสามารถติดตั้ง Redis ในเครื่องหรือเรียกใช้ในคอนเทนเนอร์ Docker ได้

macOS (ใช้ Homebrew)

ขั้นแรก ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง Homebrew บนระบบของคุณก่อนที่จะรันคำสั่งด้านล่าง:

brew install redis
brew services start redis

ตรวจสอบว่าคอนเทนเนอร์ Redis ทำงานด้วยคำสั่งต่อไปนี้:

redis-cli ping

คุณควรเห็น:

PONG

การใช้ Docker เพื่อเรียกใช้ Redis

docker run --name redis-server -p 6379:6379 -d redis

ตรวจสอบว่า Redis ทำงานโดยใช้:

docker exec -it redis-server redis-cli ping

ขั้นตอนที่ 2:การตั้งค่าโครงการ

1. สร้างไดเรกทอรีโครงการ

mkdir tic-tac-toe
cd tic-tac-toe
npm init -y

2. ติดตั้งการอ้างอิง

npm install express socket.io redis dotenv

3. สร้างตัวแปรสภาพแวดล้อม

สร้าง 09 ในรูทโปรเจ็กต์ของคุณโดยมีเนื้อหาดังต่อไปนี้:

PORT=3000
REDIS_HOST=localhost
REDIS_PORT=6379

ขั้นตอนที่ 3:การใช้งาน WebSocket Server ด้วย Redis

ในขั้นตอนนี้ เราจะตั้งค่าเซิร์ฟเวอร์ WebSocket ที่จัดการการโต้ตอบของเกมแบบเรียลไทม์โดยใช้ Node.js , Socket.IO และ แดง . เซิร์ฟเวอร์นี้จะจัดการสถานะของเกม จัดการการเคลื่อนไหวของผู้เล่น และรับรองการซิงโครไนซ์กับไคลเอนต์หลายตัวโดยใช้ Redis Pub/Sub

เราจะแจกแจงโค้ดแต่ละส่วนเพื่อให้คุณเข้าใจว่าทุกอย่างเข้ากันได้อย่างไรคำอธิบายโค้ดเซิร์ฟเวอร์

สร้างไฟล์ชื่อ 13 และเพิ่มรหัสต่อไปนี้:

import dotenv from 'dotenv';
import express from 'express';
import http from 'http';
import { Server } from 'socket.io';
import { createClient } from 'redis';
dotenv.config(); // Load environment variables from .env file
const app = express();
const server = http.createServer(app);
const io = new Server(server, {
 cors: {
 origin: "http://localhost:5173",
 methods: ["GET", "POST"],
 }
});

• โดเทนวี :โหลดตัวแปรสภาพแวดล้อมจาก 27 ไฟล์เพื่อเก็บข้อมูลสำคัญเช่นพอร์ตและคีย์ให้ปลอดภัย

• ด่วน :ตั้งค่าเซิร์ฟเวอร์ Express พื้นฐานเพื่อจัดการคำขอ HTTP

• http :เราสร้างเซิร์ฟเวอร์ HTTP โดยใช้ 32 ในตัวของ Node โมดูลซึ่งเราจะใช้กับ Socket.IO สำหรับการสื่อสาร WebSocket

• Socket.IO :ไลบรารีนี้เปิดใช้งานการสื่อสารแบบสองทิศทางแบบเรียลไทม์ระหว่างเซิร์ฟเวอร์และไคลเอนต์

• การกำหนดค่า CORS :อนุญาตคำขอข้ามต้นทางจากส่วนหน้าของเราที่ทำงานบน 43 .

จากนั้น เพื่อสร้างลูกค้าผู้เผยแพร่และสมาชิก Redis เราจะเพิ่มโค้ดต่อไปนี้ใน 53 :

// Initialize Redis clients
const pubClient = createClient();
const subClient = createClient();
await pubClient.connect();
await subClient.connect();

เราใช้ เรดดิส เพื่อจัดการการซิงโครไนซ์ข้อมูลแบบเรียลไทม์ระหว่างไคลเอนต์ที่เชื่อมต่อ

• pubClient :ใช้เพื่อเผยแพร่ข้อความ (เช่น การอัปเดตสถานะของเกม)

• ลูกค้าย่อย :สมัครรับข้อความ (ฟังการอัปเดต)

• เชื่อมต่อ() :สร้างการเชื่อมต่อกับเซิร์ฟเวอร์ Redis

ในกระบวนทัศน์นี้ ไคลเอนต์หนึ่งถูกใช้เพื่อเผยแพร่การอัพเดต และอีกอันหนึ่งสมัครรับการอัพเดต ซึ่งจะช่วยหลีกเลี่ยงพฤติกรรมการบล็อก เนื่องจากไคลเอ็นต์ Redis อยู่ใน สมัครสมาชิก โหมดสามารถรับได้เฉพาะข้อความเท่านั้น

หากต้องการสมัครรับข้อมูลช่อง Redis สำหรับการอัปเดตเกม เราจะเพิ่มโค้ดต่อไปนี้ลงใน 65 :

// Subscribe to the Redis channel for game updates
await subClient.subscribe('game-moves', (message) => {
 gameState = JSON.parse(message);
 io.emit('gameState', gameState);
});

• subClient.subscribe :ฟังข้อความบน 75 ช่อง.

• เมื่อใดก็ตามที่ผู้เล่นทำการเคลื่อนไหวใหม่ สถานะของเกมจะได้รับการอัปเดตใน Redis และไคลเอนต์ที่เชื่อมต่อทั้งหมดจะได้รับแจ้งเกี่ยวกับสถานะใหม่

• 88 พารามิเตอร์ประกอบด้วยสถานะของเกมเป็นสตริง เราแยกวิเคราะห์ออกเป็นวัตถุ JavaScript และเผยแพร่สถานะที่อัปเดตโดยใช้ Socket.IO .

// Define initial game state
let gameState = {
 board: Array(9).fill(null),
 xIsNext: true,
};
// Function to reset the game
function resetGame() {
 gameState = {
 board: Array(9).fill(null),
 xIsNext: true,
 };
}

io.on('connection', (socket) => {
 console.log('New client connected:', socket.id);
 // Send the current game state to the newly connected client
 socket.emit('gameState', gameState);

 // Handle player moves
 socket.on('makeMove', (index) => {
 // Prevent making a move if cell is already taken or game is over
 if (gameState.board[index] || calculateWinner(gameState.board)) return;
 // Update the board and switch turns
 gameState.board[index] = gameState.xIsNext ? 'X' : 'O';
 gameState.xIsNext = !gameState.xIsNext;
 // Publish the updated game state to Redis
 pubClient.publish('game-moves', JSON.stringify(gameState));
 io.emit('gameState', gameState);
 });

// Handle game restarts
socket.on('restartGame', () => {
 resetGame();
 io.emit('gameState', gameState);
});

 socket.on('disconnect', () => {
 console.log('Client disconnected:', socket.id);
 });
});

// Function to check if there's a winner
function calculateWinner(board) {
 const lines = [
 [0, 1, 2], [3, 4, 5], [6, 7, 8],
 [0, 3, 6], [1, 4, 7], [2, 5, 8],
 [0, 4, 8], [2, 4, 6]
 ];
 for (let [a, b, c] of lines) {
 if (board[a] && board[a] === board[b] && board[a] === board[c]) {
 return board[a];
 }
 }
 return null;
}
function isBoardFull(board) {
 return board.every((cell) => cell !== null);
}

import React, { useEffect, useState } from 'react';
import io from 'socket.io-client';
const socket = io('http://localhost:3000');
function App() {
 const [gameState, setGameState] = useState({
 board: Array(9).fill(null),
 xIsNext: true,
 winner: null
 });
 useEffect(() => {
 socket.on('gameState', (state) => {
 setGameState(state);
 });
 return () => socket.off('gameState');
 }, []);
 const handleClick = (index) => {
 if (gameState.board[index] || gameState.winner) return;
 socket.emit('makeMove', index);
 };
 const renderCell = (index) => (
 <button onClick={() => handleClick(index)}>{gameState.board[index]}</button>
 );
 return (
 <div>
 <h1>Multiplayer Tic-Tac-Toe</h1>
 <div className="board">
 {[...Array(9)].map((_, i) => renderCell(i))}
 </div>
 <button onClick={() => socket.emit('restartGame')}>Restart Game</button>
 </div>
 );
}
export default App;

cd tic-tac-toe
npm start

cd tic-tac-toe-client
npm run dev

http://localhost:5173

redis-cli
SUBSCRIBE game-moves

1) "message"
2) "game-moves"
3) "{\"board\":[\"X\",null,\"O\",null,\"X\",null,null,null,null],\"xIsNext\":false}"