网页版Java五子棋项目(一)websocket【服务器给用户端发信息】

网页版Java五子棋项目(一)websocket【服务器给用户端发信息】

  • 一、为什么要用websocket
  • 二、websocket介绍
    • 原理解析
  • 三、代码演示
    • 1. 创建后端api(TestAPI)
      • 新增知识点:
        • extends TextWebSocketHandler
        • 重写各种方法
    • 2. 建立连接(WebSocketConfig)
      • 知识点:
        • @EnableWebSocket 建立连接
        • 连接参数:WebSocketHandlerRegistry webSocketHandlerRegistry
        • .addHandler(testAPI, "/test");
    • 3. 前端代码
      • 知识点:
        • new WebSocket("ws://127.0.0.1:8080/test");
        • 四种接受发送方法
  • 四、结果展示

一、为什么要用websocket

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、websocket介绍

WebSocket 是从 HTML5 开始支持的一种网页端和服务端保持长连接的 消息推送机制.

理解消息推送:
传统的 web 程序, 都是属于 “一问一答” 的形式. 客户端给服务器发送了一个 HTTP 请求, 服务器给客户端返回一个 HTTP 响应.
这种情况下, 服务器是属于被动的一方. 如果客户端不主动发起请求, 服务器就无法主动给客户端响应.

像五子棋这样的程序, 或者聊天这样的程序, 都是非常依赖 “消息推送” 的. 如果只是使用原生的 HTTP 协议, 要想实现消息推送一般需要通过 “轮询” 的方式.

轮询的成本比较高, 而且也不能及时的获取到消息的响应.

而 WebSocket 则是更接近于 TCP 这种级别的通信方式. 一旦连接建立完成, 客户端或者服务器都可以主动的向对方发送数据.

原理解析

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码演示

1. 创建后端api(TestAPI)

新增知识点:

extends TextWebSocketHandler

重写各种方法

package com.example.java_gobang.api;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
public class TestAPI extends TextWebSocketHandler {@Overridepublic void afterConnectionEstablished(WebSocketSession session) throws Exception {System.out.println("连接成功");}@Overrideprotected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {System.out.println("收到消息: " + message.getPayload());// 让服务器收到数据之后, 把数据原封不动的返回回去~session.sendMessage(message);}@Overridepublic void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {System.out.println("连接异常");}@Overridepublic void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception {System.out.println("连接关闭");}
}

2. 建立连接(WebSocketConfig)

知识点:

@EnableWebSocket 建立连接

连接参数:WebSocketHandlerRegistry webSocketHandlerRegistry

.addHandler(testAPI, “/test”);

package com.example.java_gobang.config;@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {@Autowiredprivate TestAPI testAPI;@Overridepublic void registerWebSocketHandlers(WebSocketHandlerRegistry webSocketHandlerRegistry) {webSocketHandlerRegistry.addHandler(testAPI, "/test");}

3. 前端代码

知识点:

new WebSocket(“ws://127.0.0.1:8080/test”);

四种接受发送方法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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 实例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 发送请求// document.querySelector是从标签中获取值let input = document.querySelector('#message');let button = document.querySelector('#submit');button.onclick = function() {console.log("发送消息: " + input.value);websocket.send(input.value);}</script>
</body>
</html>

四、结果展示

前端
在这里插入图片描述

后端

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

回顾 OWASP 机器学习十大风险

日复一日&#xff0c;越来越多的机器学习 (ML) 模型正在开发中。机器学习模型用于查找训练数据中的模式&#xff0c;可以产生令人印象深刻的检测和分类能力。机器学习已经为人工智能的许多领域提供了动力&#xff0c;包括情感分析、图像分类、面部检测、威胁情报等。 数十亿美…

生活小妙招之UE custom Decal

因为这几年大部分时间都在搞美术&#xff0c;所以博客相关的可能会鸽的比较多&#xff0c;阿巴阿巴 https://twitter.com/Tuatara_Games/status/1674034744084905986 之前正好看到一个贴花相关的小技巧&#xff0c;正好做一个记录&#xff0c;也在这个的基础上做一些小的拓展…

微信小程序前后页面传值

微信小程序前后页面传值 从前一个页面跳转到下一个页面&#xff0c;如何传递参数&#xff1f;从后一个页面返回前一个页面&#xff0c;如何回调参数&#xff1f; 向后传值 从前一个页面跳转到下一个页面并传值。 前页面&#xff1a;在跳转链接中添加参数并传递 wx.navigat…

MySQL体系结构和存储引擎【InnoDB特性】【4种隔离级别】【聚集索引】

1.概念 1.1 数据库 文件的集合 1.2 数据库实例 程序 1.3 数据库 & 数据库实例的关系 应用程序通过数据库实例和数据库打交道 2.InnoDB存储引擎 2.1 特性 2.1.1 支持事务 2.1.2 具有行锁设计 默认的读取操作不会产生锁 2.1.3 支持外键 2.1.4 通过多版本并发&am…

compile_and_runtime_not_namespaced_r_class_jar\debug\R.jar: 另一个程序正在使用

问题情况&#xff1a; run App的时候&#xff0c;提示该文件被占用 想要clean Project&#xff0c;还是提示该文件被占用&#xff0c;这个文件和连带的文件夹都无法被删除。 方法1&#xff1a; AndroidStudio下方的terminal&#xff08;没有这个窗口的话&#xff0c;从上面的…

Docker基本使用

查看本地镜像 查看本地&#xff1a;docker imagesPull镜像&#xff1a;docker pull nginx:latest登录镜像&#xff1a;docker login hub.docker.com -u **** -p ****制作镜像&#xff1a;docker build -t xxxx:v1push&#xff1a;docker push xxx:v1删除镜像:docker rmi #imag…

ELK 企业级日志分析系统(二)

目录 ELK Kiabana 部署&#xff08;在 Node1 节点上操作&#xff09; 1&#xff0e;安装 Kiabana 2&#xff0e;设置 Kibana 的主配置文件 3&#xff0e;启动 Kibana 服务 4&#xff0e;验证 Kibana 5&#xff0e;将 Apache 服务器的日志&#xff08;访问的、错误的&#x…

DC电源模块关于多路输出的问题

BOSHIDA DC电源模块关于多路输出的问题 DC电源模块通常具备多路输出功能&#xff0c;这使得它在实际应用中具有极高的灵活性和可扩展性。当需要为多个不同的负载提供电源时&#xff0c;多路输出的设计可以降低整个系统的成本和复杂度&#xff0c;同时也可以减少系统空间的占用。…

react钩子副作用理解

useEffect(() > { fetch(‘https://api.example.com/data’) .then(response > response.json()) .then(data > setData(data)); }, []); 怎么理解这个[] 在 React 中&#xff0c;useEffect 钩子用于处理副作用&#xff0c;比如数据获取、订阅、手动 DOM 操作等。useE…

基于Spring Boot的影视点播网站设计与实现(Java+spring boot+MySQL)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于Spring Boot的影视点播网站设计与实现&#xff08;Javaspring bootMySQL&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;Java springboot…

Centos 从0搭建grafana和Prometheus 服务以及问题解决

下载 虚拟机下载 https://customerconnect.vmware.com/en/downloads/info/slug/desktop_end_user_computing/vmware_workstation_player/17_0 cenos 镜像下载 https://www.centos.org/download/ grafana 服务下载 https://grafana.com/grafana/download/7.4.0?platformlinux …

C语言易错知识点总结1

生命周期&作用域 第 1 题&#xff08;单选题&#xff09; 题目名称&#xff1a; 局部变量的作用域是&#xff1a; 题目内容&#xff1a; A .main函数内部 B .整个程序 C .main函数之前 D .局部变量所在的局部范围 答案解析&#xff1a; 在C语言中&#xff0c;变量分为局部…

视频声音怎么转换成文字?这四种转换方法很简单

将视频声音转换成文字的好处不仅仅限于方便记录、保存和查阅视频内容。它还可以大大提高视频内容的可访问性和可搜索性&#xff0c;使得非母语人士、听力障碍者等人群更容易理解视频内容&#xff0c;并且可以更快速地找到相关信息。此外&#xff0c;将视频声音转换成文字还可以…

led台灯哪些牌子性价比高?推荐几款性价比高的护眼台灯

作为学龄期儿童的家长&#xff0c;最担心的就是孩子长时间学习影响视力健康。无论是上网课、写作业、玩桌游还是陪伴孩子读绘本&#xff0c;都需要一个足够明亮的照明环境&#xff0c;因此选购一款为孩子视力发展保驾护航的台灯非常重要。为大家推荐几款性价比高的护眼台灯。 …

gitee分支合并

合并dev分支到master&#xff08;合并到主分支&#xff09; git checkout master git merge dev //这里的dev表示你的分支名称 git push //推送到远程仓库 效果如下图 不报错就表示推送成功了&#xff0c;希望能帮助各位小伙伴

PHP日期差计算器,计算两个时间相差 年/月/日

1. 计算两个日期相隔多少年&#xff0c;多少月&#xff0c;多少天示例&#xff1a;laravel框架实现 /*** 天数计算* return \Illuminate\Http\JsonResponse*/public function loveDateCal(){$start_date $this->request(start_date);$end_date $this->request(end_date…

STM32串口IAP升级

STM32串口IAP升级 1.分区 L073RZ 192K 6K 分区大小Bootloader64KAPP72KBackup72KMemory6K 分区 | 大小 | 备注 | Bootloader | 64K | 引导程序 | APP | 72K | App运行 | Backup | 72K | APP备份 | Memory | 6K | 数据存储 | 2.工程创建 1&#xff09;BOOT a.IR0M1 Bootlo…

二叉树的性质、前中后序遍历【详细】

1. 树概念2.二叉树的概念1.2二叉树的性质 3.二叉树遍历3.2前序遍历3.2 中序遍历3.3 后序遍历 1. 树概念 树是一种非线性的数据结构&#xff0c;它是由n&#xff08;n>0&#xff09;个有限结点组成一个具有层次关系的集合&#xff0c;有二叉树&#xff0c;N叉树等等。 子树…

Node.js:实现遍历文件夹下所有文件

Node.js&#xff1a;实现遍历文件夹 代码如下 const fs require(fs) const path require(path)function traverseFolder(folderPath) {// 读取文件夹列表const files fs.readdirSync(folderPath)// 遍历文件夹列表files.forEach(function (fileName) {// 拼接当前文件路径…

安卓:实现复制粘贴功能

目录 一、介绍 &#xff08;一&#xff09;ClipboardManager介绍 1、ClipboardManager常用方法&#xff1a; 2、获取 ClipboardManager实例 &#xff08;二&#xff09;、ClipData介绍 1、创建ClipData对象&#xff1a; 2、获取ClipData的信息&#xff1a; 3、ClipData…