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.mzph.cn/news/113353.shtml

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

相关文章

RabbitMQ官方案例学习记录

官方文档:RabbitMQ教程 — RabbitMQ (rabbitmq.com) 一、安装RabbitMQ服务 直接使用docker在服务器上安装 docker run -it -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.12-management 安装完成后,访问15672端口,默认用户…

vmware 16pro安装 mac10.14.6,期间遇到的问题

1、分配硬盘内存尽量分大点,建议是40g,我分了80g,后面下载解压xcode发现还不够,又增加最后分了120g 2、安装过程,卡在选语言的地方,鼠标和键盘无法操作。需要在虚拟机设置中,勾选以下选项“显示…

记录--怎么写一个可以鼠标控制旋转的div?

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助 说在前面 鼠标控制元素旋转在现在也是一个很常见的功能,让我们从实现div元素的旋转控制开始来了解元素旋转的具体原理和实现方法吧。 效果展示 体验地址 code.juejin.cn/pen/7290719… 实现…

C++设计模式_08_Factory Method工厂方法模式

文章目录 1. “对象创建模式”模式1.1 典型模式 2. 动机(Motivation)3. 代码演示Factory Method工厂方法模式3.1 常规方法3.2 面向接口的编程3.2.1 FileSplitter1.cpp3.2.2 MainForm1.cpp 3.3 Factory Method工厂方法3.3.1 ISplitterFactory.cpp3.3.2 Ma…

只需五步,在Linux安装chrome及chromedriver(CentOS)

一、安装Chrome 1)先执行命令下载chrome: wget https://dl.google.com/linux/direct/google-chrome-stable_current_x86_64.rpm2)安装chrome yum localinstall google-chrome-stable_current_x86_64.rpm看到下图中的Complete出现则代表安装…

分布式锁之mysql 锁

文章目录 使用数据锁:悲观锁 或者 乐观锁悲观锁乐观锁mysql锁总结 使用数据锁:悲观锁 或者 乐观锁 一个sql:直接更新时判断,在更新中判断库存是否大于0 update table set surplus (surplus - buyQuantity) where id 1 and (surp…

Kotlin笔记(五):泛型基础,委托

1. 泛型 Java自1.5版本引入了泛型的概念, Kotlin自然也支持泛型,Kotlin的泛型跟Java的泛型有相同之处,也有一些特别之处. 1.1 泛型类和泛型方法 在一般的编程模式下,我们需要给任何一个变量指定一个具体的类型,而泛型允许我们在不指定具体类型的情况下进…

记录阿里云服务器(Centos7.9)部署Thingsboard(3.4.2)遇到的一些问题

记录编译Thingsboard遇到的一些问题 部署了一个thingsboard项目到阿里云服务器上,历时十一天,遇到了很多困难,国内关于Thingsboard的资料确实很少,所以想着写一篇博客记录一下,或许能够给以后编译遇到类似问题的人一些…

Python+playwright 实现Web UI自动化

实现Web UI自动化 技术:Pythonplaywright 目标:自动打开百度浏览器,并搜索“亚运会 金牌榜” 需安装:Playwright (不用安装浏览器驱动) # 使用浏览器,并可视化打开 browser playwright.ch…

tomcat、nginx实现四层转发+七层代理+动静分离实验

实验环境: nginx1——20.0.0.11——客户端 静态页面: nginx2——20.0.0.21——代理服务器1 nginx3——20.0.0.31——代理服务器2 动态页面: tomcat1——20.0.0.12——后端服务器1 tomcat2——20.0.0.22——后端服务器2 实验步骤&…

【CANoe】文件处理_hex文件读取解析

hex文件里面只有00,01,04三种码。那么我们在解析的时候只需要对这三种不同状态的进行不同的解析即可。 hex文件格式的解析,可阅读:HEX文件格式详解 首先创建一个Block的结构体,根据经验我们知道,一个数据…

EthernetIP 转MODBUS RTU协议网关连接FANUC机器人作为EthernetIP通信从站

远创智控YC-EIPM-RTU网关产品是一款高效的数据采集工具,它可以通过各种数据接口与工业领域的仪表、PLC、计量设备等产品连接,实时采集这些设备中的运行数据、状态数据等信息。采集到的数据经过整合和运算等操作后,可以被传输到其他设备或者云…

[python]如何操作Outlook实现邮件自动化

【背景】 邮件自动化存在很多需求场景,有的场景希望会出现Outlook窗口在发送前进行一下人工检查等等的人为干预,有的则希望定时直接发送,有的需要加附件等等。本篇讨论用Python覆盖这些Outlook邮件自动化场景的方法。 【解决方法】 首先Outlook和SMTP的邮件自动化方法所使…

【C++】stackqueue

适配器是一种设计模式 , 该种模式是将一个类的接口转换成客户希望的另外一个接口 。 虽然 stack 和 queue 中也可以存放元素,但在 STL 中并没有将其划分在容器的行列,而是将其称为 容器适配 器 ,这是因为 stack 和队列只是对其他容…

linux上在docker中使用anaconda创建虚拟环境

conda的一些命令以及创建环境的基本命令可参考:Conda环境搭建以及激活 以及 conda 本地环境常用操作 前言 这里是梳理linux上在docker中使用conda,以配置MLD-TResNet-L-AAM模型为例。论文笔记参考:多标签分类论文笔记 | Combining Metric Lea…

分类选择,最多五级

效果图&#xff0c;这种竖向的分类选择&#xff0c;每一列可以用不同的背景颜色 组件代码 <template><view class"toolTypeBox" :style"max-height:${maxHeight}"><block v-for"(item,index) in datalist"><block v-if&…

spark集成hive

集群使用ambarihdp方式进行部署,集群的相关版本号如下所示: ambari版本 Version 2.7.4.0 HDP版本 HDP-3.1.4.0 hive版本 3.1.0 spark版本 2.3.0 集群前提条件: 1.Hdp、Spark、Hive都已部署好 2.Hive数据层建好&#xff0c;在Hdfs生成相应各层目录&#xff0c;后面配…

大数据学习(16)-mapreduce详解

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…

企业c#语言源代码防泄密解决方案

在当今数字化时代&#xff0c;企业的核心业务往往依赖于软件应用程序。为了保护企业的知识产权和敏感信息&#xff0c;源代码的保密至关重要。对于制造类企业尤其是智能制造业来讲&#xff0c;最近几年是高速发展的时期&#xff0c;很多公司在做工厂流水线设备时&#xff0c;就…

Python学习笔记——类、魔术方法

食用说明&#xff1a;本笔记适用于有一定编程基础的伙伴们。希望有助于各位&#xff01; 类 类的运用很常见&#xff1a;在大部分情况下&#xff0c;对一些特有的对象&#xff0c;可以使用特定的类来指向它&#xff1a; class Person:name unknownage -1sex 0partner No…