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(客户端的标识),向客户端发送消息,都能成功。

在这里插入图片描述

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

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

相关文章

一句话解释什么是出口IP

出口 IP 是指从本地网络连接到公共互联网时所使用的 IP 地址。这个 IP 地址是由 Internet 服务提供商(ISP)分配给你的,它可以用来标识你的网络流量的来源。如果你使用的是 NAT(网络地址转换)技术,则在 NAT 设备内部会进行地址转换,使得多个设备可以共享同一个公共 IP 地…

在Mac上使用安卓桌面模式

在安装Homeblew的基础上 替换国内源 export HOMEBREW_API_DOMAIN"https://mirrors.tuna.tsinghua.edu.cn/homebrew-bottles/api" export HOMEBREW_BREW_GIT_REMOTE"https://mirrors.tuna.tsinghua.edu.cn/git/homebrew/brew.git" brew update 安装Scrcpy …

DC/DC升压模块电源 高电压稳压输出 12v24v28v48v转600V800V1000V1100V1300V1500V2000V3000V4000V

特点 ● 效率高达 80% ● 2*2 英寸标准封装 ● 单电压输出 ● 价格低 ● 稳压输出 ● 工作温度: -40℃~85℃ ● 阻燃封装,满足UL94-V0 要求 ● 温度特性好 ● 可直接焊在PCB 上 应用 HRA(B) 0.1~30W 系列模块电源是一种DC-DC升压变换器。该模块电源的输入电压分为…

conda虚拟环境配置

命令行输入,conda -V 确定conda版本 创建自己的conda虚拟环境 activate 回车 conda create -n 名字 python版本号 执行命令 确认执行命令 输入y 创建完成 激活环境 conda activate 名字 进入python环境 python 退出 exit() conda deactive

Redis -- 基础知识2

1.Redis客户端介绍 1.基础介绍 Redis是一种客户端-服务器结构的程序,通过网络进行互动 客户端的多种形态 1.自带了命令行客户端:redis-cil 2.图形化界面的客户端:依赖windows系统,连接服务器有诸多限制,不建议使用 3.基…

gRPC之gateway集成swagger

1、gateway集成swagger 1、为了简化实战过程,gRPC-Gateway暴露的服务并未使用https,而是http,但是swagger-ui提供的调用服 务却是https的,因此要在proto文件中指定swagger以http调用服务,指定的时候会用到文件 prot…

CV计算机视觉每日开源代码Paper with code速览-2023.10.23

精华置顶 墙裂推荐!小白如何1个月系统学习CV核心知识:链接 点击CV计算机视觉,关注更多CV干货 论文已打包,点击进入—>下载界面 点击加入—>CV计算机视觉交流群 1.【目标检测】Zone Evaluation: Revealing Spatial Bias i…

Python使用psycopg2读取PostgreSQL的geometry字段出现二进制乱码

1、问题 读取geometry字段出现二进制乱码 查询语句: sql "select * from public"Note: 这种写法在PostgreSQL中直接查询, 没有问题,不会报错。 但是在Python中查询,如果导出的geom还是一长串的geometry 格式的话, …

招商平台小程序开发制作方案

招商平台小程序旨在为企业提供一个便捷、高效的招商信息发布和合作伙伴寻找的平台。通过整合企业资源,打造一个集信息发布、信息筛选、在线沟通、合作洽谈等功能于一体的综合性招商服务平台。 一、招商平台小程序的用户需求 1. 企业用户:需要一个便捷的…

ELK概述部署和Filebeat 分布式日志管理平台部署

ELK概述部署、Filebeat 分布式日志管理平台部署 一、ELK 简介二、ELK部署2.1、部署准备2.2、优化elasticsearch用户拥有的内存权限2.3、启动elasticsearch是否成功开启2.4、浏览器查看节点信息2.5、安装 Elasticsearch-head 插件2.6、ELK Logstash 部署(在 Apache 节…

Pytorch使用torchvision.datasets.ImageFolder读取数据集,数据集的内容排列状况

当使用torchvision.datasets.ImageFolder读取猫狗数据集时,dataset中存的图片是 猫狗猫狗猫狗猫狗 还是 猫猫猫猫狗狗狗狗 呢? 数据集文件的存放路径如下图 测试代码如下 import torch import torchvisiontransform torchvision.transforms.Compose([torchvision.transform…

【AI视野·今日Robot 机器人论文速览 第五十七期】Wed, 18 Oct 2023

AI视野今日CS.Robotics 机器人学论文速览 Wed, 18 Oct 2023 Totally 17 papers 👉上期速览✈更多精彩请移步主页 Daily Robotics Papers Underwater and Surface Aquatic Locomotion of Soft Biomimetic Robot Based on Bending Rolled Dielectric Elastomer Actua…

Tomcat 和 HTTP 协议

目 录 HTTP 协议HTTP 是什么理解 HTTP 协议的工作过程抓包结果HTTP请求HTTP响应 HTTP 请求 (Request)认识 URL认识 "方法" (method)认识请求 "报头"(header)认识请求 "正文" (body) HTTP 响应认识 "状态码" (st…

【STM32】时钟设置函数(寄存器版)

一、STM32时钟设置函数移植 1.时钟模块回顾 一个疑问 前面代码并没有设置时钟为什么可以直接使用。 2.时钟树 3.时钟树分析 1.内部晶振(HSI) 内部晶振不稳定,当我们上电后,会自动产生振动,自动产生时钟,…

代碼隨想錄算法訓練營|第四十五天|1049. 最后一块石头的重量 II、494. 目标和、474.一和零。刷题心得(c++)

目录 讀題 1049. 最后一块石头的重量 II 自己看到题目的第一想法 看完代码随想录之后的想法 494. 目标和 自己看到题目的第一想法 看完代码随想录之后的想法 474.一和零 自己看到题目的第一想法 看完代码随想录之后的想法 1049. 最后一块石头的重量 II - 實作 思路 …

6. Cesium中的Entity

1. Entity类简介 Entity类是Cesium中描述和呈现地球上实体对象的核心类。它具有丰富的属性和方法,用于控制和定制地理实体的外观和行为。Entity对象可以表示各种地理实体,如点、线、面等,并具有位置、方向、模型、标牌、折线、多边形等属性&…

利用Jpom在线构建Spring Boot项目

1 简介 前面介绍了运用Jpom构建部署Vue项目,最近研究了怎么部署Spring Boot项目,至此,一套简单的前后端项目就搞定了。 2 基本步骤 因为就是一个简单的自研测试项目,所以构建没有使用docker容器,直接用java -jar命令…

【Axure高保真原型】图片手电筒效果

今天和大家分享图片手电筒效果的原型模板,鼠标移入图片区域后,会显示一个光圈,光圈会跟随鼠标移动,照亮对应的区域;鼠标拖动时可以移动地图图片,查看更多区域的内容,具体效果可以打开下方原型地…

app开发者提升第四季度广告收入的方法

第四季度将迎来双十一、双十二、圣诞、元旦为主的电商购物季,这是一年中利用线上消费为全新年度和全新预算做好准备的最佳时机,从过往的变现成功案例中汇总了优化要点,帮助开发者在第四季度和未来一年获取更多广告收益。 https://www.shensh…

OceanBase 全局索引与局部索引探索

OceanBase 全局索引与局部索引探索导致的本区域查找和跨区域查找。 作者:网名大数据模型,对制造业、银行业、通讯业了解多一点,关心专注国产数据库技术布道以及数据资产建设的应用实践。 爱可生开源社区出品,原创内容未经授权不得…