用 Socket.io 搭配 Matterjs 製作一款 Real-Time Canvas 聊天室（文長慎入）

import { useRef, useState } from 'react';
import { io } from 'socket.io-client';
import { Body } from 'matter-js';
import Player from '@/lib/matter-js/player';
import setPlayerAnimation from '@/lib/players/setPlayerAnimation';
import useCreation from './useCreation';
import { socketEndpoint } from '../config';
import { items } from '../lib/matter-js/playground';

// Player 物件的結構
export interface PlayerItem {
  id: string;
  username: string;
  imageKey: string;
  pos: {
    x: number;
    y: number;
  };
  size: {
    w: number;
    h: number;
  };
  status: string;
  moving: boolean;
}

// 建立 player 物件
export function createPlayerItem(player: any): PlayerItem {
  return {
    id: player.id,
    username: player.username,
    imageKey: player.imageKey,
    size: player.size,
    pos: player.body.position,
    status: player.status,
    moving: player.moving,
  }
}

// 本體！
function useSocket() {
  // 透過 useCreation 讓 socket 連線始終保持唯一
  const socket = useCreation(() => io(socketEndpoint), []);
  // 保存連線狀態
  const [isConnected, setIsConnected] = useState(socket.connected);
  // 房間人數
  const [roomSize, setRoomSize] = useState(0);
  // 房內其他 player 的物件列表（純傳遞的資料）
  const [roomPlayers, setRoomPlayers] = useState<Record<string, PlayerItem>>();
  // 用於 MatterJS 渲染的真實 render 物件（真實渲染物件）不包含當前 player 本人
  const renderPlayersRef = useRef<Player[]>([]); // not include self
  const [delay, setDelay] = useState(0);
  // 工具狀態
  const querys = new URLSearchParams(window.location.search);
  const roomId = querys.get('room') ?? 'default';

  // 初始化 roomPlayers，必須在 loader(載入圖片)後呼叫
  const initRoomPlayers = () => {
    // 本地第一次初始化（剛加入房間，還沒渲染其他用戶資料）
    if (roomPlayers && renderPlayersRef.current.length < 1) {
      Object.values(roomPlayers).forEach((player) => {
        // 檢查是否為用戶本人 id，避免渲染自己第二次
        if (player.id !== items.player.id) {
          onGetPlayer(player);
        }
      });
    }
  };
  // 初次連線上 socket，呼叫 join，初始化 server 端用戶資料
  const onConnect = () => {
    console.log(socket);
    setIsConnected(true);
    socket.emit('join', {
      room: roomId,
    });
  };
  // 斷線
  const onDisconnect = () => {
    setIsConnected(false);
  };
  // 由外部傳入 initApp 的操作，回傳為 socket event "join-ok"
  // 會在 server 初始化完成當前用戶資料時被呼叫
  // 此步驟 server 會把目前 room 裡面的所有用戶資料傳給新加入的此用戶
  const initJoinOk = (initApp: any) => ({ roomPlayers: rp }: { roomPlayers: Record<string, PlayerItem> }) => {
    console.log('room cache', rp);
    setRoomPlayers(rp);
    initApp();
  };
  // 當有其他新的用戶加入觸發 join 事件後，更新本地顯示的房內人數
  const onNewJoin = ({ size }: { size: number }) => {
    setRoomSize(size);
  };
  // 當有用戶離開房間時，更新房間人數，並將該用戶對應的 render 資料銷毀（從畫面上移除人物）
  const onGetLeave = ({ size, id }: { size: number, id: string }) => {
    setRoomSize(size);
    const renderPlayers = renderPlayersRef.current;
    const targetIndex = renderPlayers.findIndex((player) => player.id == id);
    const [targetPlayer] = renderPlayers.splice(targetIndex, 1);
    if (targetPlayer) targetPlayer.destroy();
    renderPlayersRef.current = renderPlayers;
  };
  // 當有新用戶加入房間成功，並推送其 player 資料到房間
  // 初始化並加入新的 render player 物件（把人物加入到 canvas 中）
  const onGetPlayer = (newPlayer: PlayerItem) => {
    console.log('new player', newPlayer);
    const player = new Player(
      newPlayer.username,
      newPlayer.pos.x,
      newPlayer.pos.y,
      newPlayer.size.w,
      newPlayer.size.h,
    );
    player.id = newPlayer.id;
    player.status = newPlayer.status;
    player.moving = newPlayer.moving;
    setPlayerAnimation(player, newPlayer.imageKey);

    player.mount().render();
    // save player
    renderPlayersRef.current = [...renderPlayersRef.current, player];
  };
  // 當其他用戶更新他們的 player 資料時，會同時帶著該用戶操作的時間戳記
  // 1. 若用戶切換 moving 狀態為 true，紀錄該用戶實際開始操作的時間距離現在的時間差為 delayTime
  // 2. 若用戶切換 moving 狀態為 false，紀錄用戶實際停止操作的時間距離現在的時間差，並將剛剛紀錄的時間相減，得到真實 delay 時間，避免人物移動距離偏差
  const onGetUpdatePlayer = ({ player: updatePlayer, time }: { player: PlayerItem, time: number }) => {
    console.log('update-player');
    const renderPlayers = renderPlayersRef.current;
    const targetIndex = renderPlayers.findIndex((player) => {
      return player.id === updatePlayer.id;
    });
    const targetPlayer = renderPlayers[targetIndex];
    if (targetPlayer) {
      // other player start moving
      if (updatePlayer.moving == true) {
        // start delay time(+delay)
        setDelay(Date.now() - time);
        targetPlayer.status = updatePlayer.status;
        targetPlayer.moving = updatePlayer.moving;
      } else {
        // end delay time(-delay)
        const realDelay = delay - (Date.now() - time);
        setTimeout(() => {
          targetPlayer.status = updatePlayer.status;
          targetPlayer.moving = updatePlayer.moving;
          Body.setPosition(targetPlayer.body, updatePlayer.pos);
        }, realDelay);
      }
    }
    renderPlayersRef.current = renderPlayers;
  };
  // 當接收到用戶發送的 message
  const onGetMessage = ({ id, message }: { id: string, message: string }) => {
    const [targetPlayer] = renderPlayersRef.current.filter((player) => {
      return player.id === id;
    });
    if (targetPlayer) {
      targetPlayer.say(message);
    }
  };

  return {
    socket,
    isConnected,
    roomSize,
    roomPlayers,
    renderPlayersRef,
    delay,
    initRoomPlayers,
    onConnect,
    onDisconnect,
    onNewJoin,
    initJoinOk,
    onGetLeave,
    onGetPlayer,
    onGetUpdatePlayer,
    onGetMessage,
  };
}

export default useSocket;

import { Engine, Render, Runner, Composite } from 'matter-js';
import { createPlayerItem } from '@/hooks/useSocket';
import engine from './engine';
import runner from './runner';
import { keepWatch, render } from './render';
import Player from './player';
import Joystick from './joystick';
import Box from './box';
import { canvasConfig } from './config';
import setPlayerAnimation from '../players/setPlayerAnimation';

export const items: Record<string, any> = {};

const boundOptions = () => ({
  render: {
    fillStyle: 'brown',
  }
})

// 初始化邊界
function initEdgeBounds() {
  // top
  new Box(
    canvasConfig.width / 2,
    -20,
    canvasConfig.width,
    50,
    boundOptions(),
  ).setStatic().mount();
  // bottom
  new Box(
    canvasConfig.width / 2,
    canvasConfig.height + 20,
    canvasConfig.width,
    50,
    boundOptions(),
  ).setStatic().mount();
  // left
  new Box(
    -20,
    canvasConfig.height / 2,
    50,
    canvasConfig.height,
    boundOptions(),
  ).setStatic().mount();
  // right
  new Box(
    canvasConfig.width + 20,
    canvasConfig.height / 2,
    50,
    canvasConfig.height,
    boundOptions(),
  ).setStatic().mount();
}

// 初始化本地用戶
export function initPlayer(socket: any, username: string, imageKey: string) {
  const player = new Player(
    username,
    canvasConfig.width / 2,
    canvasConfig.height / 2,
    48,
    64,
  );
  // set animation
  const querys = new URLSearchParams(window.location.search);
  const playerImageKey = Math.ceil(Math.random() * canvasConfig.playerCount);
  setPlayerAnimation(player, imageKey ?? `player${playerImageKey}`);
  // mount & render
  player.mount().render();
  items.player = player;
  // watch player
  keepWatch(player);
  // set socket events
  const onKeyDown = () => {
    socket.emit('update-player', {
      player: createPlayerItem(player),
      time: Date.now(),
    });
  };
  const onKeyUp = () => {
    socket.emit('update-player', {
      player: createPlayerItem(player),
      time: Date.now()
    });
  };
  player.onKeyDown = onKeyDown;
  player.onKeyUp = onKeyUp;
  // 把本地 player data 發送給其他房內的人
  socket.emit('push-player', createPlayerItem(player));
  // joystick 手機版觸控控制器
  const joystick = new Joystick(160, canvasConfig.height - 160, {
    size: 80
  });
  joystick.detectPress({
    onKeyDown,
    onKeyUp,
    up: () => {
      player.status = 'moveUp';
      player.moving = true;
    },
    down: () => {
      player.status = 'moveDown';
      player.moving = true;
    },
    left: () => {
      player.status = 'moveLeft';
      player.moving = true;
    },
    right: () => {
      player.status = 'moveRight';
      player.moving = true;
    },
    reset: () => {
      player.moving = false;
    },
  })
  joystick.render();

  const clearUserListen = player.listen();
  return clearUserListen;
}

function initPlayground() {
  // 初始化邊界
  initEdgeBounds();
  return {
    items,
    clear() {
      Composite.clear(engine.world, false);
      Engine.clear(engine);
      Render.stop(render);
      Runner.stop(runner);
      render.canvas.remove();
      render.textures = {};
    },
  };
}

export default initPlayground;