websocket入门（2）——使用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技术，建立长连接，实现五子棋网络对战功能。

具有以下功能：

1. 分为大厅（默认位置）及独立房间（新建房间或者进入房间后的位置）；
2. 不同的独立房间互不影响；
3. 支持大厅聊天；
4. 支持房间内部聊天；
5. 实时更新当前全部在线人数、以及开启的房间数、服务器时间；
6. 无人房间自动删除；
7. 离开房间时对玩家、以及同房间内玩家自动提示；
8. 支持三种角色：黑色下棋方、白色下棋方、观战者（不限人数）；
9. 支持房间内角色自由切换；
10. 黑方和白方同时存在时可以开始游戏；
11. 记录游戏的上一局胜利者；
12. 支持胜利条件判定，并提示胜利原因；
13. 支持一局游戏结束后可以重新开始；
14. 自动标注上一子下的地方；
15. 可以从房间内返回大厅；
16. 可以自动更换新名字（目前是随机生成，但修改为自定义只需要添加一个输入框即可，修改一下客户端逻辑即可）；

3、服务器端介绍

--------------------- 本文来自 qq20004604 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/qq20004604/article/details/73833179?utm_source=copy

3.1 socket.io

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

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

3.2 /socketIO/socketIO.js

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

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

1. models/fun：公有函数模块；
2. models/roomList：五子棋功能核心模块，具体在下面细说；
3. socket.io：socket.io库，长连接实现的模块；

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

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

3.3 /models/roomList.js

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

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

包括以下方法：

1. 创建空房间；
2. 加入房间；
3. 退出房间；
4. 清除空的游戏房间；
5. 获取当前开启中的房间数；
6. 通过用户，查找用户角色，用户所在的房间的信息，用户所在房间的ID；
7. 房间内用户角色切换（黑、白、观战方切换）；
8. 向本房间内所有人通报消息；
9. 遍历房间内所有用户，并执行回调函数；
10. 遍历每个不在游戏房间中的人（即在游戏大厅）；
11. 遍历每个房间的每个人，向其更新其所在房间的信息；
12. 对当前房间的所有人更新本房间的信息（11和2中会调用）；
13. 传入用户当前下棋的这一步，返回是否可以下棋；
14. 判定当前房间是否有胜利者（如果有，则会在13中检测谁是胜利者）；

私有函数三个：

1. 判断当前下棋情况是否符合胜利条件；
2. x,y坐标和索引坐标转换函数；
3. 过滤越界情况的过滤器；

3.4 /models/fun.js

公有函数文件。

内含以下私有方法：

1. 格式化时间（年-月-日 时:分:秒）
2. 格式化时间（时:分:秒）
3. 在字符串开始补足0（用于格式化时间使用）

暴露以下公有方法：

1. 获取当前时间（年-月-日 时:分:秒）
2. 获取当前时间（时:分:秒）
3. 获取userAgent（通过改变key可以获取其他的）
4. 获取ip
5. 随机生成名字

注：公有方法的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基本结构如下：

1. 顶部：个人信息和房间管理；
2. 中部：聊天室和游戏页面；
3. 底部：服务器状态；

4.3 Backgammon.js

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

内含以下内容：

1. SETTING图片大小配置、ROOMINFO房间信息、USERINFO玩家信息
2. init函数：初始化函数，调用本方法完成初始化；
3. selector函数：仿jQuery选择器函数（简易版）；
4. startEvent函数：连接建立后初始化名称（由于不明原因，在连接建立后直接发起websocket请求会导致连接断开，所以只能先这么处理）；
5. listenSocketEvent函数：websocket的服务器监听和响应内容都写于这里；
6. listenDomclickEvent函数：DOM事件都写于这里；
7. getName函数：随机生成姓名；
8. getNowDate函数：获取客户端当前时间（掉线时会调用这个显示掉线时间）；
9. initBoard函数：棋盘初始化，会生成棋盘的DOM，以及假如本棋局已经开始，会继续生成棋盘内已下棋的棋子；
10. createBox函数：创建一个div，默认带”box”类，参数一会额外添加其他类，参数二会添加索引；
11. toMakePieceWhenHasStart函数：根据下棋记录，在棋盘上生成多个棋子（需要完整的从第一步开始的下棋记录）；
12. createPiece函数：创建新的棋子，参数一是棋子位置的索引，参数二是棋子在下棋序列数组里的索引，数组里0黑1白；
13. resetRoomInfo函数：重置房间信息（离开房间时调用）；
14. checkerboardClick函数：监听当前棋子下在哪一个位置；
15. checkCanPutPiece函数：判断能否下这一步棋（服务器端会二次校验）；
16. GameOver函数：游戏结束时调用；
17. changeColor函数：告知用户当前下棋人是谁；

4.4 Backgammon.css

样式文件啦，显然咯。

4.5 .png结尾的文件

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

5、反作弊

本游戏提供反作弊功能。

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

1. 将下棋步骤存放在服务器端，在下棋的时候双端验证（包括本地和服务器端），如果服务器端验证失败，是不允许下这一步棋的；
2. 胜利条件判断的条件由服务器端在下完一步棋之后进行判定，只有判定通过后，才会由服务器端通报游戏结束，并播报胜利的原因；

6、待改进功能

1. 自定义修改名字：其实服务器端是支持的，但是本地端我为了省事使用的是随机生成名字的方式；
2. 账号注册、登录和战绩记录：无非是添加一个注册、登录、游戏结束后记录游戏结果的功能，不过这样的话，游戏过程中就不允许角色切换了，如果有人长时间退出游戏，那么需要直接判定胜负。功能不难，就是有点麻烦，还有刷成绩的潜在问题；
3. 五毛钱特效：比如切换角色时，给一个提示；比如四子连珠时，给个提示；再比如，胜利的时候，给个提示；等等。
4. 聊天和游戏窗口合并：比如左边聊天，右边游戏窗口，但是本宝宝缺乏设计天赋……
5. 支持列出所有已开启房间列表，并且允许通过点击加入这些房间。

转自：https://blog.csdn.net/qq20004604/article/details/73833179?utm_source=copy