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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

css-边框流水线

效果图&#xff1a; 代码&#xff1a; <!DOCTYPE html> <html><head><meta charset"utf-8"><meta name"viewport" content"initial-scale1.0, user-scalableno" /><title></title><style type&…

物联网知识复习

物联网的内涵和体系结构 物联网的基本内涵 物联网的基本内涵在于物联&#xff0c;物物相连或者物和人相连的互联网。 也就是说&#xff0c;它是要由物主动发起的&#xff0c;物物互联的互联网。 它的第一层意思是说物和物相连&#xff1b;第二层意思是说物和人相连。 物联网的…

Redis数据类型——set类型数据交并差操作

1.业务场景 2.求两个set集合中交并补的操作

Easyx趣味编程7,鼠标消息读取及音频播放

hello大家好&#xff0c;这里是dark flame master&#xff0c;今天给大家带来Easyx图形库最后一节功能实现的介绍&#xff0c;前边介绍了绘制各种图形及键盘交互&#xff0c;文字&#xff0c;图片等操作&#xff0c;今天就可以使写出的程序更加生动且容易操控。一起学习吧&…

Leetcode周赛365补题(3 / 3)

目录 1、2、有序三元组的最大值 - 预处理前后最大值 遍历 &#xff08;1&#xff09;预处理前后值遍历&#xff08;枚举j&#xff09; &#xff08;2&#xff09;枚举k 2、无限数组的最短子数组 - 前缀和 滑动窗口 1、2、有序三元组的最大值 - 预处理前后最大值 遍历 …

【STM32】标准库的引入

一、为什么要会有标志外设库 1、传统单片机软件开发方式 (1)芯片厂商提供数据手册、示例代码、开发环境 (2)单片机软件工程师面向产品功能&#xff0c;查阅数据手册&#xff0c;参考官方示例代码进行开发 (3)硬件操作的方式是用C语言对寄存器进行读写以操作硬件 (4)主要工作量…

【vue】使用less报错:显示this.getOptions is not a function

在vue-cli中使用 lang“less” 时报错&#xff1a; Module build failed: TypeError: this.getOptions is not a function at Object.lessLoader 原因&#xff1a;版本过高所致&#xff0c;所用版本为 解决&#xff1a;降低版本&#xff1a;npm install less-loader4.1.0 --s…

Use nvidia card in docker

1.确保在宿主机上已经安装了nvidia 显卡的驱动 $ nvidia-smi 2.准备Nvidia-docker的环境 $ distribution$(. /etc/os-release;echo $ID$VERSION_ID) && curl -fsSL https://nvidia.github.io/libnvidia-container/gpgkey | sudo gpg --dearmor -o /usr/share/k…

【微信小程序】6天精准入门(第5天:利用案例与后台的数据交互)附源码

一、什么是后台交互&#xff1f; 在小程序中&#xff0c;与后台交互指的是小程序前端与后台服务器之间的数据通信和请求处理过程。通过与后台交互&#xff0c;小程序能够获取服务器端的数据、上传用户数据、发送请求等。 小程序与后台交互可以实现数据的传输、用户认证、实时消…

订水商城H5实战教程-04用户注册

目录 1 用户注册2 创建模型应用3 开发审核功能4 配置菜单5 发布预览最终效果 我们上一篇讲解了用户协议的功能&#xff0c;如果用户同意协议&#xff0c;就可以跳转到注册页面&#xff0c;要求用户录入个人基本信息&#xff0c;本篇我们介绍一下用户注册功能。 1 用户注册 用户…

Kafka快速入门(最新版3.6.0)

文章目录 一、初识MQ1.1 什么是MQ1.2 同步和异步通讯1.1.1 同步通讯1.1.2 异步通讯 1.3 技术对比1.4 MQ的两种模式 二、初识Kafka2.1 Kafka的使用场景2.2 Kafka基本概念2.3 Topic与Partition 三、Kafka基本使用3.1 部署前的准备3.2 启动kafka服务器3.3 Kafka核心概念之Topic3.4…

【机器学习合集】标准化与池化合集 ->(个人学习记录笔记)

文章目录 标准化与池化1. 标准化/归一化1.1 归一化归一化的作用 1.2 标准化批标准化方法 Batch Normailzation标准化方法的对比自动学习标准化方法 2. 池化2.1 池化的作用2.2 常见的池化方法2.3 池化方法的差异2.4 池化的必要性 标准化与池化 1. 标准化/归一化 1.1 归一化 归…

springcloud笔记 (8) -网关 Gateway

网关 出国需要过海关 网关&#xff1a;网络的关卡 网关的作用 1&#xff1a;路由转发 2&#xff1a;安全控制 保护每个服务&#xff0c;不需要将每个暴露出去 3&#xff1a;负载均衡 1.没有网关&#xff1a;客户端直接访问我们的微服务&#xff0c;会需要在客户端配置很多…

【实战】Kubernetes安装持久化工具NFS-StorageClass

文章目录 前言技术积累存储类&#xff08;storage class&#xff09;什么是NFS什么是PV\PVC为什么要用NFS-StorageClass 安装NFS-StorageClass保证N8S集群正常投用安装NFS工具与客户端NFS安装常见错误安装NFS-StorageClass存储器 前言 前面的博文我们介绍了如何用kuberadmin的…

ExcelPatternTool 开箱即用的Excel工具包现已发布!

文章目录 ExcelPatternTool功能特点&#xff1a;快速开始使用说明常规类型高级类型Importable注解Exportable注解IImportOption导入选项IExportOption导出选项单元格样式StyleMapping样式映射使用数据库作为数据源 示例Sample1&#xff1a;不同类型字段导出Sample2&#xff1a;…

乘势“2”上 双影来袭 | 距大势智慧2023秋季新品发布会还有2天!

乘势“2”上 双影来袭 全国产、真安全 大势智慧2023秋季新品发布会 倒计时2天 10.27 | 14:30 一键扫码预约 #实景三维##三维重建##实景三维中国##国产替代##新品发布# ​​​

uni-app小程序,uview-ui组件样式无法穿透修改的解决办法

1.首先设置以下选项.该选项的作用是让微信小程序允许样式穿透. 在需要改动的文件内加上 options: { styleIsolation: shared } 2.然后再使用vue的样式穿透写法. ::v-deep .类样式{} 或者 /deep/ .类样式{}

css总结

记录做项目经常会写到的css 1、左边导航栏固定&#xff0c;右边div占满剩余宽度 <template><div class"entrance"><div class"left"></div><div class"right"><div class"content"></div>…

useLayoutEffect和useEffect的区别

使用方式 这两个函数的使用方式其实非常简单&#xff0c;他们都接受一个函数一个数组&#xff0c;只有在数组里面的值改变的情况下才会再次执行 effect。所以对于使用方式我就不过多介绍了&#xff0c;不清楚的可以先参考官网 。 差异 useEffect 是异步执行的&#xff0c;而…

UG\NX二次开发 获取面的面面积、周长

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 感谢粉丝订阅 感谢 weixin_38891498 订阅本专栏,非常感谢。 简介 UG\NX二次开发 获取面的面面积、周长 效果 代码 #include "me.hpp" #include <NXOpen/Session…