网页版五子棋—— 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 就是告诉服务器，我们需要进行协议的升级；
  2. 如果服务器支持 WebSocket，就会返回一个特殊的 HTTP 响应，这个响应的状态码是 101 （切换协议）；
  3. 客户端与服务器之间开始使用 WebSocket 来进行通信。

        上述的具体过程可以如下图所示：

2.报文格式

        WebSocket 的报文格式如下图所示：

        WebSocket 也是一种应用层的协议，它的下层是基于 TCP 的，下面我来对上图的部分内容做一个简单介绍：

  •  FIN：当这里的内容为 1 时，表示要断开 WebSocket 连接；
  • RSV1~3：这是保留位，一般为0；
  • opcode：这是操作码，描述了当前 WebSocket 报文是什么类型，它可以描述当前报文是一个文本帧还是一个二进制帧，是一个 ping 帧还是一个 pong 帧；
  • Payload length：这是表示当前数据报携带的数据载荷的长度，它是一个可边长的字段，一个 WebSocket 的数据报能承载的载荷长度是非常长的；
  • Payload data：这是表示当前 WebSocket 实际报文要传输的数据载荷。

三、代码示例

        下面我来实现一个简单的 WebSocket 代码，这里服务端的代码由 Java 来编写，客户端的代码由 JS 来编写。

1.服务端代码

        编写服务端代码的流程如下：

  1. 创建出一个 Spring 项目，在 Spring 中内置了 WebSocket 可以直接使用；
  2. 创建 api.TestAPI 类，这个类用来处理 WebSocket 请求，并返回响应；
  3. 创建 config.WebSocketConfig 类，这个类用来配置请求路径和 TextWebSocketHandler 之间的对应关系。

         代码结构如下所示：

（1）TestAPI 类

         在这里，继承了 TextWebSocketHandler 这个类，我们需要重写里面的几个方法，如下图所示的选中方法：         关于重写的这四个方法都是什么作用，我在代码的注释中会进行详细的标注，那么关于 TestAPI 这个类的全部代码及注释如下所示：

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketSession;
import org.springframework.web.socket.handler.TextWebSocketHandler;// 添加 @Component 注解,交给 Spring 管理
@Component
public class TestAPI extends TextWebSocketHandler {@Override// 连接就绪后就会触发这个方法来告知连接成功public void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");}@Override// 客户端/服务器 给 服务器/客户端 发送信息通过这个方法就可以接收到信息protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息" + message.getPayload());// 让服务器收到消息之后原封不动的返回session.sendMessage(message);}@Override// 传输出现异常就会触发这个方法public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("连接异常");}@Override// 如果客户端/服务器关闭连接就会执行这个方法public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("连接关闭");}
}

（2）WebSocketConfig 类

         在这里，实现了 WebSocketConfigurer 接口，用于 WebSocket 的相关配置，代码及介绍注释如下所示：

import com.example.springgobang.aip.TestAPI;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;// @EnableWebSocket 注解用来告诉 Spring 这是配置 WebSocket 的类
@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {// 自动注入@Autowiredprivate TestAPI testAPI;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {// 当客户端连接 /test 这样的路径后就会触发 testAPI 进而调用其内部的方法registry.addHandler(testAPI,"/test");}
}

2.客户端代码

        这里我们编写一个 html 页面来与服务器代码建立 WebSocket 连接，TestAPI.html 页面代码及介绍如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!--输入框--><input type="text" id="message"><!--按钮--><button id="sendButton">发送</button><script>// 创建 WebSocket 实例, 要保证这里的路径与配置的路径一致 /testlet webSocket = new WebSocket("ws://127.0.0.1:8080/test");// 连接成功后会调用这个函数webSocket.onopen = function() {console.log("连接成功");}// 收到信息后会调用这个函数webSocket.onmessage = function(e) {console.log("收到消息: " + e.data);}// 连接异常时会执行这个函数webSocket.onerror = function() {console.log("连接异常");}// 连接断开后会调用这个函数webSocket.onclose = function() {console.log("连接关闭");}// 实现点击按钮后,通过 WebSocket 发送请求let messageInput = document.querySelector('#message');let sendButton = document.querySelector('#sendButton');sendButton.onclick = function() {console.log("发送消息: " + messageInput.value);// send 函数就会把输入框中的内容发送出去webSocket.send(messageInput.value);}</script>
</body>
</html>

3.代码演示 

        此时，关于 WebSocket 的演示代码就编写完毕了，下面我们来启动程序，在电脑的浏览器上输入：http://127.0.0.1:8080/TestAPI.html 来访问 TestAPI.html 页面，然后鼠标右键点击检查，或者按键盘上的 F12 按钮，进入控制台观察日志信息，然后在输入框中输入数据点击发送就可以观察到效果，具体的效果演示如下图所示：

        此时在服务端断开连接（停止程序），结果如下图所示：

        通过上述的运行结果可以看出来，服务端可以随时调用 session.sendMessage() 方法来给客户端发送响应，从而可以实现消息推送这样的机制。

·结尾

        文章到此就要结束了，本篇文章介绍了 WebSocket 协议的一些基础原理，并用 WebSocket 进行了简单的网络编程，来演示了消息推送的效果，这是五子棋项目重要逻辑的实现依据，使用 WebSocket 就可以保证对弈双方可以实时在页面上观察到对方的落子情况，介绍完 WebSocket 之后就要开始五子棋项目的正式编写了，如果对本篇文章的内容有所疑惑，欢迎在评论区进行留言，我们下一篇文章再见吧~~~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/3764.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

【Go语言】| 第2课：变量声明与、初始化、匿名变量和作用域

【Go语言】| 第2课：变量声明与、初始化、匿名变量和作用域

&#x1f60e; 作者介绍&#xff1a;我是程序员洲洲&#xff0c;一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 &#x1f913; 同时欢迎大家关注其他专栏&#xff0c;我将分享Web前后端开发、人工智能、机器学习、深…
阅读更多...
K8S简单部署，以及UI界面配置

K8S简单部署，以及UI界面配置

准备两台服务器K8Smaster和K8Sminion 分别在两台服务器上执行以下代码 #添加hosts解析&#xff1b; cat >/etc/hosts<<EOF 127.0.0.1 localhost localhost.localdomain 192.168.45.133 master1 192.168.45.135 node2 EOF #临时关闭selinux和防火墙&#xff1b; sed …
阅读更多...
创业初期，找了个没有成本的地方当办公场地

创业初期，找了个没有成本的地方当办公场地

大家好&#xff0c;我是小悟。 如果我问你&#xff0c;创业的第一步是什么&#xff1f;或许你会说资金、团队、市场定位&#xff0c;这些确实都是创业不可或缺的因素。找办公场地也是很重要的一个环节&#xff0c;但如果我现在告诉你&#xff0c;把图书馆作为办公场地&#xf…
阅读更多...
一个记事本（可复制源码）

一个记事本（可复制源码）

htmlcssjs做了一个记事本&#xff0c;可复制源码 html <!DOCTYPE html> <html lang"zh"> <head> <meta charset"UTF-8"> <meta name"viewport" content"widthdevice-width, initial-scale1.0">…
阅读更多...
川大华西团队发表关于早期癌症研究的综述，探索AI在预测癌症进展的应用｜顶刊精析·24-11-05

川大华西团队发表关于早期癌症研究的综述，探索AI在预测癌症进展的应用｜顶刊精析·24-11-05

小罗碎碎念 这篇文章于2024-10-21发表在《Nature Reviews Cancer》&#xff0c;是一篇关于早期癌症研究的综述文章&#xff0c;标题为《Emerging strategies to investigate the biology of early cancer》。 作者角色姓名单位名称&#xff08;中文&#xff09;第一作者Ran Zho…
阅读更多...
AI 翻唱

AI 翻唱

本文记录用 So-vits-svc 4.1 训练模型全过程。 需要用到的工具 UVR&#xff1a;用于人声歌声分离&#xff0c;降噪。 (项目传送门) Slicer-gui(Audio-Slicer)&#xff1a;用于音频裁剪。(项目传送门) So-vits-svc 4.1&#xff1a;训练模型&#xff0c;GitHub项目中详细介绍…
阅读更多...
讲讲⾼可用的原则？

讲讲⾼可用的原则？

大家好&#xff0c;我是锋哥。今天分享关于【讲讲⾼可用的原则&#xff1f;】面试题。希望对大家有帮助&#xff1b; 讲讲⾼可用的原则&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 在当今信息化时代&#xff0c;随着互联网技术的快速发展&#xff0…
阅读更多...
Java 基于SpringBoot+Vue 的公交智能化系统，附源码、文档

Java 基于SpringBoot+Vue 的公交智能化系统，附源码、文档

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝12w、csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;…
阅读更多...
Leetcode 二叉树中的最大路径和

Leetcode 二叉树中的最大路径和

算法思想 这道题要求在一棵二叉树中找到路径和最大的路径。路径可以从树中任意一个节点开始&#xff0c;到任意一个节点结束&#xff0c;但路径上的节点必须是连续的。 算法使用递归的方式来遍历树中的每个节点&#xff0c;并在遍历过程中计算包含当前节点的最大路径和。具体…
阅读更多...
《2024中国城市音乐产业发展指数报告》重磅发布

《2024中国城市音乐产业发展指数报告》重磅发布

11月4日,《2024中国城市音乐产业发展指数研究报告》(以下简称“报告”)在成都首次公开发布。该报告由中国音像与数字出版协会音乐产业促进工作委员会指导编制,道略产业研究院、四川音乐学院孙洪斌教授团队深度参与。 该指数评价对象涵盖直辖市、副省级城市和省会城市等共36个城…
阅读更多...
解锁金融未来，Python带你玩转大数据！

解锁金融未来，Python带你玩转大数据！

厌倦了复杂的金融报表&#xff0c;想用数据驱动投资决策&#xff0c;却不知从何下手&#xff1f; 别担心&#xff01; 《Python金融大数据分析快速入门与案例详解》带你轻松入门&#xff0c;掌握数据分析利器&#xff0c;成为金融领域的弄潮儿&#xff01; 为什么选择这本书&…
阅读更多...
STM32 + CubeMX + 硬件SPI + W5500 +TcpClient

STM32 + CubeMX + 硬件SPI + W5500 +TcpClient

这篇文章记录一下STM32W5500TCP_Client的调试过程&#xff0c;实现TCP客户端数据的接收与发送。 目录 一、W5500模块介绍二、Stm32CubeMx配置三、Keil代码编写1、添加W5500驱动代码到工程&#xff08;添加方法不赘述&#xff0c;驱动代码可以在官网找&#xff09;2、在工程中增…
阅读更多...
template advanced

template advanced

一.仿函数再探 stl_stack/queue-CSDN博客 在priority_queue中&#xff0c;我们介绍了仿函数作为第三个参数来改变堆的类型&#xff0c;而仿函数还有其他的用处。 那么我们是否可以借助优先级队列来对日期类进行排序呢&#xff1f; 答案是可以的&#xff0c;但前提是该日期…
阅读更多...
spring源码[spring启动流程]

spring源码[spring启动流程]

spring启动流程 AnnotationConfigApplicationContext的构造方法 1.父类构造方法&#xff0c;构造一个DefaultListableBeanFactory 在调用AnnotationConfigApplicationContext的构造方法之前&#xff0c;会调用父类GenericApplicationContext的无参构造方法&#xff0c;会构造…
阅读更多...
使用Python做一个微信机器人

使用Python做一个微信机器人

使用Python制作微信机器人是一个有趣且实用的项目&#xff0c;它可以让您自动化处理微信消息、监控微信群、甚至实现智能聊天等功能。 请求参数 Header 参数 export interface ApifoxModel {"X-GEWE-TOKEN": string;[property: string]: any; } Body 参数applicat…
阅读更多...
Python-创建并调用自定义文件中的模块/函数

Python-创建并调用自定义文件中的模块/函数

背景&#xff1a;在Python编程中&#xff0c;我们常常需要创建自己的专属文件&#xff0c;以便帮助我们更高效&#xff0c;快捷地完成任务。那么在Python中我们怎么创建并调用自己文件中的模块/函数呢? 在Python中调用自定义文件&#xff0c;通常是指调用自己编写的Python模块…
阅读更多...
【C++】C++17结构化绑定、std::optional、std::variant、std::any

【C++】C++17结构化绑定、std::optional、std::variant、std::any

二十二、C17中的结构化绑定、std::optional、std::variant、std::any 本部分是一个小系列&#xff0c;介绍C17中新引入的、用来解决各种不同返回情况的、标准库新组件。 1、C的结构化绑定 结构化绑定structured bindings是C17中引入的一项特性&#xff0c;它允许开发者方便地…
阅读更多...
ntkrnlmp.exe导致蓝屏死机的解决方法

ntkrnlmp.exe导致蓝屏死机的解决方法

在使用Windows操作系统的过程中&#xff0c;用户可能会遇到由ntkrnlmp.exe文件错误引发的蓝屏死机&#xff08;Blue Screen of Death, BSOD&#xff09;问题&#xff0c;这不仅影响了日常的工作效率&#xff0c;也可能造成数据丢失的风险。本文将为您提供一系列即时排查与修复n…
阅读更多...
U3D游戏开发之骨骼动画相关

U3D游戏开发之骨骼动画相关

目录 1 作为U3D程序如何制作骨骼动画 2 骨骼动画程序代码相关 这个内容我在很久之前就想写了&#xff0c;很多项目也与骨骼动画挂钩&#xff0c;今天我们揭秘的是2D骨骼动画。来聊一聊大家可能非常关注的两个问题&#xff1a;作为程序如何制作骨骼动画&#xff1f;接到美术的骨…
阅读更多...
java:题目：用Java实现简单的自取取款操作

java:题目：用Java实现简单的自取取款操作

import java.util.Scanner; public class ATM {public static void main(String[] args){//自主取款主类Scanner scnew Scanner(System.in);System.out.println("请输入账户号码&#xff1a;");String BankAccoutsrsc.nextLine();/BankAccout3 newBankAccoutnew Bank…
阅读更多...
最新文章

Copyright @ 2022~2023