一文详细了解websocket应用以及连接断开的解决方案

文章目录

    • websocket
    • vite 热启动探索
    • websocket -心跳
    • websocket 事件监听
    • 应用过程中问题总结

websocket

  1. Websocket简介
    • 定义和工作原理
      • Websocket是一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求 - 响应模式不同,它允许服务器主动向客户端推送数据。例如,在一个实时聊天应用中,当一个用户发送消息后,服务器可以立即将这条消息推送给其他相关用户,而不需要客户端不断地轮询服务器来检查是否有新消息。
      • 它的工作过程是这样的:首先,客户端通过发送一个HTTP请求来建立Websocket连接,这个请求包含特殊的请求头,表明这是一个Websocket升级请求。服务器收到请求后,如果支持Websocket协议,就会返回一个状态码为101(Switching Protocols)的响应,表示协议切换成功,之后双方就可以通过这个建立好的连接进行双向通信了。
    • 在浏览器中的应用场景
      • 实时数据更新场景,如金融数据的实时展示。股票价格是不断变化的,通过Websocket,浏览器可以实时接收服务器推送的最新股票价格数据,并更新页面上的显示内容。
      • 在线游戏也是典型的应用场景。游戏中的玩家状态更新、实时对战信息等都可以通过Websocket在服务器和浏览器之间快速传递,保证游戏的实时性和流畅性。
  2. Webpack与Vite在Vue项目中的基本情况
    • Webpack
      • 定义和功能:Webpack是一个模块打包工具。它可以将Vue项目中的各种资源(如JavaScript文件、CSS文件、图片等)视为模块,并根据配置规则将它们打包成一个或多个文件,用于在浏览器中高效地加载和运行。
      • 工作流程:它会从一个入口文件开始,递归地构建一个依赖关系图,这个依赖关系图包含了项目中所有模块之间的依赖关系。然后,根据配置中的加载器(loader)和插件(plugin)对这些模块进行处理,例如将ES6代码转换为ES5代码、将SASS文件转换为CSS文件等,最后将处理后的模块打包成最终的输出文件。
    • Vite
      • 定义和功能:Vite是一种新型的前端构建工具,它的主要特点是利用了浏览器原生的ES模块支持,在开发阶段提供了更快的冷启动速度和热模块替换(HMR)。在Vue项目中,Vite可以快速地启动开发服务器,并且能够高效地处理模块的更新。
      • 工作流程:在开发模式下,Vite不需要像Webpack那样打包整个项目,而是直接利用浏览器对ES模块的支持,当浏览器请求一个模块时,Vite会即时编译并返回这个模块的内容。在构建生产版本时,Vite也会进行一定程度的优化和打包,以确保项目在生产环境中的性能。
  3. 在运行Vue项目中连接Websocket的方式
    • 在Vue项目中使用原生Websocket API
      • 在Vue组件中,可以通过new WebSocket('ws://your - websocket - server - url')来创建一个Websocket连接。例如:
      export default {data() {return {socket: null,messages: []};},mounted() {this.socket = new WebSocket('ws://localhost:8080');this.socket.addEventListener('open', () => {console.log('Websocket connection opened');});this.socket.addEventListener('message', (event) => {this.messages.push(event.data);});this.socket.addEventListener('close', () => {console.log('Websocket connection closed');});}
      }
      
      • 上述代码在mounted生命周期钩子中创建了一个Websocket连接。当连接打开时,会在控制台打印一条消息;当收到消息时,会将消息内容添加到messages数组中;当连接关闭时,也会打印相应的消息。
    • 使用第三方库(如Socket.io)辅助连接(以Webpack为例)
      • 首先安装socket.io - client库,通过npm install socket.io-client
      • 然后在Vue组件中引入并使用:
      import io from'socket.io - client';
      export default {data() {return {socket: null,messages: []};},mounted() {this.socket = io('http://localhost:8080');this.socket.on('connect', () => {console.log('Socket.io connection established');});this.socket.on('message', (data) => {this.messages.push(data);});this.socket.on('disconnect', () => {console.log('Socket.io connection lost');});}
      }
      
      • 这里使用socket.io-client库来建立连接,它提供了更简洁的API和一些额外的功能,如自动重连等。在Webpack项目中,需要确保在webpack.config.js中正确配置了相关的加载器和插件,以处理引入的第三方库。
  4. Websocket应用更新相关内容(结合Webpack和Vite的热更新机制)
    • Webpack热模块替换(HMR)与Websocket更新配合
      • Webpack的HMR允许在运行时更新模块,而不需要刷新整个页面。当Websocket收到新的数据导致相关模块需要更新时,Webpack的HMR可以发挥作用。例如,在一个展示实时数据的图表组件中,当Websocket收到新的图表数据后,Webpack可以通过HMR更新这个图表组件,而保持页面的其他部分不变。
      • 实现方式是通过配置webpack - dev - server的HMR选项,并且在Vue组件中编写相应的代码来处理模块更新。在webpack.config.js中,需要添加如下配置:
      module.exports = {//...其他配置devServer: {hot: true}
      };
      
      • 然后在Vue组件中,可以使用module.hot.accept来处理模块更新。例如:
      if (module.hot) {module.hot.accept(['./components/Chart.vue'], () => {// 当Chart.vue模块更新时的处理逻辑console.log('Chart.vue has been updated');});
      }
      
    • Vite热模块替换与Websocket更新配合
      • Vite的HMR机制更加高效。当Websocket触发数据更新导致模块需要更新时,Vite会快速地更新对应的模块。在Vue项目中,Vite会自动识别组件的更新并进行热替换。
      • 例如,当Websocket收到新的数据并更新了一个组件的数据状态时,Vite会重新渲染这个组件。在代码中,不需要像Webpack那样显式地配置很多HMR相关的内容,因为Vite默认就支持高效的热模块替换。但是,在组件内部仍然需要正确地处理数据更新的逻辑,比如通过watch属性或者computed属性来更新DOM显示。例如:
      export default {data() {return {dataFromSocket: null};},watch: {dataFromSocket(newValue) {// 根据新的数据更新DOMconsole.log('Data from Websocket updated:', newValue);}},mounted() {// 假设这里是Websocket接收数据的逻辑this.socket.addEventListener('message', (event) => {this.dataFromSocket = event.data;});}
      }
      

vite 热启动探索

  1. Vite开发服务器端启动WebSocket连接
    • 启动过程
      • 当Vite启动开发服务器时,它会在内部初始化WebSocket服务器。这个过程是由Vite的核心代码完成的,具体来说是在服务端模块(通常基于Node.js)中实现的。Vite使用了一些底层的Node.js网络库来创建和管理WebSocket连接。
      • 例如,Vite可能会使用ws库(一个流行的Node.js WebSocket库)来建立服务器。在Vite的代码内部,大致会有如下的初始化步骤(简化代码):
      const WebSocket = require('ws');
      const wss = new WebSocket.Server({ port: 3000 }); // 假设端口为3000
      
    • 等待浏览器连接
      • 一旦WebSocket服务器建立,它就开始等待浏览器的连接请求。在这个阶段,服务器会监听指定的端口(如上述例子中的3000端口),并准备好处理浏览器发送过来的WebSocket连接请求。
      • 当浏览器请求连接时,服务器会进行一系列的握手操作来建立连接。这个握手过程是基于WebSocket协议标准的,包括交换一些协议头信息,以确保双方都支持WebSocket通信并且能够理解对方发送的消息。
  2. 浏览器端建立连接的方式
    • HTML页面中的脚本触发连接
      • 在Vite开发的项目中,浏览器会加载项目的HTML页面。在这个HTML页面中,通常会有一个JavaScript脚本(可能是在<script type="module">标签中)来触发与Vite开发服务器的WebSocket连接。
      • 例如,在Vite生成的HTML页面的<script>标签(或者是在入口的JavaScript模块中)可能会有这样的代码来建立连接:
      const socket = new WebSocket('ws://localhost:3000');
      
      • 这里的ws://localhost:3000是WebSocket连接的URL,其中localhost是开发服务器的主机名,3000是服务器监听的端口号。这个URL的格式是根据WebSocket协议规范来定义的,告诉浏览器要连接到哪个服务器和端口。
    • 连接事件处理
      • 当浏览器发起连接请求后,会触发一系列的事件。首先是open事件,在这个事件的处理函数中,可以进行一些初始化操作,比如向服务器发送一些初始信息或者设置一些连接相关的状态。例如:
      socket.addEventListener('open', () => {console.log('WebSocket connection opened');// 可以在这里向服务器发送初始消息,如客户端的一些环境信息等
      });
      
    • 接收和发送消息的机制
      • 一旦连接建立成功,浏览器和服务器就可以通过这个WebSocket连接进行双向通信。在浏览器端,可以通过send方法向服务器发送消息,例如:
      socket.send('This is a message from the browser');
      
      • 同时,浏览器需要监听服务器发送过来的消息。这是通过监听message事件来实现的,当服务器发送消息过来时,message事件会被触发,然后可以在事件处理函数中对消息进行处理,例如:
      socket.addEventListener('message', (event) => {const message = event.data;console.log('Received message:', message);// 根据收到的消息内容进行相应的操作,如更新组件等
      });
      
  3. Vite热更新中的消息传递与连接维护
    • 在Vite的热更新过程中,服务器(Vite开发服务器)会利用这个已经建立的WebSocket连接向浏览器发送更新消息。当一个Vue组件或者其他模块文件发生变化时,Vite会重新编译相关模块,并将更新消息(包含更新的模块路径、新的模块代码等内容)通过WebSocket发送给浏览器。
    • 浏览器收到更新消息后,会根据消息中的内容进行模块更新操作。这个过程中,WebSocket连接会一直保持开启状态,除非遇到网络问题、浏览器关闭或者开发服务器停止等情况。通过这种方式,Vite实现了高效的热更新推送机制,使得浏览器能够及时获取模块更新信息并进行相应的处理,从而提供流畅的开发体验。

websocket -心跳

  1. 理解心跳机制
    • 心跳机制的原理
      • 心跳机制是为了保持连接的活跃状态。在Websocket通信中,客户端和服务器之间会周期性地发送一个很小的消息(心跳包)来互相确认对方还在连接状态。例如,客户端每隔一段时间(如10秒)向服务器发送一个简单的消息,服务器收到后回复一个确认消息。如果客户端在一定时间内没有收到服务器的回复,就可以认为连接出现问题,从而触发重连。
    • 在Nginx中的应用场景
      • Nginx作为反向代理服务器,在处理Websocket连接时,心跳机制可以帮助检测连接的有效性。当后端的Websocket服务器和客户端之间的连接长时间没有数据传输时,Nginx可以通过心跳包来判断连接是否还正常,避免因为网络波动等原因导致连接被错误地断开。
  2. Nginx配置心跳检测相关指令
    • proxy_read_timeout和proxy_send_timeout
      • 功能说明proxy_read_timeout用于设置Nginx从后端服务器读取数据的超时时间,proxy_send_timeout用于设置Nginx向后端服务器发送数据的超时时间。这两个指令可以间接用于心跳检测。
      • 示例配置
      location /websocket {proxy_pass http://backend - websocket - server;proxy_read_timeout 60s;proxy_send_timeout 60s;
      }
      
      • 在上述配置中,Nginx在与后端Websocket服务器通信时,如果读取或发送数据超过60秒没有响应,就会认为连接出现问题。这个时间可以根据实际情况进行调整,例如,对于频繁发送心跳包的场景,可以适当缩短这个时间。
    • proxy_http_version和proxy_set_header
      • 功能说明proxy_http_version用于设置代理的HTTP版本,对于Websocket,需要设置为1.1,因为Websocket是基于HTTP/1.1协议升级而来的。proxy_set_header用于设置发送到后端服务器的请求头。在Websocket连接中,需要正确设置ConnectionUpgrade头来实现协议升级。
      • 示例配置
      location /websocket {proxy_pass http://backend - websocket - server;proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection "upgrade";proxy_read_timeout 60s;proxy_send_timeout 60s;
      }
      
      • 这里通过设置proxy_http_versionproxy_set_header,正确地将客户端的Websocket升级请求转发到后端服务器,并且在心跳检测过程中,保证了协议的正确通信。
  3. 客户端和服务器端配合实现心跳机制
    • 客户端实现
      • 在客户端(如浏览器中的JavaScript代码),可以使用setInterval函数来定期发送心跳包。例如:
      let socket = new WebSocket('ws://your - websocket - url');
      socket.addEventListener('open', () => {setInterval(() => {socket.send('heartbeat');}, 10000); // 每隔10秒发送一个心跳包
      });
      socket.addEventListener('message', (event) => {if (event.data === 'heartbeat - ack') {console.log('Heartbeat received from server');}
      });
      
      • 上述代码在Websocket连接打开后,每隔10秒发送一个heartbeat消息作为心跳包。当收到服务器回复的heartbeat - ack消息时,会在控制台打印一条确认信息。
    • 服务器端实现(以Node.js为例)
      • 在服务器端(假设是基于Node.js的Websocket服务器),可以接收客户端的心跳包并回复确认消息。例如:
      const WebSocket = require('ws');
      const wss = new WebSocket.Server({ port: 8080 });
      wss.on('connection', (socket) => {socket.on('message', (message) => {if (message === 'heartbeat') {socket.send('heartbeat - ack');}});
      });
      
      • 这样,服务器收到客户端发送的heartbeat心跳包后,会发送heartbeat - ack消息进行回复,通过Nginx的心跳检测相关配置,就可以有效地减少因为连接超时而导致的重连情况。

websocket 事件监听

  1. open事件
    • 含义和触发时机
      • open事件在Websocket连接成功建立时触发。这意味着客户端和服务器之间的双向通信通道已经准备好,可以开始发送和接收消息。例如,当客户端发送了一个Websocket升级请求,服务器成功响应并完成协议切换后,open事件就会在客户端被触发。
    • 应用场景和示例代码(以浏览器端JavaScript为例)
      • 通常在open事件的处理函数中可以进行一些初始化操作,比如向服务器发送登录信息或者订阅某些频道。
      let socket = new WebSocket('ws://your - websocket - server - url');
      socket.addEventListener('open', () => {console.log('Websocket connection opened successfully.');// 向服务器发送登录信息let loginData = {username: 'user1',password: 'password1'};socket.send(JSON.stringify(loginData));
      });
      
  2. message事件
    • 含义和触发时机
      • message事件在客户端接收到服务器发送的消息或者服务器接收到客户端发送的消息时触发。无论是文本消息还是二进制消息都会触发这个事件。
    • 应用场景和示例代码(以浏览器端JavaScript为例)
      • 这个事件常用于接收和处理服务器推送的数据。例如,在一个实时聊天应用中,当服务器发送新的聊天消息时,message事件就会被触发,然后可以将消息显示在聊天界面上。
      let socket = new WebSocket('ws://your - websocket - server - url');
      socket.addEventListener('message', (event) => {let message = event.data;// 假设消息是JSON格式的聊天消息let chatMessage = JSON.parse(message);let chatBox = document.getElementById('chat - box');let newMessageElement = document.createElement('p');newMessageElement.textContent = chatMessage.sender + ': ' + chatMessage.content;chatBox.appendChild(newMessageElement);
      });
      
  3. close事件
    • 含义和触发时机
      • close事件在Websocket连接关闭时触发。连接关闭可能是由于多种原因,如服务器主动关闭、网络问题或者客户端主动调用close方法。
    • 应用场景和示例代码(以浏览器端JavaScript为例)
      • close事件的处理函数中,可以进行一些清理工作,比如清除定时器、释放资源或者提示用户连接已关闭。
      let socket = new WebSocket('ws://your - websocket - server - url');
      socket.close()
      socket.addEventListener('close', () => {console.log('Websocket connection closed.');// 清除可能存在的定时器(如心跳定时器)clearInterval(heartbeatTimer);// 提示用户let notification = document.createElement('div');notification.textContent = 'Websocket connection lost. Please try again later.';document.body.appendChild(notification);
      });
      
  4. error事件
    • 含义和触发时机
      • error事件在Websocket连接过程中出现错误时触发。这可能是由于网络故障、服务器故障或者协议错误等原因导致的。
    • 应用场景和示例代码(以浏览器端JavaScript为例)
      • 可以在error事件处理函数中记录错误信息,尝试重新连接或者向用户显示错误提示。
      let socket = new WebSocket('ws://your - websocket - server - url');
      socket.addEventListener('error', (event) => {console.error('Websocket error:', event);// 尝试重新连接reconnectWebSocket();
      });
      

应用过程中问题总结

  1. 连接建立问题

    • 问题描述
      • 无法成功建立Websocket连接是常见的问题。可能是由于网络配置、服务器设置或者客户端代码错误导致的。例如,防火墙阻止了Websocket协议通信,或者客户端请求的URL路径错误。
    • 解决方案
      • 检查网络和防火墙:确保网络畅通,并且防火墙允许Websocket协议(通常使用的端口是80或443用于通过HTTP/HTTPS升级,或者自定义端口如8080等)的通信。在服务器端,检查安全组设置(如果是云服务器)和防火墙规则,允许传入的Websocket连接请求。
      • 检查URL和协议升级请求:在客户端代码中,仔细检查Websocket连接的URL是否正确。同时,确保请求头中包含正确的协议升级信息(如Connection: upgradeUpgrade: websocket)。对于通过代理服务器(如Nginx)的情况,要正确配置代理服务器以支持Websocket协议升级。
  2. 连接稳定性问题

    • 问题描述
      • 连接在使用过程中频繁中断,可能是由于网络波动、服务器负载过高或者长时间没有数据传输导致连接被服务器或代理认为是空闲而关闭。
    • 解决方案
      • 实现心跳机制:在客户端和服务器端实现心跳机制,定期发送心跳包来保持连接活跃。例如,客户端每隔一定时间(如10 - 30秒)发送一个简单的心跳消息,服务器收到后回复确认消息。在服务器端(如使用Node.js的ws库)可以这样实现:
      const WebSocket = require('ws');
      const wss = new WebSocket.Server({ port: 8080 });
      wss.on('connection', (socket) => {socket.on('message', (message) => {if (message === 'heartbeat') {socket.send('heartbeat - ack');}});
      });
      
      • 在客户端(如浏览器中的JavaScript):
      let socket = new WebSocket('ws://your - websocket - url');
      socket.addEventListener('open', () => {setInterval(() => {socket.send('heartbeat');}, 10000); 
      });
      socket.addEventListener('message', (event) => {if (event.data === 'heartbeat - ack') {console.log('Heartbeat received from server');}
      });
      
      • 优化服务器配置:检查服务器的负载情况,如CPU、内存使用率等。如果服务器负载过高,考虑增加服务器资源(如升级服务器配置或者增加服务器实例)。同时,调整服务器端的连接超时设置,使其与心跳机制相匹配,避免因为超时而错误地关闭连接。
  3. 消息传输问题

    • 问题描述
      • 消息丢失或乱序是消息传输过程中可能出现的问题。消息丢失可能是因为网络故障或者服务器处理不当,乱序可能是由于网络延迟的差异或者多线程/多进程处理导致的。
    • 解决方案
      • 消息确认机制:在客户端发送消息后,等待服务器的确认消息。如果没有收到确认消息,可以考虑重新发送。在服务器端,确保消息处理逻辑正确,并且在成功处理消息后及时发送确认消息给客户端。例如,在客户端可以设置一个消息队列和定时器,对于未收到确认的消息进行重新发送:
      let messageQueue = [];
      let socket = new WebSocket('ws://your - websocket - url');
      socket.addEventListener('open', () => {// 发送消息function sendMessage(message) {socket.send(message);messageQueue.push(message);}// 接收确认消息socket.addEventListener('message', (event) => {if (event.data === 'message - ack') {let sentMessage = messageQueue.shift();console.log(`Message ${sentMessage} confirmed.`);}});
      });
      
      • 消息排序和缓存机制:如果发现消息乱序,可以在客户端和服务器端建立消息缓存和排序机制。例如,给每个消息添加一个序列号,客户端按照序列号发送消息,服务器端收到消息后按照序列号进行排序处理。
  4. 跨域问题

    • 问题描述
      • 当Websocket请求的源(Origin)与服务器的允许跨域策略不匹配时,会出现跨域问题。这是由于浏览器的同源策略限制导致的。
    • 解决方案
      • 服务器端配置跨域策略:在服务器端设置允许跨域的头信息。例如,在Node.js的Websocket服务器中,可以使用cors中间件来允许跨域请求:
      const express = require('express');
      const app = express();
      const http = require('http');
      const server = http.createServer(app);
      const { Server } = require('ws');
      const wss = new Server({ server });
      app.use(cors()); 
      
      • 对于其他服务器技术(如Java、Python等)也有相应的跨域处理方法,如在Java的Spring Boot中,可以通过配置@CrossOrigin注解来允许跨域的Websocket连接。

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

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

相关文章

Vue 3与TypeScript集成指南:构建类型安全的前端应用

在Vue 3中使用TypeScript&#xff0c;可以让你的组件更加健壮和易于维护。以下是使用TypeScript与Vue 3结合的详细步骤和知识点&#xff1a; 1. 环境搭建 首先&#xff0c;确保你安装了Node.js&#xff08;推荐使用最新的LTS版本&#xff09;和npm或Yarn。然后&#xff0c;安…

React-useRef与DOM操作

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 ref使用 组件重新渲染时&#xff0c;react组件函数里的代码会重新执行&#xff0c;返回新的JSX&#xff0c;当你希望组件“记住”某些信息&#xff0c;但又不想让这些信息触发新的渲染时&#xff0c;你可以使用ref&#x…

# Spring事务

Spring事务 什么是spring的事务&#xff1f; 在Spring框架中&#xff0c;事务管理是一种控制数据库操作执行边界的技术&#xff0c;确保一系列操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…

Jenkins更换主题颜色+登录页面LOGO图片

默认主题和logo图片展示 默认主题黑色和白色。 默认LOGO图片 安装插件 Login ThemeMaterial Theme 系统管理–>插件管理–>Available plugins 搜不到Login Theme是因为我提前装好了 没有外网的可以参考这篇离线安装插件 验证插件并修改主题颜色 系统管理–>A…

LLM文档对话 —— pdf解析关键问题

一、为什么需要进行pdf解析&#xff1f; 最近在探索ChatPDF和ChatDoc等方案的思路&#xff0c;也就是用LLM实现文档助手。在此记录一些难题和解决方案&#xff0c;首先讲解主要思想&#xff0c;其次以问题回答的形式展开。 二、为什么需要对pdf进行解析&#xff1f; 当利用L…

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人&#xff0c;包含大模型接入&#xff0c;流式输出&#xff0c;语音识别&#xff0c;语音合成&#xff0c;口型驱动&#xff0c;动画蓝图&#xff0c;语音唤醒等功能。 课程介绍视频如下&#xff1a; 【虚幻引擎】UE5 历时一个多月…

上位机编程命名规范

1.大小写规范 文件名全部小写是一种广泛使用的命名约定&#xff0c;特别是在跨平台开发和开源项目中。主要原因涉及技术约束、可读性和一致性等方面。以下是原因和优劣势的详细分析&#xff1a; 1. 避免跨平台问题 不同操作系统对文件名的大小写处理方式不同&#xff1a; Li…

JAVA:探索 PDF 文字提取的技术指南

1、简述 随着信息化的发展&#xff0c;PDF 文档成为了信息传播的重要媒介。在许多应用场景下&#xff0c;如数据迁移、内容分析和信息检索&#xff0c;我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件&#xff0c;其中 PDFBox 和 iText 是最常用的两个。…

form表单的使用

模板 <template><el-form :model"formData" ref"form1Ref" :rules"rules"><el-form-item label"手机号" prop"tel"><el-input v-model"formData.tel" /></el-form-item><el-f…

【priority_queue的使用及模拟实现】—— 我与C++的不解之缘(十六)

前言 ​ priority_queue&#xff0c;翻译过来就是优先级队列&#xff0c;但是它其实是我们的堆结构&#xff08;如果堆一些遗忘的可以看一下前面的文章复习一下【数据结构】二叉树——顺序结构——堆及其实现_二叉树顺序结构-CSDN博客&#xff09;&#xff0c;本篇文章就来使用…

php 与 thinkphp 13 张 表 关联 查询,a.pry_key=b.pry_key and c.pry_key= b.pry_key 代码示例

在 PHP 中&#xff0c;假设你有 13 张表并且这些表之间通过 pry_key 关联&#xff0c;你可以使用 SQL 的 JOIN 来将这些表连接在一起&#xff0c;然后通过 PHP 执行该查询。以下是一个简化的示例&#xff0c;展示如何通过 JOIN 语句将 13 张表联接&#xff0c;并使用 PHP 代码执…

MacOS下的Opencv3.4.16的编译

前言 MacOS下编译opencv还是有点麻烦的。 1、Opencv3.4.16的下载 注意&#xff0c;我们使用的是Mac&#xff0c;所以ios pack并不能使用。 如何嫌官网上下载比较慢的话&#xff0c;可以考虑在csdn网站上下载&#xff0c;应该也是可以找到的。 2、cmake的下载 官网的链接&…

Kibana 本地安装使用

一 Kibana简介 1.1 Kibana 是一种数据可视化工具&#xff0c;通常需要结合Elasticsearch使用&#xff1a; Elasticsearch 是一个实时分布式搜索和分析引擎。 Logstash 为用户提供数据采集、转换、优化和输出的能力。 Kibana 是一种数据可视化工具&#xff0c;为 Elasticsear…

#Js篇:JSON.stringify 和 JSON.parse用法和传参

JSON.stringify 和 JSON.parse 1. JSON.stringify JSON.stringify 方法将一个 JavaScript 对象或数组转换为 JSON 字符串。 基本用法 const obj { name: "Alice", age: 25 }; const jsonString JSON.stringify(obj); console.log(jsonString); // 输出: {"…

基于大数据爬虫数据挖掘技术+Python的网络用户购物行为分析与可视化平台(源码+论文+PPT+部署文档教程等)

#1024程序员节&#xff5c;征文# 博主介绍&#xff1a;CSDN毕设辅导第一人、全网粉丝50W,csdn特邀作者、博客专家、腾讯云社区合作讲师、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

android 使用MediaPlayer实现音乐播放--获取音乐数据

前面已经添加了权限&#xff0c;有权限后可以去数据库读取音乐文件&#xff0c;一般可以获取全部音乐、专辑、歌手、流派等。 1. 获取全部音乐数据 class MusicHelper {companion object {SuppressLint("Range")fun getMusic(context: Context): MutableList<Mu…

Android kotlin之配置kapt编译器插件

配置项目目录下的gradle/libs.versions.toml文件&#xff0c;添加kapt配置项&#xff1a; 在模块目录下build.gradle.kt中增加 plugins {alias(libs.plugins.android.application)alias(libs.plugins.jetbrains.kotlin.android)// 增加该行alias(libs.plugins.jetbrains.kotl…

【FAQ】HarmonyOS SDK 闭源开放能力 —Share Kit

1.问题描述&#xff1a; 使用系统分享组件分享本地文件&#xff0c;点击分享菜单下方的“另存为” 将要分享的文件分享至系统文件管理中&#xff0c;在文件管理中查看分享进来的文件为0B。尝试了3种uri的写法都不行&#xff0c;代码如下&#xff1a; const uri getContext()…

音视频入门基础:MPEG2-TS专题(7)——FFmpeg源码中,读取出一个transport packet数据的实现

一、引言 从《音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;3&#xff09;——TS Header简介》可以知道&#xff0c;TS格式有三种&#xff1a;分别为transport packet长度固定为188、192和204字节。而FFmpeg源码中是通过read_packet函数从一段MPEG2-TS传输流/TS文件中读…