React Redux + Socket.IO + 创建 React App答案

【问题标题】：React Redux + Socket.IO + Create React AppReact Redux + Socket.IO + 创建 React App
【发布时间】：2017-07-18 19:48:34
【问题描述】：

首先我想说这是我第一个使用 React Redux 和 Socket.IO 的项目。我也不知道构建正确的构建、启动和测试脚本需要什么。我对 webpack 的了解也非常有限，我只觉得添加或删除加载器很舒服。我发现 create react app 中的很多预配置非常有用；开玩笑，热加载，构建输出。如你所知 react-create-app 使用 webpackdev 服务器。但是，对于我的应用程序的服务器端部分，我有一个类似于此配置的 socket.io 服务器。

import Server from 'socket.io';

export function startServer(store) {
  const io = new Server().attach(8090);

  store.subscribe(
    () => io.emit('state', store.getState().toJS())
  );

  io.on('connection', (socket) => {
    socket.emit('state', store.getState().toJS());
    socket.on('action', store.dispatch.bind(store));
  });

}

基本上，我正在寻找可以帮助我将 socket io 和 redux 与 react-create-app 的最佳部分结合起来的资源甚至更好的解释。

【问题讨论】：

标签： reactjs socket.io webpack redux create-react-app

【解决方案1】：

我最终完全摆脱了 webpack 并删除了脚本。我将测试脚本重写为一个简单的笑话命令。按照此完成 socket.io 配置。 https://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html

您还可以看到应用程序现在的样子。 https://github.com/donleyac/react-card-engine

【讨论】：

【解决方案2】：

对于客户端，我建议按照本指南管理项目。

Redux guide

对于 socket.io 集成，我建议使用我的两个 redux 中间件，它们允许您使用 redux 范例订阅事件和发出消息。

socket.io-emitter-middleware

socket.io-subscriber-middleware

您可以通过以下命令安装它们

npm i socket.io-emitter-middleware

npm i socket.io-subscriber-middleware

并按照 github 文档中的 README 进行使用。

服务器部分可以顺利进行。您不能将 create-react-app 环境与客户端/服务器架构混淆。 create-react-app 环境只是“客户端”。

您需要通过 socket.io 将您的客户端 react 应用程序与 node.js 服务器连接起来。

我建议你从 socket.io 文档开始。

Socket.io Introduction

【讨论】：