项目地址，已上传github ——>
client端使用简单的h5+js实现了棋局的总体布局。 server端使用node的socket.io模块与客户端进行数据交互，棋子的落点和输赢校验均是在server端完成。
五子棋ui界面请见..
client端的界面这里就不做过多解释了，只要稍微懂点h5就可以自行去这里 下载源代码观看，因为今天的主题主要是socket.io这一块，所以本章只概述client和server是如何通过tcp连接进行交互的。
首先先带大家看一下目录结构
| server.js (socket服务器)
| gobang-ui.html (是玩家下棋页面)
| index.html (是用户登陆界面)
| home.html (是用户大厅界面, 用来匹配等待的 如果在线人数少于2人, 则匹配失败, 并会返回错误信息)
| game.html (client端程序的入口，内嵌iframe来显示各个页面，通过改变iframe的src属性，来达成伪页面跳转)
| img (图片资源文件夹)
| tou.jpg (棋盘界面用户的头像，因为登录界面只要输入用户名就可以开始游戏了，所以所有用户的头像都是一样的)game.html主界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
</style>
<!-- 引入cdn上的socket.io库 -->
<script src="https://cdn.bootcss.com/socket.io/2.1.0/socket.io.js"></script>
</head>
<body>
<!-- 这里是程序的入口，通过js改变src属性，来切换页面 -->
<iframe id="game" src="index.html" width="100%" height="100%" scrolling="no"></iframe>
</body>
</html>为什么我们要用嵌入iframe改变src属性的方式来制造页面跳转的现象？因为页面的每一次跳转或刷新都会使socket连接断开。就好像http中的request请求一样，页面每次所以我们应尽量避免页面跳转这个操作。
// 这行代码表示client端对server端进行第一次连接
var socket = io('ws://localhost:3000')在index.html也就是用户的登录界面
<!-- 这是用户登录的按钮 -->
<div onclick="login()">开始游戏</div>当点击了这个按钮之后，它会触发js中的login方法,但这个方法并不会直接去连接server，因为socket连接在game.html中，所以目前来看，这个页面只是game.html的子页面，这个方法在判断input中的value是否为空后，立即通过全局对象parent调用的父页面(game.html)中的login方法
// index.html中的login方法
