Question

现在我们已经创建好了客户端的 Redux 应用，我们接下来将讨论如何让其与我们之前开发的服务端应用进行对接。

服务端已经准备好接受 socket 连接，并为其进行投票数据的发送。而我们的客户端也已经可以使用 Redux Store 很方便的
接受数据了。我们剩下的工作就是把它们连接起来。

我们需要使用 socket.io 从浏览器向服务端创建一个连接，我们可以使用 socket.io-client 库 来完成
这个目的：

npm install --save socket.io-client

这个库赋予了我们连接 Socket.io 服务端的能力，让我们连接之前写好的服务端，端口号 8090（注意使用和后端匹配的端口）：

//src/index.jsx

import React from 'react';
import Router, {Route, DefaultRoute} from 'react-router';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import io from 'socket.io-client';
import reducer from './reducer';
import App from './components/App';
import {VotingContainer} from './components/Voting';
import {ResultsContainer} from './components/Results';

const store = createStore(reducer);
store.dispatch({
  type: 'SET_STATE',
  state: {
    vote: {
      pair: ['Sunshine', '28 Days Later'],
      tally: {Sunshine: 2}
    }
  }
});

const socket = io(`${location.protocol}//${location.hostname}:8090`);

const routes = <Route handler={App}>
  <Route path="/results" handler={ResultsContainer} />
  <DefaultRoute handler={VotingContainer} />
</Route>;

Router.run(routes, (Root) => {
  React.render(
    <Provider store={store}>
      {() => <Root />}
    </Provider>,
    document.getElementById('app')
  );
});

你必须先确保你的服务端已经开启了，然后在浏览器端访问客户端应用，并检查网络监控，你会发现创建了一个
WebSockets 连接，并且开始传输 Socket.io 的心跳包了。