Echarts+vue电商平台数据可视化——webSocket改造项目
websocket的基本使用，用于测试前端能否正常获取到后台数据
后台代码编写：
const path = require("path");
const fileUtils = require("../utils/file_utils");
const WebSocket = require("ws");
// 创建WebSocket服务端的对象，绑定的端口号是9998
const wss = new WebSocket.Server({port: 9998,
});
// 服务端开启了监听
// 导出一个函数listen
module.exports.listen = () => {// 对客户端的连接事件进行监听// client: 代表的是客户端的连接socket对象wss.on("connection", (client) => {console.log("有客户端连接成功了...");// 对客户端的连接对象进行message事件的监听// msg：由客户端发给服务器的数据client.on("message", async (msg) => {console.log("客户端发送数据给服务器：" + msg);let payload = JSON.parse(msg);const action = payload.action;if (action === "getData") {let filePath = "../data/" + payload.chartName + ".json";// payload.charName; // trend seller map rank hot stockfilePath = path.join(__dirname, filePath);const ret = await fileUtils.getFileJsonData(filePath);// 需要再服务器获取到数据的基础上，增加一个data的字段// data对应的值，就是某个json文件的内容payload.data = ret;client.send(JSON.stringify(payload));} else {// 原封不动的将所有收到的数据转发给每一个处于连接状态的客户端// wss.clients //所有客户端的连接wss.clients.forEach((client) => {client.send(JSON.stringify(payload));});}// 由服务端往客户端发送数据// client.send("hello socket from backend");});});
};
调用的获取文件路径的方法（getFileJsonData）：
// 读取文件的工具方法
const fs = require("fs");
module.exports.getFileJsonData = (filePath) => {// 根据文件的路径,读取文件的内容return new Promise((resolve, reject) => {fs.readFile(filePath, "utf-8", (error, data) => {if (error) {// 读取文件失败reject(error);} else {// 读取文件成功// return data; // 这里的return返回的是这个函数的调用者,而不是getFileJsonData这个函数的调用者// 读取文件是一个异步任务,对于一个异步任务,我们也不能通过return的方式来将数据返回给调用者resolve(data);}});});
};
前端使用：
<button id="connect">连接</button><button id="send" disabled="true">发送数据</button><br />从服务端接收的数据如下： <br /><span id="recv"></span><script>var connect = document.querySelector("#connect");var send = document.querySelector("#send");var recv = document.querySelector("#recv");let ws = null;connect.onclick = function () {ws = new WebSocket("ws://localhost:9998");ws.onopen = () => {console.log("连接服务端成功了...");send.disabled = false;};ws.onclose = () => {console.log("连接服务器失败或关闭");send.disabled = true;};ws.onmessage = (msg) => {console.log("接收从服务器发送过来的数据了");console.log(msg);recv.innerHTML = msg.data;};};send.onclick = function () {ws.send(JSON.stringify({action: "getData",socketType: "trendData",chartName: "trend",value: "",}));ws.send(JSON.stringify({action: "fullScreen",socketType: "fullScreen",chartName: "trend",value: true | false,}));ws.send(JSON.stringify({action: "themeScreen",socketType: "themeScreen",chartName: "",value: "",}));};</script>websocket用来改造电商平台项目思维导图：
坐标轴的方向是一个从左往右的方向，朝那个方向就选取x1,y1,x2,y2就选取那几个值
横向：0,0,1,0
竖向：0,0,0,1
报错信息：
js:31[Vue warn]：挂接钩子时出错：“InvalidStateError:在WebSocket上执行send失败：仍处于连接状态。”
代码中的注释解释：
// 有一种报错情况,在组件还没有进行连接成功之前,连接需要一点时间,这个组件就已经进行了加载,就会调用mounted当中指明的send的方法,而send方法是socket_service.js当中定义的一个方法,就会往ws来进行一个send方法的调用,而此时此刻,还没有连接成功
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 引入字体的文件
import "./assets/font/iconfont.css";
// 引入全局的样式文件
import "./assets/css/global.less";
import axios from "axios";
import SocketService from "@/utils/socket_service";
// 对服务端的数据进行连接
// SocketService.Instance().connect(); //这样写会报错，报错说明是Instance是不需要就加上小括号的
// 有一种报错情况,在组件还没有进行连接成功之前,连接需要一点时间,这个组件就已经进行了加载,就会调用mounted当中指明的send的方法,而send方法是socket_service.js当中定义的一个方法,就会往ws来进行一个send方法的调用,而此时此刻,还没有连接成功
SocketService.Instance.connect();
// 其他的组件调用websocket的方式 this.$socket
Vue.prototype.$socket = SocketService.Instance;
// 请求的基准路径的配置
axios.defaults.baseURL = "http://127.0.0.1:8888/api/";
// 将axios挂载到Vue的原型对象上
// 在别的组件中 this.$http
Vue.prototype.$http = axios;// 将全局的echarts对象挂载到Vue的原型对象中
// 别的组件中this.$echarts
Vue.prototype.$echarts = window.echarts;Vue.config.productionTip = false;new Vue({router,store,render: (h) => h(App),
}).$mount("#app");
解决方法，添加一个连接标识，判断websocket连接成功还是失败，true连接成功，false连接失败
项目改造后的后台编写：
export default class SocketService {// 单例static instance = null;static get Instance() {if (!this.instance) {this.instance = new SocketService();}return this.instance;}// 和服务器连接的socket对象ws = null;// 怎么在得到数据之后，将每个图表数据传递给每个图表组件，让图表数据可以得到更新// 先将每一个图表组件的某一个方法先存储在我们当前的这个模块中,比如一个实例属性中,一旦得到有服务端给我们的数据之后,在调用我们之前所存储起来的那个方法,就可以将数据传递给每个图表组件// 存储回调函数callBackMapping = {};// 标识是否连接成功connected = false;// 记录重试的次数sendRetryCount = 0;// 重新连接尝试的次数connectRetryCount = 0;// 定义连接服务器的方法connect() {// 连接服务器if (!window.WebSocket) {return console.log("您的浏览器不支持WebSocket");}this.ws = new WebSocket("ws://localhost:9998");// 连接成功的事件this.ws.onopen = () => {console.log("连接服务器成功了");this.connected = true;// 重置重新连接的次数this.connectRetryCount = 0;};// 1.连接服务器失败// 2.当连接成功之后，服务器关闭的情况this.ws.onclose = () => {console.log("连接服务器失败");// 标识是否连接成功,没有连接成功this.connected = false;this.connectRetryCount++;// 这个时候应该进行重新连接的尝试,但是每一次连接失败,下一次的连接都是500毫秒 不太合适,因为尝试的越多,可能服务器已经坏了,或者已经关闭了,就没有必要那么频繁的次数来进行重新连接的尝试setTimeout(() => {this.connect();}, 500 * this.connectRetryCount);};this.ws.onmessage = (msg) => {console.log("从服务器获取了数据");// 真正服务端发送过来的原始数据时在msg中的data字段// 如果在的得到数据之后把数据传递给每个图表组件会好一些，因为只有图表组件需要数据console.log(msg.data, msg, "--\\\\");const recvData = JSON.parse(msg.data);const socketType = recvData.socketType;// 判断回调函数是否存在if (this.callBackMapping[socketType]) {const action = recvData.action;if (action === "getData") {const realData = JSON.parse(recvData.data);this.callBackMapping[socketType].call(this, realData);} else if (action === "fullScreen") {this.callBackMapping[socketType].call(this, recvData);} else if (action === "themeScreen") {this.callBackMapping[socketType].call(this, recvData);}}};}// 下面的这个三个方法需要通过组件来调用// 回调函数的注册// socketType 这个函数的唯一标识,callBack这个函数的回调函数registerCallBack(socketType, callBack) {this.callBackMapping[socketType] = callBack;}// 取消某一个回调函数// socketType 这个函数的唯一标识unRegisterCallBack(socketType) {this.callBackMapping[socketType] = null;}// 发送数据的方法send(data) {// 判断此时此刻有没有连接成功if (this.connected) {this.sendRetryCount = 0;this.ws.send(JSON.stringify(data));} else {this.sendRetryCount++;setTimeout(() => {this.send(data);}, this.sendRetryCount * 500);}// this.ws.send(JSON.stringify(data));}
}
新旧setOption是一个相互整合，相互覆盖的过程
相关文章：
Echarts+vue电商平台数据可视化——webSocket改造项目
websocket的基本使用，用于测试前端能否正常获取到后台数据 后台代码编写： const path require("path"); const fileUtils require("../utils/file_utils"); const WebSocket require("ws"); // 创建WebSocket服务端的…...
【网络安全实验室】SQL注入实战详情
如果额头终将刻上皱纹，你只能做到，不让皱纹刻在你的心上 1.最简单的SQL注入 查看源代码，登录名为admin 最简单的SQL注入，登录名写入一个常规的注入语句： 密码随便填，验证码填正确的，点击登录…...
【信息系统项目管理师】第14章：项目沟通管理过程详解
更多内容请见： 备考信息系统项目管理师-专栏介绍和目录 文章目录 一、规划沟通管理1、输入2、工具与技术3、输出二、管理沟通1、输入2、工具与技术3、输出三、监督沟通1、输入2、工具与技术3、输出一、规划沟通管理 定义：规划沟通管理是基于每个干系人或干系人群体的信息需求…...
YOLOv5部署到web端（flask+js简单易懂）
文章目录 前言最终实现效果图后端实现 主界面检测函数检测结果显示 前端实现 主界面(index.html）显示图片界面 总结 前言 最近，老板让写一个程序把yolov5检测模型部署到web端，在网页直接进行目标检测。经过1个星期的努力，终于实…...
什么是自治系统和非自治系统
自治系统 自治系统的特征是其状态方程不依赖于时间。举个简单的例子，考虑一阶常微分方程： d x d t − x \frac{dx}{dt} -x dtdx−x 这是一个经典的指数衰减过程，其中状态 (x) 随时间 (t) 衰减。这个系统是自治的，因为它的演…...
使用 CSS 的 `::selection` 伪元素来改变 HTML 文本选中时的背景颜色
定义 ::selection 伪元素： 在你的 CSS 文件中，添加 ::selection 伪元素，并设置 background-color 属性来改变选中文本的背景颜色。 示例代码： ::selection {background-color: yellow; /* 你可以根据需要更改颜色 */color: black…...
从0入门自主空中机器人-3-【环境与常用软件安装】
关于本课程： 本次课程是一套面向对自主空中机器人感兴趣的学生、爱好者、相关从业人员的免费课程，包含了从硬件组装、机载电脑环境设置、代码部署、实机实验等全套详细流程，带你从0开始，组装属于自己的自主无人机，并让…...
jmeter分布式启动
https://www.cnblogs.com/qtclm/p/11082081.html 1、代理机：输入“ipconfig”，找到IP地址，在Jmeter/bin/jmeter.properties设置remote host 启动jmeter server 1、控制机：输入“ipconfig”，找到IP地址，在J…...
【Linux】HTTP cookie与session
在登录B站时，有登录和未登录两种状态， 问题：B站是如何认识我这个登录用户的？问题：HTTP是无状态、无连接的，怎么能够记住我？ HTTP协议是无状态、无连接的。比如客户端（浏览器&#…...
20. 【.NET 8 实战--孢子记账--从单体到微服务】--简易权限--补充--自动添加接口地址
在同学学习过程，部分同学向我反馈说每次新增接口都要在接口表里手动添加一条接口很麻烦，因此我把项目代码做了一个改动，使我们不需要手动添加，每次项目运行起来后就会自动把新的接口地址添加进去。 一、实现 首先，我…...
[Linux] 服务器CPU信息
（1）查看CPU信息（型号） cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c输出：可以看到有128个虚拟CPU核心，型号是后面一串 128 Intel(R) Xeon(R) Platinum 8336C CPU 2.30GHz（2&…...
java_使用阿里云oss服务存储图片
什么情况下可以使用阿里云oss服务存储图片？ 对图片的访问速度有高要求时使用，方便用户快速的（比如在网页页面中）访问到图像 参考：41 尚上优选项目-平台管理端-商品信息管理模块-阿里云OSS介绍_哔哩哔哩_bilibili 1.…...
Dali 1.1.4 | 解锁版AI图像生成器，无限生成
Dali是一款先进的AI图像生成器应用程序，能够根据您的描述生成不同风格的独特图像。它不仅限于生成艺术作品，还可以创建创新的纹身设计、独一无二的标志以及超写实照片。该软件使用尖端技术，将想象力转化为现实，提供迷人的数字艺术…...
快手视频不让下载怎么保存到相册
快手，作为国内领先的短视频平台之一，吸引了无数用户发布创意视频、分享生活点滴。随着短视频版权保护和用户隐私问题的日益严重，越来越多的视频内容在平台内都采取了“不让下载”的限制。面对这一情况，很多用户都希望能够保存自己…...
Linux环境下CUDA与对应版本CuDNN的安装指南
转载：Linux环境下CUDA与对应版本CuDNN的安装指南-百度开发者中心...
mybatisPlus打印sql配置
MyBatis-Plus 提供了方便的配置方式来打印 SQL 查询语句，以便进行调试和性能分析。可以通过配置 log 来输出 SQL 语句以及执行的参数。 方法 1：通过 application.properties 或 application.yml 配置打印 SQL 可以通过配置 application.properties 或 a…...
InstructGPT：基于人类反馈训练语言模型遵从指令的能力
大家读完觉得有意义记得关注和点赞！！！ 大模型进化树，可以看到 InstructGPT 所处的年代和位置。来自 大语言模型（LLM）综述与实用指南（Amazon，2023） 目录 摘要 1 引言 …...
曾仕强解读《易经》
曾仕强对《易经》的解读内容丰富、深入浅出，以下是一些主要方面： 讲解《易经》基本原理 - 阴阳之道：曾仕强将阴阳比作白天与黑夜、男人与女人等，指出阴阳看似对立，实则相辅相成，强调为人处世要把握阴阳…...
http报头解析
http报文 http报文主要有两类是常见的，第一类是请求报文，第二类是响应报文，每个报头除了第一行，都是采用键值对进行传输数据，请求报文的第一行主要包括http方法（GET，PUT， POST&#…...
什么是Sight Words（信号词）
🧡什么是Sight Words（信号词） 简单来说，Sight Words就是我们在日常英语中常用的一些基本词汇。可以把它想象成是学练英语的“基础词汇”，这些词在各种考试中经常出现，也是在生活中必不可少的。 …...
tiny RISCV项目学习
参考视频：第1期 开发环境准备 —— RISC-V囫囵吞枣式学习_哔哩哔哩_bilibili 项目地址：tinyriscv: 一个从零开始写的极简、非常易懂的RISC-V处理器核。...
LeetCode 力扣 热题 100道（二十七）除自身以外数组的乘积（C++）
给你一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O(n) 时间复杂…...
Kotlin在医疗大健康域的应用实例探究与编程剖析（上）
一、引言 1.1 研究背景与意义 在当今数字化时代，医疗行业正经历着深刻的变革。随着信息技术的飞速发展，尤其是人工智能、大数据、物联网等新兴技术的广泛应用，医疗行业数字化转型已成为必然趋势。这种转型旨在提升医疗服务的效率和质量，优化医疗资源配置，为患者提供更加…...
【Spring】事务
在软件开发中，事务确保一组操作要么全部成功，要么全部失败，这对于数据库操作尤为重要，因为任何单一操作的失败都可能导致数据不一致。Spring 事务管理通过 Transactional 注解实现，能够轻松地在数据层和业务层维护数据…...
)
canvas+fabric实现时间刻度尺(二)
前言 我们前面实现了时间刻度尺，鼠标移动显示时间，接下来我们实现鼠标点击某个时间进行弹框。 效果 实现 1.监听鼠标按下事件 2.编写弹框页面 3.时间转换 <template><div><canvas id"rulerCanvas" width"1200"…...
IPv6的过度技术
如何界定手动与自动？ 主要是隧道目标地址能否自动获取 👯1. 双栈 必须支持IPv4和IPv6协议 链接双栈网络的接口必须同时配置v4和v6地址 路由器能够根据二层标记识别协议，type：0x0800代表IPV4，type：0x…...
介绍 Apache Spark 的基本概念和在大数据分析中的应用。
Apache Spark是一个开源的大数据处理框架，可用于高速处理和分析大规模数据集。它可以在分布式集群上运行，并且具有内存计算的能力，因此可以比传统的批处理框架更快地处理数据。 在Spark中，数据被表示为弹性分布式数据集ÿ…...
VA01/VA02检查增强
VA01/VA02检查增强 一、增强描述 VA01/VA02创建或修改SO时候，在点击“保存”按钮的节点，客户需求对一些约束条件进行检查，此处以 SO行项目对应的“利润中心”字段必输为例。通过查询更多的增强：SPRO–销售和分销–系统修正–用户…...
基于SpringBoot和Leaflet的全球机场空间分布可视化实战
目录 前言 一、航空机场的空间模型 1、空间表简介 2、数据查询 二、机场WebGIS空间分布可视化 1、后台数据查询 2、Leaflet页面开发 三、WebGIS分析 1、全球航空格局 2、我国机场影像 四、总结 前言 时光轻轻挥别2024，来到了2025年。在崭新的2025年里&am…...
FPGA交通灯实现
1 原理 FPGA（现场可编程门阵列）交通灯实现原理主要是基于硬件描述语言（如VHDL或Verilog）编程，通过FPGA内部的逻辑单元和寄存器来实现交通灯的控制功能。以下是对FPGA交通灯实现原理的详细解释： 一、交通灯的基本功能 交通灯的主要功能包括红灯、黄灯和绿灯的显示，以及…...
厦门大学联合网易提出StoryWeaver，可根据统一模型内给定的角色实现高质量的故事可视化
厦门大学联合网易提出StoryWeaver，可以根据统一模型内给定的角色实现高质量的故事可视化。可根据故事文本生成与之匹配的图像，并且确保每个角色在不同的场景中保持一致。本文的方法主要包括以下几个步骤： 角色图构建：设计一个角色…...
【Rust自学】8.1. Vector
喜欢的话别忘了点赞、收藏加关注哦（加关注即可阅读全文），对接下来的教程有兴趣的可以关注专栏。谢谢喵！(･ω･) 8.1.0. 本章内容 第八章主要讲的是Rust中常见的集合。Rust中提供了很多集合类型的数据结构&…...
华为OD机试真题---服务器广播
华为OD机试中的“服务器广播”题目是一个经典的算法问题，通常涉及图论和连通分量的概念。以下是对该题目的详细解析： 一、题目描述 服务器之间可以通过网络进行连接，连接方式包括直接相连和间接连接。给出一个NN的数组（矩阵&…...
又一年。。。。。。
2024，浑浑噩噩的一年。 除了100以内的加减法（数据，数据，还是数据。。。。。。），似乎没做些什么。 脸盲症越来越重的，怕是哪天连自己都不认得自己的了。 看到什么，听到什…...
【JAVA高级篇教学】第六篇：Springboot实现WebSocket
在 Spring Boot 中对接 WebSocket 是一个常见的场景，通常用于实现实时通信。以下是一个完整的 WebSocket 集成步骤，包括服务端和客户端的实现。本期做个简单的测试用例。 目录 一、WebSocket 简介 1. 什么是 WebSocket？ 2. WebSocket 的特…...
Kotlin在医疗大健康域的应用实例探究与编程剖析（下）
四、Kotlin医疗编程实例分析 4.1 移动医疗应用实例 4.1.1 患者健康监测应用 在当今数字化医疗时代，患者健康监测应用为人们提供了便捷的健康管理方式。利用Kotlin开发的患者健康监测应用，能够实时采集患者的各类生理数据，如心率、血压、血氧饱和度等，并通过直观的可视化…...
Oracle Dataguard（主库为 Oracle 11g 单节点）配置详解（3）：配置备用数据库
Oracle Dataguard（主库为 Oracle 11g 单节点）配置详解（3）：配置备用数据库 目录 Oracle Dataguard（主库为 Oracle 11g 单节点）配置详解（3）：配置备用数据库一、…...
LeetCode算法题——移除元素
题目描述 给你一个数组 nums 和一个值 val，你需要原地移除所有数值等于 val 的元素。元素的顺序可能发生改变。然后返回 nums 中与 val 不同的元素的数量。 假设 nums 中不等于 val 的元素数量为 k，要通过此题，您需要执行以下操作࿱…...
七大设计原则之开闭原则
目录 一、什么是开闭原则？ 二、如何做到开闭原则？ 1、面向接口或抽象类编程 2、依赖注入 3、单一职责原则 三、是不是为了满足开闭原则就要一味的追求代码的扩展性？ 一、什么是开闭原则？ 相信很多人都听说过这个原则&#x…...
【stm32+K210项目】基于K210与STM32协同工作的智能垃圾分类系统设计与实现（完整工程资料源码）
视频效果演示： 基于K210与STM32协同工作的智能垃圾分类系统设计与实现 目录： 目录 视频效果演示： 目录： 项目简介： 一、设计目的： 1.1 项目背景 1.2 设计意义： 二、硬件部分： 2.1 st…...
Ps：创建数据驱动的图像
在设计实践中，常常需要处理大量内容变化但设计格式统一的任务，例如批量生成名片、工作证、学生证、胸牌、奖状或证书甚至图册。这些工作如果逐一手动制作，不仅耗时费力，还容易出错。 为解决这一问题，Photoshop 提供了强…...
git的全通路线介绍
一、关系 1.git是代码版本管理工具，即可将项目切换到任意版本。 2.github与gitee是基于git技术构建的远程仓库网站。github是国外建立的，资源更丰富；gitee是国内建立的，免费功能更多。 3.gitlab与github类似，只不过…...
R1-3学习打卡
🍨 本文为🔗365天深度学习训练营 中的学习记录博客🍖 原作者：K同学啊 RNN心脏病识别 导入数据数据预处理标准化模型训练模型评估个人总结 import tensorflow as tfgpus tf.config.list_physical_devices("GPU")…...
Vue.js组件开发-实现无感刷新Token
在Vue.js应用中，实现无感刷新Token涉及到在用户的会话Token即将过期或已经过期时自动获取新的Token，而不影响用户的操作体验。需要通过拦截器（interceptors）来处理API请求，并在检测到Token过期或无效时自动进行刷新。 …...
可编辑31页PPT | 大数据湖仓一体解决方案
荐言分享：在当今数字化时代，大数据已成为企业决策和业务优化的关键驱动力。然而，传统的数据处理架构，如数据仓库和数据湖，各自存在局限性，难以满足企业对数据高效存储、灵活处理及实时分析的综合需求。因此…...
如何实现一个充满科技感的官网（二）
背景 在上一篇文章 《如何实现一个充满科技感的官网（一）》 中，我们初步了解了该官网的整体设计，并与大家探讨了它的视觉呈现和用户体验。 我们前期的内部设计偏向简洁，所以开始思考如何提升网站的整体设计感。这些尝…...
深度学习算法：从基础到实践
简介 深度学习作为人工智能领域的一个重要分支，近年来在多个领域取得了显著的成就。本文将从基础概念出发，探讨深度学习算法的核心原理，并介绍一些实际应用案例。 深度学习算法的核心概念 深度学习算法基于人工神经网络，通过构…...
等价和划分
例子：学生分组 假设我们有一个班级，班级里有10名学生，我们想要根据他们的年龄来分组。我们可以定义一个关系 ( R ) 在学生集合 ( A ) 上，其中 ( A {s_1, s_2, …, s_{10}} )，并且 ( s_i ) 和 ( s_j ) 之间有关系 ( R…...
电商项目-数据同步解决方案（三）商品上架同步更新ES索引库
一、 需求分析和业务逻辑 主要应用技术有：Feign远程调用， 消息队列-RabbitMQ ，分布式搜索引擎-ElasticSearch，Eureka，Canal 商品上架将商品的sku列表导入或者更新索引库。 数据监控微服务需要定义canal监听器&#x…...
MySQL数据库笔记——多版本并发控制MVCC
大家好，这里是Good Note，关注 公主号：Goodnote，本文详细介绍MySQL的并发控制：多版本并发控制MVCC。 文章目录 背景介绍数据库并发控制——锁机制悲观锁和乐观锁悲观锁乐观锁 数据库并发控制——MVCC 的引入MVCC 和锁机…...