websocket入门（2）——使用socket.io实现网络对战版五子棋

socket.io基本介绍见我的博客 websocket入门（1）——初识socket.io

示例源码见我的github:

https://github.com/qq20004604/Backgammon-websocket

详细交互逻辑请见下一篇博客：

http://blog.csdn.net/qq20004604/article/details/73835546

五子棋网络对战版说明

1、安装与运行

请完整的down下除了node_modules文件夹以外的所有文件，然后在控制台运行

npm install

来进行安装。

安装完毕后，通过

npm start

命令来运行服务器，然后通过

127.0.0.1

来访问页面。

如果浏览器不支持es6，那么需要通过babel转码Backgammon.js后运行。

2、简单介绍

通过websocket技术，建立长连接，实现五子棋网络对战功能。

具有以下功能：

分为大厅（默认位置）及独立房间（新建房间或者进入房间后的位置）；

不同的独立房间互不影响；

支持大厅聊天；

支持房间内部聊天；

实时更新当前全部在线人数、以及开启的房间数、服务器时间；

无人房间自动删除；

离开房间时对玩家、以及同房间内玩家自动提示；

支持三种角色：黑色下棋方、白色下棋方、观战者（不限人数）；

支持房间内角色自由切换；

黑方和白方同时存在时可以开始游戏；

记录游戏的上一局胜利者；

支持胜利条件判定，并提示胜利原因；

支持一局游戏结束后可以重新开始；

自动标注上一子下的地方；

可以从房间内返回大厅；

可以自动更换新名字（目前是随机生成，但修改为自定义只需要添加一个输入框即可，修改一下客户端逻辑即可）；

3、服务器端介绍

3.1 socket.io

nodejs服务器端socket.io库，在socketIO文件夹里的socketIO.js文件中引入。

效果是实现服务器端的长连接功能。

3.2 /socketIO/socketIO.js

服务器端通信事件的处理逻辑所在。

本文件内引入了三个模块：

models/fun：公有函数模块；

models/roomList：五子棋功能核心模块，具体在下面细说；

socket.io：socket.io库，长连接实现的模块；

本函数在引入socket.io库后，和http服务器绑定（因为使用的是express服务器），然后通过返回的io实例来监听用户连接和绑定事件。

另外，由于socket.io引入的实例，需要通过http服务器进行绑定后才有效，因此模块导出init函数，在bin文件夹中的www文件引入，并调用，实现事件绑定监听功能。

3.3 /models/roomList.js

实现五子棋功能的核心模块。

本页面里以RoomList为构造函数，然后相关功能作为RoolList的扩展函数来实现。

包括以下方法：

创建空房间；

加入房间；

退出房间；

清除空的游戏房间；

获取当前开启中的房间数；

通过用户，查找用户角色，用户所在的房间的信息，用户所在房间的ID；

房间内用户角色切换（黑、白、观战方切换）；

向本房间内所有人通报消息；

遍历房间内所有用户，并执行回调函数；

遍历每个不在游戏房间中的人（即在游戏大厅）；

遍历每个房间的每个人，向其更新其所在房间的信息；

对当前房间的所有人更新本房间的信息（11和2中会调用）；

传入用户当前下棋的这一步，返回是否可以下棋；

判定当前房间是否有胜利者（如果有，则会在13中检测谁是胜利者）；

私有函数三个：

判断当前下棋情况是否符合胜利条件；

x,y坐标和索引坐标转换函数；

过滤越界情况的过滤器；

3.4 /models/fun.js

公有函数文件。

内含以下私有方法：

格式化时间（年-月-日 时:分:秒）

格式化时间（时:分:秒）

在字符串开始补足0（用于格式化时间使用）

暴露以下公有方法：

获取当前时间（年-月-日 时:分:秒）

获取当前时间（时:分:秒）

获取userAgent（通过改变key可以获取其他的）

获取ip

随机生成名字

注：公有方法的345并没有被使用。

3.5 /app.js

express的路由配置文件

3.6 /routerManager.js

路由管理文件。由于本DEMO只有五子棋，无需特别配置路由，因此内部没有写额外逻辑；

3.7 /views

模板文件，当访问错误等情况时，由express渲染后生效。

4、客户端介绍

4.1 socket.io.js

客户端的websocket实现库。

在这个里面，封装了websocket的实现功能。

别问我里面的原理是啥，我目前只会用┑(￣Д ￣)┍

4.2 index.html

五子棋的html文件。

通过本文件引入样式文件、socket.io.js文件、以及五子棋客户端逻辑。

DOM基本结构如下：

顶部：个人信息和房间管理；

中部：聊天室和游戏页面；

底部：服务器状态；

4.3 Backgammon.js

五子棋客户端逻辑实现文件。

内含以下内容：

SETTING图片大小配置、ROOMINFO房间信息、USERINFO玩家信息

init函数：初始化函数，调用本方法完成初始化；

selector函数：仿jQuery选择器函数（简易版）；

startEvent函数：连接建立后初始化名称（由于不明原因，在连接建立后直接发起websocket请求会导致连接断开，所以只能先这么处理）；

listenSocketEvent函数：websocket的服务器监听和响应内容都写于这里；

listenDomclickEvent函数：DOM事件都写于这里；

getName函数：随机生成姓名；

getNowDate函数：获取客户端当前时间（掉线时会调用这个显示掉线时间）；

initBoard函数：棋盘初始化，会生成棋盘的DOM，以及假如本棋局已经开始，会继续生成棋盘内已下棋的棋子；

createBox函数：创建一个div，默认带”box”类，参数一会额外添加其他类，参数二会添加索引；

toMakePieceWhenHasStart函数：根据下棋记录，在棋盘上生成多个棋子（需要完整的从第一步开始的下棋记录）；

createPiece函数：创建新的棋子，参数一是棋子位置的索引，参数二是棋子在下棋序列数组里的索引，数组里0黑1白；

resetRoomInfo函数：重置房间信息（离开房间时调用）；

checkerboardClick函数：监听当前棋子下在哪一个位置；

checkCanPutPiece函数：判断能否下这一步棋（服务器端会二次校验）；

GameOver函数：游戏结束时调用；

changeColor函数：告知用户当前下棋人是谁；

4.4 Backgammon.css

样式文件啦，显然咯。

4.5 .png结尾的文件

图片资源，比如棋盘的图片（靠这些拼接起来的），棋子的图片（黑和白两种）等。

5、反作弊

本游戏提供反作弊功能。

反作弊功能的实现核心原理是：

将下棋步骤存放在服务器端，在下棋的时候双端验证（包括本地和服务器端），如果服务器端验证失败，是不允许下这一步棋的；

胜利条件判断的条件由服务器端在下完一步棋之后进行判定，只有判定通过后，才会由服务器端通报游戏结束，并播报胜利的原因；

6、待改进功能

自定义修改名字：其实服务器端是支持的，但是本地端我为了省事使用的是随机生成名字的方式；

账号注册、登录和战绩记录：无非是添加一个注册、登录、游戏结束后记录游戏结果的功能，不过这样的话，游戏过程中就不允许角色切换了，如果有人长时间退出游戏，那么需要直接判定胜负。功能不难，就是有点麻烦，还有刷成绩的潜在问题；

五毛钱特效：比如切换角色时，给一个提示；比如四子连珠时，给个提示；再比如，胜利的时候，给个提示；等等。

聊天和游戏窗口合并：比如左边聊天，右边游戏窗口，但是本宝宝缺乏设计天赋……

支持列出所有已开启房间列表，并且允许通过点击加入这些房间。