![[项目] --- 基于websocket的网页五子棋（可多用户）](http://pic.xiahunao.cn/yaotu/[项目] --- 基于websocket的网页五子棋（可多用户）)
Hello各位小伙伴们,这篇博客我将给梳理我做这个关于websocket的网页五子棋项目的过程~~~[项目代码 ] --- git仓库地址: https://gitee.com/jinhong-c/gobang项目成果展示图:1.项目的大致思路2.使用到的关键技术3.websocket的简介4.数据库设计5.匹配模块 --- 前后端交互接口6.实现匹配模块机制7.匹配算法思路8.线程安全问题9.对战模块 ---- 前后端交互接口10.部署1.项目大致思路1.)用户模块用户的登录和注册管理用户的天梯分数,比赛场数,获胜场数.....2.)匹配模块根据用户的天梯分数,实现适合的匹配机制3.)对战模块将俩个匹配到的用户放到同一个房间中,双方通过网页的形式进行下棋对战2.使用到的关键技术1.) Java2.)Spring3.)SpringBoot4.)SpringMVC5.)HTML6.)CSS7.)AJAX8.)MySQL9.)MyBatis10.)WebSocket3.WebSocket简介WebSocket其实就是实现消息推送的功能! ! !什么是消息推送呢???当玩家1在棋盘上落子时,玩家1客户端就需要主动给服务器发送一个消息,告诉服务器这个棋子落在哪个位置~~~然后服务器发送给玩家2, 玩家2也就需要得到玩家1落子的位置但是我们不能使用HTTP来实现这个功能,因为想使用HTTP实现这个功能,就需要使用轮询的机制而轮询的机制开销是比较大的,成本也比较高,因为需要客户端在指定的时间内,比如100ms,500ms等等时间内不断向服务器询问时候有消息,这样效率也是比较低,也会浪费系统资源而我们使用websocket就可以很好减少系统资源的问题,当服务器接收到某一个玩家的消息时,服务器就会自动给另一个玩家发送信息,告诉他那个玩家棋子落在了哪~~~~4.数据库设计使用数据库存储 用户登录 注册信息 天梯积分 比赛总场数 比赛获胜场数 等等....create database if not exists gobang; use gobang; drop table if exists user; create table user ( userId int primary key auto_increment, username varchar(50) unique, password varchar(50), score int, -- 天梯积分 totalCount int, -- 比赛总场数 winCount int -- 获胜场数 ); insert into user values(null, zhangsan, 123, 100, 0, 0); insert into user values(null, lisi, 123, 200, 0, 0); insert into user values(null, wangwu, 123, 300, 0, 0);5.匹配模块 --- 前后端交互接口登录时前后端接口的交互如下:注册时前后端接口的交互如下:我们需要让服务器获取当前登录的用户信息因为程序运行的过程中,用户登录后,通过客户端随时使用这个接口,访问服务器来获取自身的信息6.实现匹配模块机制匹配模块主要是让多用户,在游戏大厅中可以进行匹配,并且将实力接近的玩家匹配在一起但是匹配模块机制也是依赖消息推送机制(webSocket)当玩家发送匹配请求的时候,这个事件就已经是确定的了但是服务器应该啥时候告诉玩家,你已经匹配到另一个玩家了呢??? ---- 就需要等待匹配结束才告知正是因为服务器自己也不确定啥时候应该告诉玩家匹配的结果,因此就需要依赖消息推送机制, 当服务器匹配成功之后,就主动告诉当前排到的所有玩家 你排到了~~~webSocket可以传输文本数据, 也能传输二进制数据,所以直接设计成让websocket传输 json格式的文本数据即可匹配请求:客户端通过websocket给服务器发送一个json格式的文本数据ws://127.0.0.1:8080/findMatch{message: startMatch / stopMatch //开始匹配/结束匹配}通过websocket传输数据的时候,数据中不必携带用户身份信息,当前用户身份信息在前面登录过程中已经存储再HttpSession中了,websocket也可以拿到之前登录好的HttpSession中的信息匹配相应1(这个响应是客户端给服务器发送匹配请求之后,服务器立即返回的匹配响应(比较虚假)):ws://127.0.0.1:8080/findMatch{ok : true //匹配成功reason: //匹配如果失败,显示匹配失败的原因message: startMatch / stopMatch}匹配相应2(这个相应是正真匹配到对手之后,服务器主动推送回来的相应信息(比较真实))ws://127.0.0.1:8080/findMatch{ok: true //匹配成功reason: //匹配如果失败,显示匹配失败的原因message: matchSuccess}7.匹配算法思路目标: 从待匹配的玩家中,选出分数尽量近的玩家将所有玩家按照分数,分为三类:1.Normal score 20002.High score 2000 score 30003.VeryHigh score 3000给这三个等级,分配三个不同的队列!!!!根据当前玩家的分数, 来把这个玩家的用户信息放到对应的队列中接下来就专门搞个专门的线程,不停的扫描这个匹配队列,只要说队列里面的玩家凑成一对,把这一对玩家取出来,然后放到一个游戏的房间中即可~~~~8.线程安全问题使用synchronized进行加锁此处进行加锁的时候,要明确, 如果是多个线程访问不同的队列时候, 就不涉及线程安全问题但是多个线程访问同一个队列时候, 就需要加锁~~~~所以我们在加锁时候选取的对象,就是normalQueue, highQueue, veryHighQueue这三个队列本身9.对战模块 ---- 前后端交互接口10.部署1.将数据库中的数据给构造好 ---- 复制 IDEA 中的 dp.sql然后打开终端进入mysql,然后将数据库内容复制到云服务器mysql中进入终端mysql命令: mysql root -u -p2.微调页面 --- 使 websocket 建立连接的 url 进行调整3. 从IDEA 将文件进行打包 ---- 使用 Maven的打包工具进行打包然后将打包好的文件直接拖到服务器中即可4.运行程序,然后就可以使用外网进行访问
Hello各位小伙伴们,这篇博客我将给梳理我做这个关于websocket的网页五子棋项目的过程~~~[项目代码 ] --- git仓库地址: https://gitee.com/jinhong-c/gobang项目成果展示图:1.项目的大致思路2.使用到的关键技术3.websocket的简介4.数据库设计5.匹配模块 --- 前后端交互接口6.实现匹配模块机制7.匹配算法思路8.线程安全问题9.对战模块 ---- 前后端交互接口10.部署1.项目大致思路1.)用户模块用户的登录和注册管理用户的天梯分数,比赛场数,获胜场数.....2.)匹配模块根据用户的天梯分数,实现适合的匹配机制3.)对战模块将俩个匹配到的用户放到同一个房间中,双方通过网页的形式进行下棋对战2.使用到的关键技术1.) Java2.)Spring3.)SpringBoot4.)SpringMVC5.)HTML6.)CSS7.)AJAX8.)MySQL9.)MyBatis10.)WebSocket3.WebSocket简介WebSocket其实就是实现消息推送的功能! ! !什么是消息推送呢???当玩家1在棋盘上落子时,玩家1客户端就需要主动给服务器发送一个消息,告诉服务器这个棋子落在哪个位置~~~然后服务器发送给玩家2, 玩家2也就需要得到玩家1落子的位置但是我们不能使用HTTP来实现这个功能,因为想使用HTTP实现这个功能,就需要使用轮询的机制而轮询的机制开销是比较大的,成本也比较高,因为需要客户端在指定的时间内,比如100ms,500ms等等时间内不断向服务器询问时候有消息,这样效率也是比较低,也会浪费系统资源而我们使用websocket就可以很好减少系统资源的问题,当服务器接收到某一个玩家的消息时,服务器就会自动给另一个玩家发送信息,告诉他那个玩家棋子落在了哪~~~~4.数据库设计使用数据库存储 用户登录 注册信息 天梯积分 比赛总场数 比赛获胜场数 等等....create database if not exists gobang; use gobang; drop table if exists user; create table user ( userId int primary key auto_increment, username varchar(50) unique, password varchar(50), score int, -- 天梯积分 totalCount int, -- 比赛总场数 winCount int -- 获胜场数 ); insert into user values(null, zhangsan, 123, 100, 0, 0); insert into user values(null, lisi, 123, 200, 0, 0); insert into user values(null, wangwu, 123, 300, 0, 0);5.匹配模块 --- 前后端交互接口登录时前后端接口的交互如下:注册时前后端接口的交互如下:我们需要让服务器获取当前登录的用户信息因为程序运行的过程中,用户登录后,通过客户端随时使用这个接口,访问服务器来获取自身的信息6.实现匹配模块机制匹配模块主要是让多用户,在游戏大厅中可以进行匹配,并且将实力接近的玩家匹配在一起但是匹配模块机制也是依赖消息推送机制(webSocket)当玩家发送匹配请求的时候,这个事件就已经是确定的了但是服务器应该啥时候告诉玩家,你已经匹配到另一个玩家了呢??? ---- 就需要等待匹配结束才告知正是因为服务器自己也不确定啥时候应该告诉玩家匹配的结果,因此就需要依赖消息推送机制, 当服务器匹配成功之后,就主动告诉当前排到的所有玩家 你排到了~~~webSocket可以传输文本数据, 也能传输二进制数据,所以直接设计成让websocket传输 json格式的文本数据即可匹配请求:客户端通过websocket给服务器发送一个json格式的文本数据ws://127.0.0.1:8080/findMatch{message: startMatch / stopMatch //开始匹配/结束匹配}通过websocket传输数据的时候,数据中不必携带用户身份信息,当前用户身份信息在前面登录过程中已经存储再HttpSession中了,websocket也可以拿到之前登录好的HttpSession中的信息匹配相应1(这个响应是客户端给服务器发送匹配请求之后,服务器立即返回的匹配响应(比较虚假)):ws://127.0.0.1:8080/findMatch{ok : true //匹配成功reason: //匹配如果失败,显示匹配失败的原因message: startMatch / stopMatch}匹配相应2(这个相应是正真匹配到对手之后,服务器主动推送回来的相应信息(比较真实))ws://127.0.0.1:8080/findMatch{ok: true //匹配成功reason: //匹配如果失败,显示匹配失败的原因message: matchSuccess}7.匹配算法思路目标: 从待匹配的玩家中,选出分数尽量近的玩家将所有玩家按照分数,分为三类:1.Normal score 20002.High score 2000 score 30003.VeryHigh score 3000给这三个等级,分配三个不同的队列!!!!根据当前玩家的分数, 来把这个玩家的用户信息放到对应的队列中接下来就专门搞个专门的线程,不停的扫描这个匹配队列,只要说队列里面的玩家凑成一对,把这一对玩家取出来,然后放到一个游戏的房间中即可~~~~8.线程安全问题使用synchronized进行加锁此处进行加锁的时候,要明确, 如果是多个线程访问不同的队列时候, 就不涉及线程安全问题但是多个线程访问同一个队列时候, 就需要加锁~~~~所以我们在加锁时候选取的对象,就是normalQueue, highQueue, veryHighQueue这三个队列本身9.对战模块 ---- 前后端交互接口10.部署1.将数据库中的数据给构造好 ---- 复制 IDEA 中的 dp.sql然后打开终端进入mysql,然后将数据库内容复制到云服务器mysql中进入终端mysql命令: mysql root -u -p2.微调页面 --- 使 websocket 建立连接的 url 进行调整3. 从IDEA 将文件进行打包 ---- 使用 Maven的打包工具进行打包然后将打包好的文件直接拖到服务器中即可4.运行程序,然后就可以使用外网进行访问
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
