一、项目介绍

五子棋双人对战项目一个Web项目支持多个玩家联网匹配对局主要有以下三个模块

1、用户模块

把两个匹配到的玩家放到一个游戏房间中。

双方通过网页的形式进行对战。

关键技术

MVCHTML/CSS/JS/AJAXMySQL/MyBatisWebSocket

如何实现实时同步对局

客户端主动向服务器发起请求服务器收到之后返回一个响应。

如果客户端不向服务器发送请求服务器就不会给客户端返回响应。

五子棋项目是要实现实时同步对局的也就是对方落子后我这边立马能更新棋盘我落子后对方也要能立即更新棋盘。

基于之前学过的HTTP协议如果我不向服务器发起请求拿到最新棋盘数据那么我这里的页面就一直不会改变。

第一个方案明显不行如果间隔时间太短发送请求的频率会非常高也就意味着会浪费带宽浪费资源间隔时间太长就可能导致对方已经落子了但还在间隔时间中那么我就要继续等客户端发起请求才能拿到最新的数据明显也不合理。

第二个方案可行如果对方落子了服务器接收到请求主动给我返回响应这很就合理了。

“消息推送”

场景呢HTTP自身是难以实现这种消息推送效果的。

如果要想实现这样的效果就需要基于

“轮询”

也就是上面的第一种方案明显是不合理的会白白浪费很多机器资源尤其是带宽。

二、WebSocket

是HTML5下一种新的协议WebSocket协议本质上是一个基于TCP的协议

2、它实现了浏览器与服务器全双工通信能更好的节省服务器资源和带宽同时可以达到实时通讯的目的。

opcode

这个字段本身就是一个变长的一个WebSocket数据报能承载的载荷长度是非常长的。

payload

dependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-websocket/artifactId/dependency

后端代码

afterConnectionEstablished(WebSocketSession

session)

{System.out.println(建立连接);}Overridepublic

void

message.getPayload());}Overridepublic

void

handleTransportError(WebSocketSession

session,

{System.out.println(出现异常);}Overridepublic

void

afterConnectionClosed(WebSocketSession

session,

registerWebSocketHandlers(WebSocketHandlerRegistry

registry)

{registry.addHandler(testWebSocket,

/test);}

initial-scale1.0titleTestWebSocket/title

/head

idsubmit提交/buttonscript//创建websocket实例var

websocket

WebSocket(ws://127.0.0.1:8080/test);//需要挂载一些实例websocket.onopen

function()

{console.log(连接建立);}websocket.onmessage

function(e)

{console.log(连接异常);}websocket.onclose

function()

{console.log(连接关闭);}//实现点击按钮后通过WebSocket发送请求var

input

document.querySelector(#message);var

button

document.querySelector(#submit);button.onclick

function()

input.value);websocket.send(input.value);}

/script

4、HTTP是浏览器向服务器发起请求从而建立连接服务器预先并不知道这个连接。

3、联系

WebSocket在建立握手时数据是通过HTTP传输的。

但是建立连接成功后真正传输时是不需要HTTP协议的。