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…

记录阿里云服务器(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、计量设备等产品连接,实时采集这些设备中的运行数据、状态数据等信息。采集到的数据经过整合和运算等操作后,可以被传输到其他设备或者云…

【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&…

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

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

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

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

微信小程序三种授权登录以及授权登录流程讲解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《微信小程序开发实战》。&#x1f3af;&#x1f3a…

小县城蔬菜配送小程序制作全攻略

随着互联网的普及和人们对生活品质要求的提高&#xff0c;越来越多的小县城开始开发蔬菜配送小程序&#xff0c;以满足当地居民对新鲜蔬菜的需求。制作一个小县城蔬菜配送小程序&#xff0c;需要经过以下步骤&#xff1a; 步骤一&#xff1a;登录乔拓云平台 首先&#xff0c;打…

揭开 Amazon Bedrock 的神秘面纱 | 基础篇

在 2023 年 4 月&#xff0c;亚马逊云科技曾宣布将 Amazon Bedrock 纳入使用生成式人工智能进行构建的新工具集。Amazon Bedrock 是一项完全托管的服务&#xff0c;提供各种来自领先 AI 公司&#xff08;包括 AI21 Labs、Anthropic、Cohere、Stability AI 和 Amazon 等&#xf…

Android音视频开发之基础知识

一、视频文件 1、视频格式 常见格式&#xff1a;mp4、mkv、flv 封装的数据&#xff1a;音频码流、视频码流 常用工具&#xff1a; [FFmpeg下载]:https://ffmpeg.org/download.html 下载、安装并配置环境变量 ffmpeg.exe 视频编解码 ffplay.exe 播放器库 ffprobe.exe 音视频分…