五子棋online---React.js+Socket.io+Node.js

前段时间，在做项目上线前的准备，有bug就改bug，没bug就优化一些性能，自己也有时间胡乱看一些东西。群里都说React火到没朋友，就跟着React的Tutorial敲了一遍，感觉它的组织形式跟之前的jq和ng都不一样，光说不练假把式，就模仿turorial做个五子棋吧，正好朋友们也喜欢玩，就说干就干。

很快单机版的五子棋就完事了，感觉很不爽啊，不切合实际，五子棋明明是对战的嘛。完事了就迅速做成联机对战版的。因为涉及到了实时通讯，在朋友的推荐下了解到了socket.io这个基于websocket的实时通讯工具，非常的nice，跟着它的getting-started走一遍，就能上手了。

其间遇到了通过grunt编译react的问题，记录在http://blog.csdn.net/baidu_35407267/article/details/54173001，界面很简单，jsx代码较长，就贴个主要的component。

//主棋盘
class Board extends React.Component{
   
  constructor() {
    super();
    this.state = {
      'styleArr': Array(225).fill('unit'),//初始化每个坐标
      isBlacksTurn:true,//记录此时黑方走棋还是白方走棋
      point:-1,//下棋的坐标
      urBlack:null,//初始化本玩家的角色，黑方还是白方
      online:{}//记录在线人数
    };
  }
  componentWillMount() {
    var that = this;
    socket.on('role', function(msg){
        if(msg.hasOwnProperty('role') && msg.role){
             that.setState({
  urBlack: true,})