五子棋online---React.js+Socket.io+Node.js_react五子棋加入websocket功能-优快云博客

本文介绍了作者使用React.js、Socket.io和Node.js实现五子棋在线对战的过程。首先，作者完成了React的单机版五子棋，随后通过Socket.io将其升级为联机对战版。在开发中，作者遇到了React编译问题并分享了解决方案，同时提供了后台Node.js简单代码示例，以及项目的GitHub链接，供感兴趣的人参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

这里写图片描述

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

这里写图片描述

其间遇到了通过grunt编译react的问题，记录在http://blog.youkuaiyun.com/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,})
             console.log(