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

Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现

POM文件

<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.0</version>
</dependency>

WebSocketConfig配置

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.socket.server.standard.ServerEndpointExporter;@Configuration
public class WebSocketConfig {/*** 	注入ServerEndpointExporter,* 	这个bean会自动注册使用了@ServerEndpoint注解声明的Websocket endpoint*/@Beanpublic ServerEndpointExporter serverEndpointExporter() {return new ServerEndpointExporter();}
}

Ccontroller接口

import com.alibaba.fastjson2.JSONObject;
import com.rise.common.utils.StringUtils;
import com.rise.domain.ProTriaxialData;
import com.rise.service.IProTriaxialDataService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.EnableScheduling;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;import javax.websocket.OnClose;
import javax.websocket.OnMessage;
import javax.websocket.OnOpen;
import javax.websocket.Session;
import javax.websocket.server.ServerEndpoint;
import java.io.IOException;
import java.util.List;
import java.util.concurrent.CopyOnWriteArraySet;@ServerEndpoint("/websocket")//表示将该类标识为一个 WebSocket 服务端端点,客户端可以通过该端点进行 WebSocket 连接。/websocket 是客户端连接的 URL 路径。
@EnableScheduling//表示启用 Spring 的定时任务调度功能。在该类中使用的 @Scheduled 注解才能生效。
@Component//表示将该类标识为一个 Spring 组件,由 Spring 自动进行管理和注入。
public class MyWebSocket {private static final Logger log = LoggerFactory.getLogger(MyWebSocket.class);private static int onlineCount = 0;private static CopyOnWriteArraySet<MyWebSocket> webSocketSet = new CopyOnWriteArraySet<>();private Session session;private Boolean isReceive = true;private Double lat = 36.679071;//业务注入private static IProTriaxialDataService proTriaxialDataService;@Autowiredpublic void proTriaxialDataService(IProTriaxialDataService proTriaxialDataService){//WebScoketController是该类的类名 需要换成自己的类名MyWebSocket.proTriaxialDataService = proTriaxialDataService;}@OnOpenpublic void onOpen(Session session) {this.session = session;webSocketSet.add(this);addOnlineCount();log.info("有新链接加入!当前在线人数:{}",getOnlineCount());}@OnClosepublic void onClose() {webSocketSet.remove(this);subOnlineCount();log.info("有一链接关闭!当前在线人数:{}",getOnlineCount());}@OnMessagepublic void onMessage(String message, Session session) throws IOException {log.info("socket 接收到信息{}",message);//判断前端是否已消费上一条信息if (StringUtils.isNotEmpty(message) && message.equals("已消费")){isReceive = true;} else {// 连接已断开isReceive = false;}}public void sendMessage(String message) throws IOException {this.session.getBasicRemote().sendText(message);}@Scheduled(cron = "*/2 * * * * *")public void sendMessageScheduledTask()throws Exception{log.info("socket 执行三数据推送给前端");try{if (isReceive){//测试数据ProTriaxialData data = new ProTriaxialData();data.setId(1);data.setLng(117.175169);data.setLat(lat);data.setWeight(13.96);data.setCarNumber("鲁A·88888");lat = lat + 0.001;if(lat>36.69){lat =  36.679071;}//每2秒发送一次
//                List<ProTriaxialData> proTriaxialData = proTriaxialDataService.selectProTriaxialDataByCreateTimeDesc();
//                if (proTriaxialData!=null && proTriaxialData.size()>0){String message = JSONObject.toJSONString(data);for (MyWebSocket item : webSocketSet) {item.sendMessage(message);}
//                }}log.info("socket 数据发送成功!");}catch (Exception e){log.info("socket 数据发送失败!");e.printStackTrace();}}public static synchronized int getOnlineCount() {return MyWebSocket.onlineCount;}public static synchronized void addOnlineCount() {MyWebSocket.onlineCount++;}public static synchronized void subOnlineCount() {MyWebSocket.onlineCount--;}}

前端

initWebSocket(){let that = this;var ws = new WebSocket("ws://IP:PORT/websocket");// 连接成功后的回调函数ws.onopen = function (params) {console.log('客户端连接成功')// 向服务器发送消息ws.send('认证成功!')};// 从服务器接受到信息时的回调函数ws.onmessage = function (e) {console.log('收到服务器响应', e.data)var data = e.data;if(data!=undefined){if(data.indexOf("{") != -1){var obj = JSON.parse(data);//接收后台发送的消息数据做后续处理}else{console.log(data);}}};// 连接关闭后的回调函数ws.onclose = function(evt) {console.log("关闭客户端连接");};// 连接失败后的回调函数ws.onerror = function (evt) {console.log("连接失败了",evt);};// 监听窗口关闭事件,当窗口关闭时,主动去关闭websocket连接,防止连接还没断开就关闭窗口,这样服务端会抛异常。window.onbeforeunload = function() {ws.close();}console.log(ws)},

如果发现连接不通可能需要在后台接口将url设置白名单

相关文章:

Websocket + Vue使用

这里有一篇文档可以参考一下> 闪现 POM文件 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-websocket</artifactId><version>2.7.0</version> </dependency> WebSocketConf…...

AI程序员革命:探析Devin的登场与编程未来

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…...

vue 控制窗口禁止缩放,已解决

注意&#xff1a;不是浏览器窗口禁止缩放 1.vue框架中&#xff0c;index.html文件head标签中加上内容 <meta name"viewport" content"widthdevice-width, initial-scale1, maximum-scale1, user-scalable0"><script>document.addEventListen…...

【黑马头条】-day01环境搭建SpringBoot-Cloud-Nacos

文章目录 1 环境搭建及简介2 项目介绍2.1 应用2.2 业务说明2.3 技术栈2.4 收获2.5 大纲 3 Nacos准备3.1 安装Nacos 4 初始工程搭建4.1 环境准备4.1.1 导入项目4.1.2 设置本地仓库4.1.3 设置项目编码格式 4.2 全局异常4.2.1 自动装配 4.3 工程主体结构 5 登录功能开发5.1 需求分…...

HTML发展史

为什么要讲 HTML 发展史呢&#xff1f; 唐太宗告诉我们: 以铜为镜&#xff0c;可以正衣冠&#xff1b;以史为镜&#xff0c;可以知兴替&#xff1b;以人为镜&#xff0c;可以明得失。 那了解了 HTML 的发展史&#xff0c;可以知道什么呢&#xff1f; 答案是兼容 国内在 淘宝…...

Java进阶—GC回收(垃圾回收)

1. 什么是垃圾回收 垃圾回收(Garbage Collection&#xff0c;GC)是Java虚拟机(JVM)的一项重要功能&#xff0c;用于自动管理程序中不再使用的内存。在Java中&#xff0c;程序员不需要手动释放内存&#xff0c;因为GC会自动检测并回收不再使用的对象&#xff0c;从而减少内存泄…...

C++默认构造函数(二)

目录 构造函数补充 构造函数初始化列表的使用 赋值运算符重载函数 运算符重载函数介绍 运算符重载函数的使用 赋值运算符重载函数 赋值运算符重载函数的使用 拷贝构造函数和赋值运算符重载函数 重载前置和后置 前置 后置 重载流插入<<与流提取>> 流插…...

云原生部署手册02:将本地应用部署至k8s集群

&#xff08;一&#xff09;部署集群镜像仓库 1. 集群配置 首先看一下集群配置&#xff1a; (base) ➜ ~ multipass ls Name State IPv4 Image master Running 192.168.64.5 Ubuntu 22.04 LTS1…...

AJAX——JSON

目录 一、JSON概述 二、JSON对象语法 三、JSON序列化方法 四、JSON与XML比较 五、Java对象与Json对象的转换 六、Js解析服务器发送过来的JSON字符串 七、$.getJSON() 一、JSON概述 JSON简介:JSON的全称为JavaScript Object Nation(JavaScript 对象表示语法)&#xff0c;…...

Nexus3 Docker 私有仓库

Nexus3 Docker 私有仓库 安装并部署 Nexus3 $ docker search nexus3$ docker pull sonatype/nexus3$ mkdir /home/tester/data/docker/nexus3/sonatype-work $ sudo chown -R 200 /home/tester/data/docker/nexus3/sonatype-work$ docker run -d --namenexus3 \ --restartalw…...

Element UI el-dialog自由拖动功能

1.创建drag .js文件 /*** 拖拽移动* param {elementObjct} bar 鼠标点击控制拖拽的元素* param {elementObjct} target 移动的元素* param {function} callback 移动后的回调*/ export function startDrag(bar, target, callback) {var params {top: 0,left: 0,currentX: …...

RPC浅析,加密数据解析

个人总结 其实就是HOOK注入wbsocket 链接创建服务端和客户端进行通信&#xff0c;直接调用js代码中的加密方法 将结果通过浏览器客户端传入服务端。一种比较好实用的一种技术 https://blog.csdn.net/qq_36759224/article/details/123082574 &#xff08;搬运记录下&#xff…...

光速论文能用吗 #媒体#知识分享#学习方法

光速论文是一个非常有效的论文写作、查重降重工具&#xff0c;它的使用非常简单方便&#xff0c;而且功能强大&#xff0c;是每个写作者必备的利器。 首先&#xff0c;光速论文具有强大的查重降重功能&#xff0c;能够快速检测论文中的抄袭部分&#xff0c;帮助作者避免不必要的…...

智慧工地解决方案,智慧工地项目管理系统源码,支持大屏端、PC端、手机端、平板端

智慧工地解决方案依托计算机技术、物联网、云计算、大数据、人工智能、VR&AR等技术相结合&#xff0c;为工程项目管理提供先进技术手段&#xff0c;构建工地现场智能监控和控制体系&#xff0c;弥补传统方法在监管中的缺陷&#xff0c;最线实现项目对人、机、料、法、环的全…...

【前端寻宝之路】学习和使用label标签

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL| ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-2nm9oQQVtSL8hDS1 {font-family:"trebuchet ms",verdana,arial,sans-serif;f…...

项目————网络聊天室

服务器 #include <myhead.h> typedef struct msg{char flag;char name[20];char cont[128]; }msg_t;typedef struct link{struct sockaddr_in cin;struct link* next; }link_t;void do_login(int sfd,msg_t msg,link_t *L,struct sockaddr_in cin){link_t* pL;if(sendto…...

【计算机网络】基本概念

基本概念 IP 地址端口号协议协议分层封装分用客户端服务器请求和响应两台主机之间的网络通信流程 IP 地址 概念&#xff1a;IP 地址主要是用于唯一标识网络主机、其他网络设备&#xff08;如路由器&#xff09;的网络地址。简单来说&#xff0c;IP地址用来唯一定位主机。格式&…...

Redis入门到实战-第七弹

Redis实战热身Sets篇 完整命令参考官网 官网地址 声明: 由于操作系统, 版本更新等原因, 文章所列内容不一定100%复现, 还要以官方信息为准 https://redis.io/Redis概述 Redis是一个开源的&#xff08;采用BSD许可证&#xff09;&#xff0c;用作数据库、缓存、消息代理和流…...

图像处理学习笔记(一)

本文主要介绍&#xff0c;以供读者能够理解该技术的定义、原理、应用。 &#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;ISP处理 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质就…...

duckdb学习-1

DuckDB is a fast in-process analytical database DuckDB supports a feature-rich SQL dialect complemented with deep integrations into client APIs 在notebook中使用duckdb 安装 pip install duckdb 示例代码: #> pip install jupysql #> pip install duckdb-en…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

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

【大模型RAG】Docker 一键部署 Milvus 完整攻略

本文概要 Milvus 2.5 Stand-alone 版可通过 Docker 在几分钟内完成安装&#xff1b;只需暴露 19530&#xff08;gRPC&#xff09;与 9091&#xff08;HTTP/WebUI&#xff09;两个端口&#xff0c;即可让本地电脑通过 PyMilvus 或浏览器访问远程 Linux 服务器上的 Milvus。下面…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

Mysql中select查询语句的执行过程

目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析&#xff08;Parser&#xff09; 2.4、执行sql 1. 预处理&#xff08;Preprocessor&#xff09; 2. 查询优化器&#xff08;Optimizer&#xff09; 3. 执行器…...

git: early EOF

macOS报错&#xff1a; Initialized empty Git repository in /usr/local/Homebrew/Library/Taps/homebrew/homebrew-core/.git/ remote: Enumerating objects: 2691797, done. remote: Counting objects: 100% (1760/1760), done. remote: Compressing objects: 100% (636/636…...

消息队列系统设计与实践全解析

文章目录 &#x1f680; 消息队列系统设计与实践全解析&#x1f50d; 一、消息队列选型1.1 业务场景匹配矩阵1.2 吞吐量/延迟/可靠性权衡&#x1f4a1; 权衡决策框架 1.3 运维复杂度评估&#x1f527; 运维成本降低策略 &#x1f3d7;️ 二、典型架构设计2.1 分布式事务最终一致…...