systemdesign.excalidraw

{
  "type": "excalidraw",
  "version": 2,
  "source": "https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor",
  "elements": [
    {
      "id": "DFsGO799ssofwr36CVUzP",
      "type": "text",
      "x": 827.2920365547043,
      "y": 179.46822697539812,
      "width": 1648.538818359375,
      "height": 1675,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a1",
      "roundness": null,
      "seed": 258364044,
      "version": 4168,
      "versionNonce": 666335756,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1747632940754,
      "link": null,
      "locked": false,
      "text": "Battle royale , fortnite , COD , pubg \n\n1. massive play area with 1000 players in lobby joining a game session\nthey can move around and interact with 10000+ stateful items for eg.: pubg\nyou can open doors, chests looted ,and few things can be playable like cars\n\n2. have to able to support a ping of 10 ms basically you get 100 updates per user from \nper second about the game state\n\n\n\nHIGH LEVEL \n\nclient - > game state upates = telling every other client what im doing \nfor starters I could say i will send send all the key strokes im pressing on my client computer\nits hard, we dont know exactly when , like im another client on receiving end \ni wont be replicate cause , we could include timestamp but syncronise wont work\n    as the timestamp can be different . ❌ \n\nA better way is to send game send messages is send the movements like from coordinate 100,200 to 100,300\nhere we can drop few messages cause \nand for other things like killing someone its has to perfect no dropping messages\n\n\nPEER TO PEER GAMING : so ideally not having single server and sharing the state between one another directly\ncons : if one client dies send all state between 1000 people is too much to handle , conflicts with other states we can solve iwth some fancy logic\nbut its like i win after 2 sec someone else wins which hinders the user experience , how do we stop cheating \nif clients are sending between each other .\n \nso this is not great we should go with CENTRALISED GAME SERVER  :\nsnapshot of entirety of game state which gets incremental messages from client about thier gamestates\neg. me move from one point to another it shoudl eb sent to this central server and it also has the responsibiltu to send to other clients so thier game statw\nwith be updated\npros : fewer active connections unlike 1000 peer connections , single connection to central serverl\n     validation against cheating( regression model) ,pipe this to kafka to anticheat server .and downstream to server\n     restore game state to failed state\n    no conflicts so order is there \n\ngame state for failed client . offload snapshot to other server cause it will cause time delay for sync\nsnapshot server : with kafka offset , apply buffered things\n\nFAULT TOLERANCE\nhave a game server replica , up to data as possible , state machine replication , we can make multiple replicas\n\nGAME NETWORKING\nfor movement : we can use UDP no congestion control, or flow control which is faster with no over head , from one coordinate to anohter for this state machine\nfor others like . score , shooting and that sent to be in order TCP \n\nFRONTEND OPTMISITATION \nwe have faster refresh rate and good gpu , even with 10 ping which is great . the tactic is interpolation like movement in physics or game engine , it done by game engine\nin rocket league when we lag we see the ball falling down correctly .\n\nREDUCING GAME SERVER LOAD:\npartition game\ngeo sharding \n\n\n\n\n\n\n\n \n\n\n\n",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "Battle royale , fortnite , COD , pubg \n\n1. massive play area with 1000 players in lobby joining a game session\nthey can move around and interact with 10000+ stateful items for eg.: pubg\nyou can open doors, chests looted ,and few things can be playable like cars\n\n2. have to able to support a ping of 10 ms basically you get 100 updates per user from \nper second about the game state\n\n\n\nHIGH LEVEL \n\nclient - > game state upates = telling every other client what im doing \nfor starters I could say i will send send all the key strokes im pressing on my client computer\nits hard, we dont know exactly when , like im another client on receiving end \ni wont be replicate cause , we could include timestamp but syncronise wont work\n    as the timestamp can be different . ❌ \n\nA better way is to send game send messages is send the movements like from coordinate 100,200 to 100,300\nhere we can drop few messages cause \nand for other things like killing someone its has to perfect no dropping messages\n\n\nPEER TO PEER GAMING : so ideally not having single server and sharing the state between one another directly\ncons : if one client dies send all state between 1000 people is too much to handle , conflicts with other states we can solve iwth some fancy logic\nbut its like i win after 2 sec someone else wins which hinders the user experience , how do we stop cheating \nif clients are sending between each other .\n \nso this is not great we should go with CENTRALISED GAME SERVER  :\nsnapshot of entirety of game state which gets incremental messages from client about thier gamestates\neg. me move from one point to another it shoudl eb sent to this central server and it also has the responsibiltu to send to other clients so thier game statw\nwith be updated\npros : fewer active connections unlike 1000 peer connections , single connection to central serverl\n     validation against cheating( regression model) ,pipe this to kafka to anticheat server .and downstream to server\n     restore game state to failed state\n    no conflicts so order is there \n\ngame state for failed client . offload snapshot to other server cause it will cause time delay for sync\nsnapshot server : with kafka offset , apply buffered things\n\nFAULT TOLERANCE\nhave a game server replica , up to data as possible , state machine replication , we can make multiple replicas\n\nGAME NETWORKING\nfor movement : we can use UDP no congestion control, or flow control which is faster with no over head , from one coordinate to anohter for this state machine\nfor others like . score , shooting and that sent to be in order TCP \n\nFRONTEND OPTMISITATION \nwe have faster refresh rate and good gpu , even with 10 ping which is great . the tactic is interpolation like movement in physics or game engine , it done by game engine\nin rocket league when we lag we see the ball falling down correctly .\n\nREDUCING GAME SERVER LOAD:\npartition game\ngeo sharding \n\n\n\n\n\n\n\n \n\n\n\n",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "mN3js598j8mnBNUn0P6w7",
      "type": "rectangle",
      "x": -607.8433062565618,
      "y": 688.5630737170211,
      "width": 234.1812210090079,
      "height": 120.31882367739286,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a3",
      "roundness": {
        "type": 3
      },
      "seed": 900657036,
      "version": 257,
      "versionNonce": 1701644246,
      "isDeleted": false,
      "boundElements": [
        {
          "id": "TAQTKe1Vv5tsWghhhXyjG",
          "type": "arrow"
        }
      ],
      "updated": 1751388048457,
      "link": null,
      "locked": false
    },
    {
      "id": "dr4X4aqsWtO7X079kr0WL",
      "type": "text",
      "x": -488.96403291260674,
      "y": 734.0166599937724,
      "width": 59.77995300292969,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a4",
      "roundness": null,
      "seed": 1871694260,
      "version": 294,
      "versionNonce": 597789270,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "client ",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "client ",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "Sm5a4SdMx3ZyM5owH1GhN",
      "type": "rectangle",
      "x": 42.3076206828282,
      "y": 647.2902174505532,
      "width": 280.59163415409193,
      "height": 192.87388449503283,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a5",
      "roundness": {
        "type": 3
      },
      "seed": 1368604852,
      "version": 665,
      "versionNonce": 854183830,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false
    },
    {
      "id": "eObc_4t5sV1LdBLg5x80T",
      "type": "text",
      "x": 63.711234323103554,
      "y": 728.5429207019579,
      "width": 206.85983276367188,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a6",
      "roundness": null,
      "seed": 793962124,
      "version": 361,
      "versionNonce": 1400335574,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "central master server",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "central master server",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "TAQTKe1Vv5tsWghhhXyjG",
      "type": "arrow",
      "x": -371.21057732933093,
      "y": 741.9042163347326,
      "width": 247.13429063849202,
      "height": 3.823554811306167,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a7",
      "roundness": {
        "type": 2
      },
      "seed": 1077540916,
      "version": 938,
      "versionNonce": 1197574218,
      "isDeleted": false,
      "boundElements": [
        {
          "type": "text",
          "id": "zhhrsmSVBJWV3T8oX0ONI"
        }
      ],
      "updated": 1751388048502,
      "link": null,
      "locked": false,
      "points": [
        [
          0,
          0
        ],
        [
          247.13429063849202,
          -3.823554811306167
        ]
      ],
      "lastCommittedPoint": null,
      "startBinding": {
        "elementId": "mN3js598j8mnBNUn0P6w7",
        "focus": -0.08017889535709391,
        "gap": 2.451507918223001
      },
      "endBinding": null,
      "startArrowhead": null,
      "endArrowhead": "arrow",
      "elbowed": false
    },
    {
      "id": "zhhrsmSVBJWV3T8oX0ONI",
      "type": "text",
      "x": -551.9626013246527,
      "y": 786.5650771541518,
      "width": 190.95986938476562,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a8",
      "roundness": null,
      "seed": 254978316,
      "version": 19,
      "versionNonce": 1205705868,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1747632919341,
      "link": null,
      "locked": false,
      "text": "websocket for TCP",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "TAQTKe1Vv5tsWghhhXyjG",
      "originalText": "websocket for TCP",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "8XbkLofbrZ3dUmS6EqZk8",
      "type": "text",
      "x": -257.2567696622614,
      "y": 771.5311692819236,
      "width": 86.29994201660156,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "a9",
      "roundness": null,
      "seed": 13956748,
      "version": 284,
      "versionNonce": 1142337366,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "and UDP",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "and UDP",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "68aXee1VsoVYhuValaTts",
      "type": "rectangle",
      "x": 120.63381292703775,
      "y": 915.3353515428565,
      "width": 280.59163415409193,
      "height": 192.87388449503283,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aA",
      "roundness": {
        "type": 3
      },
      "seed": 1161346484,
      "version": 561,
      "versionNonce": 863130774,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false
    },
    {
      "id": "jg1tpedtr-sjFaiYGgKwN",
      "type": "text",
      "x": 215.2174418710265,
      "y": 1003.7125359354966,
      "width": 67.179931640625,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aB",
      "roundness": null,
      "seed": 1296218292,
      "version": 95,
      "versionNonce": 447173078,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "Replica",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "Replica",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "UzNqksEgjkWkmLowUIYlf",
      "type": "rectangle",
      "x": 401.76851097937265,
      "y": 626.3994974919516,
      "width": 280.59163415409193,
      "height": 192.87388449503283,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aC",
      "roundness": {
        "type": 3
      },
      "seed": 468111884,
      "version": 483,
      "versionNonce": 1691002646,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false
    },
    {
      "id": "ug6cIE1pod79Atz29NZKX",
      "type": "text",
      "x": 445.46360463324163,
      "y": 710.3502801108176,
      "width": 156.21987915039062,
      "height": 25,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aD",
      "roundness": null,
      "seed": 1574482060,
      "version": 388,
      "versionNonce": 1381061718,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "snapshot server",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "left",
      "verticalAlign": "top",
      "containerId": null,
      "originalText": "snapshot server",
      "autoResize": true,
      "lineHeight": 1.25
    },
    {
      "id": "cOM_q24FD7UmvjGdxskqs",
      "type": "rectangle",
      "x": -89.96722881778408,
      "y": 698.1313424003499,
      "width": 109.6213268881935,
      "height": 105.81987960049264,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aE",
      "roundness": {
        "type": 3
      },
      "seed": 1019824180,
      "version": 199,
      "versionNonce": 1292917142,
      "isDeleted": false,
      "boundElements": [
        {
          "type": "text",
          "id": "qH_2FyRc0jodXLU7sW9yH"
        }
      ],
      "updated": 1751388048457,
      "link": null,
      "locked": false
    },
    {
      "id": "qH_2FyRc0jodXLU7sW9yH",
      "type": "text",
      "x": -74.26652783706623,
      "y": 726.0412822005962,
      "width": 78.21992492675781,
      "height": 50,
      "angle": 0,
      "strokeColor": "#1e1e1e",
      "backgroundColor": "transparent",
      "fillStyle": "solid",
      "strokeWidth": 2,
      "strokeStyle": "solid",
      "roughness": 1,
      "opacity": 100,
      "groupIds": [],
      "frameId": null,
      "index": "aF",
      "roundness": null,
      "seed": 1011982132,
      "version": 102,
      "versionNonce": 1010611926,
      "isDeleted": false,
      "boundElements": [],
      "updated": 1751388048457,
      "link": null,
      "locked": false,
      "text": "load\nbalancer",
      "fontSize": 20,
      "fontFamily": 5,
      "textAlign": "center",
      "verticalAlign": "middle",
      "containerId": "cOM_q24FD7UmvjGdxskqs",
      "originalText": "load balancer",
      "autoResize": true,
      "lineHeight": 1.25
    }
  ],
  "appState": {
    "gridSize": 20,
    "gridStep": 5,
    "gridModeEnabled": false,
    "viewBackgroundColor": "#ffffff"
  },
  "files": {}
}