您是否一直在寻找创建在线的多人游戏？ 您可能已经听说过有人将您指向插座的方向。 每个人都在将React用于前端框架。 两者应该像魅力一样工作！
socket.io和React都是用于创建在线多人游戏的非常有用的工具，但是它们都具有独特的功能。
- Bot的RPGmaker MV中的自定义艺术指南：制作图块集
- 如何使用Unity中的免费Skybox套件构建自己的天空
- 类似于Ein Rogue的MIT蟒蛇和龟（最后阶段）
- 雨伞，换能器，活性水流和蘑菇（Pt.1）
- 向量-位置，速度和方向
对于我在Grace Hopper的最终项目，我和我的队友决定创建一个广受欢迎的热门游戏“黑手党”的在线版本。 对于不熟悉游戏的人来说，最重要的是要知道，每个玩游戏的人都被分配了一个角色：黑手党，平民，医生或侦探。 每个角色具有略微不同的特权。
例如，黑手党有能力杀死一个玩家一轮，而黑手党必须能够彼此交谈以选择他们想杀死谁。
同时，只有一名医生和一名侦探。 他们都是平民，因为他们试图发现黑手党，但他们拥有平民所没有的能力。 医生可以尝试在每回合中挽救一个人，而侦探则可以在每回合中怀疑一名球员，以确定他们是否是黑手党。
通过这样的游戏逻辑，我们将这些角色角色划分为不同的React组件。 因为每个玩家都遵循相同的游戏周期（白天，晚上），所以我们可以拥有一个全局的“游戏室”组件。 然后，根据用户的角色，我们可以在唯一的组件之间切换。
{time ===“ Night” && user.role ===“ Doctor” &&（
选择要保存的人
）} {time ===“ Night” && user.role ===“ Detective” &&！detectiveAnswer &&（
选择怀疑的人是黑手党
）} {时间===“夜” && user.role ===“黑手党” &&（
{messageToMafia}
黑手党领袖，在下面投票决定……在时间用完之前从下拉列表中选择！
）} {时间===“夜晚” && user.role ===“黑手党” &&（
{messageToMafia}
）} {time ===“ Night” && user.role ===“ Civilian” &&（
{facts [index] .fact}
）}
此代码段演示了我们如何使用主要组件的本地状态来获取游戏中的一天中的时间，用户的角色以及游戏中的其他玩家。 有了这些信息，我们就可以通过道具将所需的所有信息传递到与角色相关的组件中。 这使我们不必将这些小组件连接到我们的商店，因为该信息已经位于主房间组件中。
现在我们有了独特的React组件，可以处理每个玩家的移动。 现在的问题是：我们如何从每个基于角色的组件中获取相关信息到后端套接字侦听器？
首先，我们在后端有一个套接字发射，可以让所有客户端知道何时发送回数据。 我们在前端构造了事件监听器，如下所示：
componentDidMount（）{
socket.on（“ darkOverForVillagers”，（）=> {
this.props.darkOverDetective（this.state.selected）;
this.setState（{selected：“”}）;
}）;
}
我们没有让客户端在子组件中发出套接字事件，而是决定将所有套接字发射都保留在主React组件中。 这样，我们可以轻松访问游戏ID之类的信息，而无需传递信息。 通过此设置，特定于角色的React组件上的每个套接字侦听器都只调用在main room组件中初始化的函数，并通过其props传递下来，并且还通过该函数发送数据。
我们的主房间“ darkOverDetective”功能如下所示：
darkOverDetective（guessId）{
socket.emit（“ villagerChoice”，{
猜测：guessId，
gameId：this.props.game.id，
用户：this.props.user
}）;
}
这就是我们在套接字发射中使用已经在主要房间组件中加载的数据的方式。 我们将基于角色的套接字侦听器放置在仅当播放器具有特定角色时才呈现的组件中。 这样，我们避免了其他玩家无意间监听了与其角色不符的套接字事件。
我们意识到，经过几回合，同一动作我们获得了多个插座排放。 例如，在医生挽救玩家的一轮中，我们将收到多个插座发出的光。 这是因为每次安装组件时（一次安装一次），都会创建一个新的套接字侦听器以及已经存在的侦听器。
阅读了一些文档后，我们意识到我们忘记了关键步骤：一旦组件卸载，就始终卸载套接字侦听器。
现在，我们的组件如下所示：
componentDidMount（）{
socket.on（“ darkOverForVillagers”，（）=> {
this.props.darkOverDetective（this.state.selected）;
this.setState（{selected：“”}）;
}）;
}
componentWillUnmount（）{
socket.removeListener（“ darkOverForVillagers”）;
}
在React的生命周期组件中使用套接字侦听器，使我们能够根据每个玩家的角色自定义其在游戏中的能力。 这使我们可以控制信息流，而不必每次更改时都查询数据库。 我们可以完成异步操作（例如更新数据库），而无需阻止游戏流程。
在弄清楚我们的数据流之后，这两个库的结合才是我们游戏成功的关键。 如果您想了解更多信息，请在我们的GitHub中查看我们的代码：https://github.com/Mafiosas/mafiajs
