网页版五子棋—— WebSocket 协议

目录

·前言

一、背景介绍

二、原理解析

1.连接过程（握手）

2.报文格式

三、代码示例

1.服务端代码

（1）TestAPI 类

（2）WebSocketConfig 类

2.客户端代码

3.代码演示 

·结尾

---

·前言

        从本篇文章开始，我就来与大家分享网页版五子棋项目的一个实现过程了，这个项目一共有以下几个核心模块：用户模块、匹配模块、对战模块，后面文章会按照顺序来对每个模块进行介绍，并且此项目用到的核心技术有：Spring/SpringBoot/SpringMVC、WebSocket、MySQL、MyBatis、HTML/CSS/JS/AJAX，本篇文章来介绍一下 WebSocket 协议的内容、原理及代码示例，下面就开始本篇文章的内容介绍。

一、背景介绍

        WebSocket 是一种支持网页端与服务端保持长连接的消息推送机制，什么是消息推送机制呢？在我们传统的 web 程序中，都是属于“一问一答”的形式，如下图所示：

         这种情况下，服务器是被动的一方，如果客户端不主动发送请求，服务器就不会主动给客户端响应，我们所要编写的五子棋程序使用这种形式就会出现下面的情况：

        此时由于玩家2 没有向服务器发送请求，就会导致玩家2 收不到玩家1 的落子情况，消息推送机制就是可以让服务器主动给客户端发送数据，如果想使用传统“一问一答”的形式实现消息推送的效果也是可以做到，那就要采用“轮询”的方式，如下图所示：

         此时，在玩家1 没有落子之前，玩家2 就会以一定的时间间隔不断的向服务器发起请求，来询问玩家1 有没有落子，很明显，使用这种轮询操作的体验效果与开销与询问的时间间隔有关，关系如下：

• 如果轮询时间间隔比较长：玩家1 落子之后，玩家2 不能及时获取到落子结果，对弈的体验性降低；
• 如果轮询时间间隔比较短：虽然及时性得到改善，但是玩家2 就要浪费更多的机器资源，比如：网络带宽。

         为了更好的实现消息推送机制，在我们五子棋项目中，就引入了 WebSocket 协议，这是一种接近于 TCP 级别的通信方式，一旦建立好连接，客户端与服务器都可以主动向对方发送数据。

        基于 WebSocket 来实现的消息推送在五子棋项目中就会起到下图的效果：

         此时，玩家1 的落子请求发送给服务器后，服务器就会自动把响应推送给玩家1 与玩家2 。

二、原理解析

1.连接过程（握手）

        在我们使用网页端想尝试和服务器建立 WebSocket 连接会经过以下几个步骤：

1. 网页端先给服务器发送一个 HTTP 请求，请求中会带有特殊的 header（Connection：Upgrade、Upgrade：WebSocket）这个 header 就是告诉服务器，我们需要进行协议的升级