admin管理员组文章数量:1590339
网页版五子棋对战
1.用户模块
用户的注册和登录
管理用户的天梯分数、比赛场数、获胜场数等信息
2.匹配模块
依据用户的天梯积分,实现匹配机制
3.对战模块
把两个匹配到的玩家放到一个游戏房间中,双方通过网页的形式来进行对战比赛
用到的关键技术点:
Java、Spring/Spring Boot/Spring MVC、HTML/CSS/AJAX、MySQL/MyBatis、WebSocket
我们之前学习过的服务器开发,主要是这样的模型:
客户端主动向服务器发起请求,服务器收到之后,返回一个响应。
如果客户端不主动发起请求,服务器是不能主动联系客户端的
我们是否需要,服务器主动给客户端发消息这样的场景呢?
需要!!“消息推送”
当前已有的知识,主要是HTTP.HTTP自身难以实现这种消息推送效果的
HTTP要想实现类似的效果,就需要基于“轮询”的机制
很明显,像这样的轮询操作,开销是比较大的,成本也是比较高的
如果轮询间隔时间长,玩家1落子之后,玩家2不能及时拿到结果
如果轮询间隔时间短,虽然即使性得到改善,但是玩家2 不得不浪费更多的机器资源(尤其是带宽)
因此,websocket就是一个消息推送机制
websocket报文格式
websocket也是一个应用层的协议,下层是基于TCP的~
opcode描述了当前这个websocket报文是啥类型
表示当前这是一个文本帧还是一个二进制帧
表示当前这是一个ping帧,还是一个pong帧
payload len含义表示的是当前数据报携带的数据载荷的长度。这个字段本身就是一个变长的,一个websocket数据报能承载的载荷长度是非常长的
websocket握手过程(建立连接的过程)
使用网页端,尝试和服务器建立websocket连接
网页端就会先给服务器发起一个HTTP请求 这个HTTP请求中会带有特殊的Header
Connection:Upgrade
Upgrade:Websocket
这两个header其实就是告知服务器,我们要进行协议升级
如果服务器支持websocket,就会返回一个特殊的HTTP响应 这个响应的状态码是101(切换协议)
客户端和服务器之间就开始使用websocket来进行通信了
实现一个简单的websocket代码
编写服务器端(Java)
编写客户端(JS)
通过TestAPI重写了几个类,
光有这几个类还不够 需要把这几个类关联到路径
用户模块
完成注册登录,以及用户分数管理
使用数据库来保存上述用户信息
使用MyBatis来连接并操作数据库
1.修改Spring的配置文件,使数据库可以被连接上(application.yml)
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false
username: root
password: zy19991227
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
mapper-locations: classpath:mapper/**Mapper.xml
2.创建实体类。用户 User
3.创建Mapper接口
针对数据库进行哪些具体的操作
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvvSwfi5-1688815713045)(C:\Users\zyx\AppData\Roaming\Typora\typora-user-images\image-20230329102600202.png)]
4.实现MyBatis的相关xml配置文件,来自动实现数据库操作
约定前后端交互接口
登录的请求和相应
请求
POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=zhangsan&password=123
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username:'zhangsan',
score: 1000,
totalCount: 0,
winCount: 0
}
如果登录失败,就返回一个无效的user对象。
如果这里的每个属性都是空的,像userId => 0
注册的请求和相应
请求
POST/register HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=zhangsan&password=123
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username:'zhangsan',
score: 1000,
totalCount: 0,
winCount: 0
}
这个前后端交互的接口,在约定的时候,是有很多种交互方式的
这里约定好了之后,后续的前端或后端代码,都要严格地遵守这个约定来写代码
从服务器获取到当前登录的用户信息的请求和响应
程序运行过程中,用户登陆了之后,让客户端随时通过这个接口,来访问服务器,获取自身的信息
请求
GET/userInfo HTTP/1.1
响应
HTTP/1.1 200 OK
Content-Type: application/json
{
userId: 1,
username:'zhangsan',
score: 1000,
totalCount: 0,
winCount: 0
}
编写服务器代码
package com.example.java_gobang.api;
import com.example.java_gobang.model.User;
import com.example.java_gobang.model.UserMapper;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletMapping;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
@RestController
public class UserAPI {
@Resource
private UserMapper userMapper;
@PostMapping("/login") //请求使用的是POST
@ResponseBody //将java对象转为json格式的数据
public Object login(String username, String password, HttpServletRequest req){
//关键操作:根据username去数据库中进行查询
//如果能找到匹配的用户,并且密码也一致,就认为登陆成功
User user = userMapper.selectByName(username);
System.out.println("[login] user=" + username);
if(user == null || !user.getPassword().equals(password)){
//登陆失败
System.out.println("登陆失败");
return new User();//无效对象
}
HttpSession httpSession = req.getSession(true);
//参数true的含义:会话存在直接返回,会话不存在就创建一个
//参数false的含义:会话存在直接返回,会话不存在就返回空
httpSession.setAttribute("user",user);
return user;
}
@PostMapping("/register")
@ResponseBody
public Object register(String username,String password){
try {
User user = new User();
user.setUsername(username);
user.setPassword(password);
userMapper.insert(user);
return user;
} catch (org.springframework.dao.DuplicateKeyException e){
User user = new User();
return user;
}
}
@GetMapping("/userInfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest req) {
try {
HttpSession httpSession = req.getSession(false);
User user = (User) httpSession.getAttribute("user");
return user;
} catch (NullPointerException e){
return new User();
}
}
}
使用Postman测试登录:
用户名和密码都正确
用户名和密码不正确(返回空值)
使用Postman测试注册:
使用Postman测试用户信息:
编写 登录/注册 功能的前端页面
login.html
<!DOCTYPE html>
版权声明:本文标题:网页五子棋对战——SSM框架 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1728087775a1144926.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论