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

客官°小女子只卖身不卖艺 2022-06-13 05:11 341阅读 0赞

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

示例源码见我的github:  
[https://github.com/qq20004604/Backgammon-websocket][https_github.com_qq20004604_Backgammon-websocket]

详细交互逻辑请见下一篇博客：  
[http://blog.csdn.net/qq20004604/article/details/73835546][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、服务器端介绍 ##

### 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.  支持列出所有已开启房间列表，并且允许通过点击加入这些房间。

[websocket_1_socket.io]: http://blog.csdn.net/qq20004604/article/details/73832607
[https_github.com_qq20004604_Backgammon-websocket]: https://github.com/qq20004604/Backgammon-websocket
[http_blog.csdn.net_qq20004604_article_details_73835546]: http://blog.csdn.net/qq20004604/article/details/73835546