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

WebSocket 入门案例

目录

  • WebSocket
    • 入门案例
      • WebSocket-server
        • 新增项目:
        • 添加依赖:
        • yml:
        • 启动类:
      • frontend-server
        • 前端项目:
        • 添加依赖:
        • 添加yml:
        • 启动类:
        • 前端引入JS:
        • 前端页面:
        • 后端代码:
        • 测试:

WebSocket

入门案例

WebSocket-server

**作用:**服务端给客户端主动推送数据,也支持客户端主动给服务端发送数据,是一个双向的功能。主要是用来服务端给客户端发送数据。

在这里插入图片描述

新增项目:

在这里插入图片描述

添加依赖:

websocket依赖

通过百度找到maven官网,搜索websocket,然后找一个自己要的版本进行拷贝。

https://mvnrepository.com/

在这里插入图片描述

在这里插入图片描述

添加父依赖和其他依赖

在这里插入图片描述

yml:

在这里插入图片描述

启动类:

在这里插入图片描述

frontend-server

前端项目:

在这里插入图片描述

添加依赖:

在这里插入图片描述

添加yml:

在这里插入图片描述

启动类:

在这里插入图片描述

前端引入JS:

在这里插入图片描述

前端页面:

js的if的判断理解

在这里插入图片描述

在这里插入图片描述

两个index页面是一样的,就是创建的uuid不一样而已,一个是123,一个是456

在这里插入图片描述

后端代码:

在这里插入图片描述

websocket连接后,会根据情形自动触发里面的方法,触发的条件是贴上对应的注解。

在这里插入图片描述

controller

服务端给客户端发送消息的方法

在这里插入图片描述

测试:

创建连接:

前端执行的代码流程:

在这里插入图片描述

后端执行代码:

客户端这边就会自动执行这个 onOpen方法

onOpen:当客户端和服务端成功建立连接,就会执行opPen方法

在这里插入图片描述

客户端向服务端发送消息

在这里插入图片描述

服务端向客户端发送消息

服务端向客户端发送消息,先走controller的方法,执行完就走前端的socket.js的onmessage方法。

在这里插入图片描述

在这里插入图片描述

服务端根据不同的uuid(客户端的标识),向客户端发送消息,都能成功。

在这里插入图片描述

相关文章:

WebSocket 入门案例

目录 WebSocket入门案例WebSocket-server新增项目:添加依赖:yml:启动类: frontend-server前端项目:添加依赖:添加yml:启动类:前端引入JS:前端页面:后端代码:测试: WebSocket 入门案…...

华为OD 最大社交距离(100分)【java】A卷+B卷

华为OD统一考试A卷+B卷 新题库说明 你收到的链接上面会标注A卷还是B卷。目前大部分收到的都是B卷。 B卷对应20022部分考题以及新出的题目,A卷对应的是新出的题目。 我将持续更新最新题目 获取更多免费题目可前往夸克网盘下载,请点击以下链接进入: 我用夸克网盘分享了「华为O…...

Nginx缓存

Nginx缓存 一般情况下系统用到的缓存有三种 服务端缓存:缓存存在后端服务器,如redis 代理缓存:缓存存储在代理服务器或中间件,内容从后端服务器获取,保存在本地 客户端缓存:缓存在浏览器 [ ] 什么时候会出现…...

Pyecharts绘图教程(2)—— 绘制多种折线图(Line)参数说明+代码实战

文章目录 🎯 1 简介🎯 2 图表配置项2.1 导入模块2.2 数据配置项2.3 全局配置项 🎯 3 代码实战3.1 基础折线3.2 平滑曲线(is_smooth)3.3 阶梯折线(is_step)3.4 空值过渡(is_connect_n…...

oracle实现搜索不区分大小写

<if test"code ! null and code ! ">and upper(code) like upper(%${code}%) </if>关键字upper...

C++中->与.的区别

在类中 在 C 中&#xff0c;-> 和 . 都可以用于访问类的成员变量和成员函数。但它们在使用上有一些区别&#xff1a; 1. 对于指针类型的对象&#xff0c;必须使用 -> 来访问其成员&#xff1b;而对于非指针类型的对象&#xff0c;则需要使用 . 。 2. -> 运算符在实…...

大语言模型(LLM)综述(二):开发大语言模型的公开可用资源

A Survey of Large Language Models 前言3. RESOURCES OF LLMS3.1 公开可用的模型CheckPoints或 API3.2 常用语料库3.3 库资源 前言 随着人工智能和机器学习领域的迅速发展&#xff0c;语言模型已经从简单的词袋模型&#xff08;Bag-of-Words&#xff09;和N-gram模型演变为更…...

【vSphere 8 自签名证书】企业 CA 签名证书替换 vSphere Machine SSL 证书Ⅳ—— 替换默认证书

目录 博文摘要6. 使用企业 CA 签发的 SSL 证书 替换 vSphere 默认 SSL 证书6.1 确认证书文件6.2 替换默认 vSphere 证书6.3 验证自签名证书6.4 补充说明 关联博文参考资料 博文摘要 博文主要描述了在 vCenter Server 8 上通过实用工具 certificate-manager 将 vSphere 默认 Ma…...

NI9234 4 通道, ±5 V, 24 位软件可选 IEPE 和 AC/DC模拟输入模块振动测试国产替代

NI的自动化测试和测量系统将助您打破桎梏&#xff0c;化不可能为可能。让我们携手合作&#xff0c;选择最适合您的硬件、软件和服务组合&#xff0c;为您提供全副武装&#xff0c;助您成就非凡。 购买NI的产品或服务&#xff0c;并非只是单纯的一次性交易行为。如果您有任何疑…...

宁波市:做大做强跨境电商 赋能外贸创新发展

近日&#xff0c;全国政协第十四届常委会第二次会议专题研究“构建新发展格局&#xff0c;推进中国式现代化”议题&#xff0c;市政协主席徐宇宁参加“推动高水平对外开放”专题小组讨论&#xff0c;全国政协副主席蒋作君到会听取发言&#xff0c;国家发改委、商务部相关司局负…...

为什么这些网站都在使用CFCA证书

在今天的数字时代&#xff0c;保障数据的安全至关重要&#xff0c;尤其是对于金融机构、政府部门和大型企业等组织而言。证书颁发机构在这一领域扮演着关键的角色&#xff0c;而CFCA&#xff08;中国金融认证中心&#xff09;证书已经脱颖而出&#xff0c;展现了其与其他证书的…...

Java编程规范(命名规则),Java程序的运行过程(执行流程)分析

编程规范是对编程的一种约定&#xff0c;主要作用是增强代码的可读性和可维护性&#xff0c;便于代码重用。 首先要求程序中的各个要素都遵守命名规则&#xff0c;然后在编码中严格按照编码格式编写代码。命名规则包括以下几点。 包的名称由一个小写字母序列组成。类的名称由大…...

layui框架实战案例(21):layui table单元格显示图片导致复选框冗余的解决方案

图片自适应表格CSS 为防止单元格内的图片不能正常显示&#xff0c;需本地重写CSS。 /*layui-table图片自适应*/ .layui-table-cell {height: auto;line-height: 20px;}.layui-table-cell img {height: 50%;max-width: 50%; }列代码 , cols: [[{type: checkbox,fixed:left, w…...

指针常量和常量指针

大家好&#xff0c;我叫徐锦桐&#xff0c;个人博客地址为www.xujintong.com。平时记录一下学习计算机过程中获取的知识&#xff0c;还有日常折腾的经验&#xff0c;欢迎大家来访。 指针常量和常量指针光是这名字就让人头疼了。更何况还有细节问题要理清楚。 正文 命名 其实我…...

GitLab-访问返回403 forbidden问题处理

访问gitlab时报错forbidden 一般访问量大&#xff0c;密码错误频率高的时候&#xff0c;gitlab防爆机制启动了&#xff0c;对IP做了封禁&#xff0c;导致某些IP访问的是否返回 403 forbidden 1. 查看被封的IP /opt/gitlab/embedded/bin/redis-cli -s /var/opt/gitlab/redis/red…...

快来get策略模式,告别编程困惑,轻松变身编程高手✨

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! ​ 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一…...

UPS负载箱的工作原理是什么?

UPS负载箱&#xff08;Uninterruptible Power Supply Load Bank&#xff09;内部包含一组电阻器&#xff0c;通过调节电阻值来模拟不同负载条件。当UPS供电时&#xff0c;电阻器会吸收一定的电能&#xff0c;从而模拟实际负载对UPS的需求。UPS负载箱配备了控制系统&#xff0c;…...

深度学习八股文: 模型训练全过程及各阶段的原因

深度学习模型的训练全过程通常包括以下步骤&#xff1a; 数据准备&#xff1a; 首先&#xff0c;需要准备用于训练的数据集。数据集应包含输入特征&#xff08;通常是数值或图像数据&#xff09;和相应的目标标签。数据通常需要被分为训练集、验证集和测试集&#xff0c;以便评…...

CY3-NHS ester良好的光稳定性介绍1032678-38-8

CY3-NHS ester通常表现出良好的光稳定性&#xff0c;这使得它在长时间的荧光成像和实验中非常有用。以下是关于CY3-NHS ester良好光稳定性的一些介绍&#xff1a; 1.抗光漂白性能&#xff1a;CY3-NHS ester通常对光漂白表现出相对高的抵抗力。这意味着在持续激发下&#xff0c…...

大厂秋招真题【贪心】美团20230826秋招T2-小美的数组重排

文章目录 【贪心】美团2023秋招-小美的数组重排题目描述与示例题目描述输入描述输出描述示例输入输出 说明 解题思路代码PythonJavaC时空复杂度 华为OD算法/大厂面试高频题算法练习冲刺训练 【贪心】美团2023秋招-小美的数组重排 题目描述与示例 题目描述 小美有两个长度为n…...

挑战杯推荐项目

“人工智能”创意赛 - 智能艺术创作助手&#xff1a;借助大模型技术&#xff0c;开发能根据用户输入的主题、风格等要求&#xff0c;生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用&#xff0c;帮助艺术家和创意爱好者激发创意、提高创作效率。 ​ - 个性化梦境…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

comfyui 工作流中 图生视频 如何增加视频的长度到5秒

comfyUI 工作流怎么可以生成更长的视频。除了硬件显存要求之外还有别的方法吗&#xff1f; 在ComfyUI中实现图生视频并延长到5秒&#xff0c;需要结合多个扩展和技巧。以下是完整解决方案&#xff1a; 核心工作流配置&#xff08;24fps下5秒120帧&#xff09; #mermaid-svg-yP…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...