当前位置： 首页 > news >正文

项目-双人五子棋对战: websocket的讲解与使用 (1)

news 2025/7/9 7:07:26

项目介绍

接下来, 我们将制作一个关于双人五子棋的项目, 话不多说先来理清一下需求.

1.用户模块

用户的注册和登录

管理用户的天梯分数, 比赛场数, 获胜场数等信息.

2.匹配模块

依据用户的天梯积分, 实现匹配机制.

3.对战模块

把两个匹配到的玩家放到同一个游戏房间中, 双方通过网页的形式来进行对战比赛.

可见这个项目是围绕这三层为中心来写的, 以后的项目开发也是围绕着这三个方面展开.

核心问题

之前在学网络的时候, 我们也学到客户端-服务器这一个经典结构, 即客户端向服务器发送请求, 服务器构造响应, 服务器将响应返回给客户端.(应用的对应也是HTTP协议)

但是在这个项目的对战模块中, 有一个核心的问题: 我们都知道, 当在进行五子棋对战时, 一方落子, 不仅需要在自己的客户端中显示, 也要在对手的客户端中显示.  但是关键是, 对手的客户端没有发起请求, 那么服务器怎么响应?

因此, 我们是需要服务器主动给客户端响应的模式的, 也叫消息推送.

当前我们学习过的HTTP其实也能完成这样的功能, 主要是通过轮询的方式, 即每过一定时间客户端就主动给服务器发送一个请求, 以获取响应. 但这样也有一些问题:

1. 轮询时间设置的比较短, 相应消耗的带宽资源就比较多(浏览器需要源源不断地向服务器发送http请求, 而http请求可能会带有较长的头部, 真正传输的数据可能只是很小一部分, 这样就会浪费很多带宽资源).

2. 轮询时间设置的比较长, 就会导致延迟较高, 影响用户体验.

那么有没有一种合适的方式来解决这个问题呢? 当然有, WebSocket. 

WebSocket

WebSocket工作原理

WebSocket是一个持久化的协议, 使得客户端与服务器之间的数据交换变得更简单, 它允许服务器主动向客户端推送数据, 在WebSocketAPI中, 浏览器和服务器只需要一次握手, 两者就可以创建持久性的连接, 并进行双向数据传输.

WebSocket其实和http协议没有什么关系, 只是为了兼容浏览器的握手规范, 也是说他是http协议上的一种补充;

在WebSocket的握手过程中, 首先使用网页端, 尝试和服务器建立WebSocket连接. 网页端会先给服务器发起一个HTTP请求, 这个HTTP请求中会带有特殊的header: Upgrade和Connection. (即Connection: Upgrade, Upgrade: WebSocket), 这两个header其实就是在告知服务器, 我们要进行协议升级,  如果服务器支持WebSocket, 就会返回一个特殊的HTTP响应, 这个响应的状态码是101.(切换协议), 客户端和服务器之间就使用WebSocket开始通信.

这样就只需要一次HTTP请求, 就可以源源不断地传送消息, 这也叫消息推送场景. 

WebSocket在项目中的使用?

前后端介绍

WebSocket在前端JS和后端都发挥了重要作用, 实现了实时, 双向的通信. 前端JS通过WebSocket API和后端服务器建立连接, 发送和接收数据以及处理各种事件; 后端服务器负责监听连接, 处理数据, 推送数据以及管理连接资源. 

WebSocket的生命周期

onOpen: 连接建立时触发;

onMessage: 客户端接收到服务器数据时触发;

onError: 发生错误时触发;

onClose: 连接关闭时触发. 

在后端中主要是重写以下四个方法以实现上述:

//websocket生命周期的演示
@Component
public class TestAPI extends TextWebSocketHandler {/*** 当一个新的websocket连接建立时, 这个方法被调用* webSocketSession对象表示一个WebSocket会话, 用于发送和接收消息* 该方法在连接成功后打印一条消息* @param session* @throws Exception*/@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");}/*** 当websocket收到文本消息时, 这个方法被调用* message包含了收到的消息* 该方法在收到消息后打印消息的内容* 然后, 它将收到的消息原封不动返回客户端, 这是一种回显机制* @param session* @param message* @throws Exception*/@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息: " + message.getPayload());//让服务器收到数据之后, 把数据原封不动地返回回去session.sendMessage(message);}/*** websocket传输过程中出现错误时, 这个方法被调用* exception包含了异常信息* 该方法在发生错误时打印一条信息* @param session* @param exception* @throws Exception*/@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("连接异常");}/*** 当wesocket连接正常关闭时, 这个方法被调用* status表示关闭的状态和原因* 关闭连接时打印一条信息* @param session* @param status* @throws Exception*/@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("连接关闭");}
}

在前端中也是通过类似的方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>TestAPI</title>
</head>
<body><input type="text" id="message"><button id="submit">提交</button><script>//创建websocket实例, 并尝试与服务端127.0.0.1:8080进行连接let 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 input = document.querySelector("#message");let button = document.querySelector("#submit");button.onclick = function() {console.log("发送信息: " + input.value);websocket.send(input.value);}</script>
</body>
</html>

我们来运行一下上面的代码, 观察现象:

当我们打开客户端页面时:

 我们在客户端发送一条信息:ddd

 

关闭服务器:

 

可以观察到一次顺利的WebSocket通信, 以后这块会重点使用.

相关文章：

项目-双人五子棋对战: websocket的讲解与使用 (1)

项目介绍 接下来, 我们将制作一个关于双人五子棋的项目, 话不多说先来理清一下需求. 1.用户模块 用户的注册和登录 管理用户的天梯分数, 比赛场数, 获胜场数等信息. 2.匹配模块 依据用户的天梯积分, 实现匹配机制. 3.对战模块 把两个匹配到的玩家放到同一个游戏房间中, 双方通…...

编程日记 2024/6/3 19:58:20

性能飙升50%，react-virtualized-list如何优化大数据集滚动渲染

在处理大规模数据集渲染时&#xff0c;前端性能常常面临巨大的挑战。本文将探讨 react-virtualized-list 库如何通过虚拟化技术和 Intersection Observer API&#xff0c;实现前端渲染性能飙升 50% 的突破&#xff01;除此之外&#xff0c;我们一同探究下该库还支持哪些新的特性…...

编程日记 2024/6/3 19:57:19

颠覆传统：探索Web3对传统计算机模式的冲击

随着Web3技术的崛起&#xff0c;传统计算机模式正面临着前所未有的冲击与挑战。Web3作为下一代互联网的代表&#xff0c;以其去中心化、安全可信的特性&#xff0c;正在颠覆着传统计算机模式的种种假设和局限性。本文将深入探讨Web3对传统计算机模式的冲击&#xff0c;并探索其…...

编程日记 2024/6/3 19:56:18

最适合上班族和宝妈的兼职副业，一天500多，小众副业项目

近年来&#xff0c;地方特色小吃逐渐受到人们的热烈追捧&#xff0c;尤其是在直播的助力下&#xff0c;许多地方的特色小吃得以走进大众视野&#xff0c;吸引了大量流量和人气。因此&#xff0c;有很大一部分商家和创业者看准了这一商机&#xff0c;纷纷投身于地方特色小吃的制…...

编程日记 2024/6/3 19:55:17

HFish蜜罐实践：网络安全防御的主动出击

引言 随着网络攻击手段的不断演进&#xff0c;传统的被动防御策略已难以应对复杂多变的安全威胁。HFish蜜罐作为一种主动防御工具&#xff0c;通过模拟易受攻击的服务&#xff0c;吸引攻击者&#xff0c;不仅能有效捕获攻击行为&#xff0c;还能为安全分析和溯源提供宝贵信息。…...

编程日记 2024/6/3 19:54:16

vue3+three.js给glb模型设置视频贴图

1.在网上下载一个显示屏或者自己画一个，在blender中设置好显示屏的Mesh，UV设置好，这样方便代码中添加纹理贴图。可以让美术在建模软件中，先随机设置一张图片作为纹理，验证UV是否设置好 关于如何 在blender中给模型设置UV贴图百度很多的 // 视频 import * as THREE from…...

编程日记 2024/6/3 19:53:15

SCARA机器人中旋转花键的维护和保养方法！

作为精密传动元件的一种&#xff0c;旋转花键在工作过程中承受了较大的负荷。在自动化设备上运用广泛&#xff0c;如&#xff1a;水平多关节机械手臂&#xff08;SCARA&#xff09;、产业用机器人、自动装载机、雷射加工机、搬运装置、机械加工中心的ATC装置等&#xff0c;最适…...

编程日记 2024/6/3 19:51:13

Linux运维-服务器系统配置初始化脚本

方案一 &#xff0c;是一个简化的Linux服务器初始化脚本 下面这个是一个简化的Linux服务器初始化脚本示例&#xff0c;它包括了更新软件包、安装常用工具、配置网络和安全设置等基本步骤&#xff1a;这个脚本提供了一个基本的初始化配置示例&#xff0c;包括软件更新、安装工具…...

编程日记 2024/6/3 19:50:12

暑期来临，AI智能视频分析方案筑牢防溺水安全屏障

随着夏季暑期的来临&#xff0c;未成年人溺水事故频发。传统的防溺水方式往往依赖于人工巡逻和警示标识的设置&#xff0c;但这种方式存在人力不足、反应速度慢等局限性。近年来&#xff0c;随着视频监控智能分析技术的不断发展&#xff0c;其在夏季防溺水中的应用也日益凸显出…...

编程日记 2024/6/3 19:49:11

【第3章】SpringBoot实战篇之登录接口(含JWT和拦截器)

文章目录 前言一、JWT1. 什么是JWT2. 使用场景3. 结构3.1 Header3.2 Payload3.3 Signature 4. 使用 二、案例1.引入库2.JwtUtils3. UserController14. ArticleController 三、拦截器1. 定义拦截器2. 注册拦截器 四、测试1. 登录2. 无token3. 有token4. 全局配置 总结 前言 前面…...

编程日记 2024/6/3 19:48:10

vue el-table使用、el-popover关闭、el-image大图预览

1、html <el-table :data"list" :header-cell-style"{ background: #F7F8F9 }"><el-table-column type"index" width"100px" label"序号"></el-table-column><el-table-column prop"pic" l…...

编程日记 2024/6/3 19:47:08

星网智云总经理韦炜：低代码与智能制造融合，探索未来制造的无限可能

下文为广西星网智云总经理韦炜的演讲全文&#xff1a; 大家下午好&#xff0c;今天给大家分享一下玉柴的数字化转型过程&#xff0c;以及整个过程中我们会怎样使用低代码。 ﹀ ﹀ ﹀ #玉柴数字化战略 #两个要点 我们的数字化&#xff0c;是在公司的整一个战略转型下去做的。…...

编程日记 2024/6/3 19:45:06

3d模型批量渲图总是会跳怎么办？---模大狮模型网

在进行3D模型批量渲染时&#xff0c;有时会遇到一些问题&#xff0c;其中一个常见的问题就是渲染过程中出现跳帧或者跳图的情况。这不仅会影响到效率&#xff0c;还可能导致输出结果不符合预期。本文将介绍几种解决这一问题的方法&#xff0c;帮助读者更好地应对3D模型批量渲图…...

编程日记 2024/6/3 19:44:05

【距离四六级只剩一个星期！】刘晓艳四级保命班课程笔记（2）（可分享治资料~）

这一节是专门的听力课程&#xff0c;众所周知&#xff0c;咱们刘晓艳刘老师的口语不是特别的突出&#xff0c;当然口才是一流的☝️。 文章目录 听力预判听前预判 听力过程八大出题关键点视听一致同义转换 听完一道题后平时练习精听步骤 听力预判 听前预判 画关键词&#xff…...

编程日记 2024/6/3 19:42:03

Java之Enum枚举类实践

概述 项目中涉及到很多不变的业务变量,因此我们采用了Enum类来定义相关变量,采用Enum的原因 性能高,常量值的地址唯一,可以直接使用 来判断 完全单例,线程安全 项目实践 package com.bierce;/*** 审核流传状态枚举类*/ public enum FlowTypeEnum {START("开始"…...

编程日记 2024/6/3 19:41:02

Apache POI对Excel进行读写操作

1、什么是Apache POI ​ Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 Apache POI 的应用场景&…...

编程日记 2024/6/3 19:40:01

网络安全中攻击溯源方法

目前网络攻击已经成为常见的安全威胁之一&#xff0c;其造成的危害和损失都是不可估量的&#xff0c;因此网络攻击受到了高度重视。而当我们遭遇网络攻击时&#xff0c;攻击溯源是一项非常重要的工作&#xff0c;可以帮助我们迅速发现并应对各类网络攻击行为&#xff0c;那么网…...

编程日记 2024/6/3 19:38:59

软件设计不是CRUD（21）：在流式数据处理系统中进行业务抽象落地——需求分析

本文主要介绍如何在数据处理系统中应用业务抽象的设计思想。目前业界流行的数据处理方式是流式处理&#xff0c;主流的流式处理引擎有Apache Spark&#xff0c;Apache Flink等等。本文选择Apache Flink作为实战案例的落地。由于本文主要是讲解设计思想和流式处理引擎相结合的方…...

编程日记 2024/6/3 19:37:57

远控免杀篇

0x00&#xff1a;前言 随着近两年hvv和红蓝对抗以及国家对于网络安全的重视&#xff0c;国内防护水平都蹭蹭上了一个台阶&#xff0c;不管是内部人员的技术水平提高还是防护设备的层层部署&#xff0c;均给了红队人员想要进一步行动设置了障碍。 通过weblogic的cve-2019-2725获…...

编程日记 2024/6/3 19:35:54

基于单片机的超声波倒车雷达设计

摘 要&#xff1a;文 章设计了一种基于单片机的超声波倒车雷达系统&#xff0c;以 AT89C51 型单片机作为控制核心&#xff0c;集距离测量、显示&#xff0c;方位显示和危险报警于一体&#xff0c;以提高驾驶者在倒车泊车时的安全性和舒适性。本设计采用 Keil 软件对系统程序…...

编程日记 2024/6/3 19:34:52

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/7/4 21:35:34

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/7/7 0:36:41

Linux云原生安全：零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

编程新知 2025/7/5 14:33:07

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

编程新知 2025/7/8 5:37:23

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/7/6 21:43:13

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

编程新知 2025/7/9 1:41:07

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

编程新知 2025/6/20 15:06:56

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...

编程新知 2025/7/6 19:40:32

算术操作符与类型转换：从基础到精通

目录 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 算术操作符超级详解 算术操作符&#xff1a;、-、*、/、% 赋值操作符&#xff1a;和复合赋值 单⽬操作符&#xff1a;、--、、- 前言&#xff1a;从基础到实践——探索运算符与类型转换的奥秘 在先前的文…...

编程新知 2025/7/8 19:57:22

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为&#xff1a; f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法&#xff0c;得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/7/8 4:17:29