WebSocket 入门：简易聊天室
大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。
WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务端也可以主动发消息给客户端。
尤其是后者，让我们不用再基于 HTTP 长轮询或短轮询的低效方式来实现服务端通知。相比 HTTP，WebSocket 的服务端推送更轻量，并能减少服务端的压力。
服务端
nodejs 并没有提供原生的 websocket 模块。如果要实现，需要基于 net 模块，根据 websocket 标准去做实现。
因为实现很复杂，所以西瓜哥我选择直接用第三库 ws。
yarn add ws
类似 nodejs 原生的 http 等模块，ws 库支持 WebSocket 的服务端或客户端， 提供偏底层的 API。
我们显示服务端代码：
import { WebSocketServer } from "ws";// 创建一个 ws 服务
const wsSever = new WebSocketServer({port: 6060,
});// 每当一个客户端进行了 ws 连接，就会创建一个 ws 对象
wsSever.on("connection", (ws) => {// 新客户端连接时，广播wsSever.clients.forEach((client) => {client.send(`有人进入聊天室，当前聊天室人数：${wsSever.clients.size}`);});// 广播任何客户端发送的消息ws.on("message", (data) => {const msg = data.toString();wsSever.clients.forEach((client) => {client.send(msg);});});// 当有客户端退出时，广播ws.on("close", () => {wsSever.clients.forEach((client) => {client.send(`有人退出了聊天室，当前聊天室人数：${wsSever.clients.size}`);});});
});
每当一个客户端进行了 websocket 连接，都会触发 wsServer 的 connection 事件，然后拿到一个 ws 对象。
这个 ws 对象代表了某个客户端和服务端的连接，我们可以通过它来接收对应客户端的消息，和服务端对指定客户端进行主动消息推送。
新创建的 ws 对象会在建立连接时保存到 wsServer.clients 集合下，并在关闭连接后移除。所以我们可以利用这个 wsServer.clients 来进行广播，实现聊天室功能。
客户端
客户端使用原生的 WebSocket 对象，来和服务端进行 websocket 连接。
const ws = new WebSocket('ws://localhost:6060');ws.addEventListener('message', (event) => {const div = document.createElement('div');div.innerText = event.data;document.body.append(div);
})// 点击发送按钮，将输入框中的内容发送给服务器
const input = document.querySelector('input');
const btn = document.querySelector('button');
btn.onclick = () => {ws.send(input.value);input.value = '';
}
效果
改为使用 Socket.IO
ws 库是偏底层的实现，比较简单。
另一个库 Socket.IO 的底层使用了 ws，并做功能上的增强，提供更多的能力。
相比 ws，Socket.IO 能够做到：
- 如果浏览器不支持 WebSocket，回退为 HTTP 长轮询方案来模拟 WebSocket（ WebSocket 于 2011 年完成 RFC，已经很久了，目前来说主流浏览器都已经支持 WebSocket 了，还不支持 WebSocket 的浏览器是屑）；
- 使用心跳包机制实现了自动重连。
- 包缓存。断连时发送数据，会将数据保存下来，等重新连接后再发送；
- 自定义事件支持；
- 广播；
相比自己去一个个实现，使用流行的轮子可能是更好的选择。
我们将前面的功能用 Socket.IO 实现一下。
服务端：
import { Server } from "socket.io";// socket.io v3.x 开始默认不允许跨域，需要在配置显式设置为允许跨域
const io = new Server(6060, { cors: { origin: "*" } });io.on("connection", (socket) => {// 新客户端连接时，广播io.emit("chat", `有人进入聊天室，当前聊天室人数：${io.engine.clientsCount}`);// 广播任何客户端发送的消息socket.on("chat", (data) => {io.emit("chat", data);});// 当有客户端退出时，广播socket.on("disconnect", () => {io.emit("chat", `有人退出了聊天室，当前聊天室人数：${io.engine.clientsCount}`);});
});需要特别注意的是，Socket.IO 的 v3.x 版本开始，默认不允许跨域，需要在配置显式设置为允许跨域。
客户端：
const socket = io('ws://localhost:6060');socket.on('chat', (data) => {const div = document.createElement('div');div.innerText = data;document.body.append(div);
})// 点击发送按钮，将输入框中的内容发送给服务器
const input = document.querySelector('input');
const btn = document.querySelector('button');
btn.onclick = () => {console.log('发送');socket.emit('chat', input.value);input.value = '';
}
Socket.IO 优点是实现了生产环境需要的底层非业务能力，让我们能更心无旁骛地去编写业务代码。
缺点是丢失了灵活性。因为做了定制化，所以需要配套使用 Socket.IO 的客户端和服务端库的包，某种意义脱离了网络协议标准。在出现跨语言（比如前端是 JS，后端是 Java）的场景时，需要提供对应的语言的 Socket.IO 实现。
demo
demo 已经放到 github 上了，使用方法在 README.md 中有说明。
https://github.com/F-star/websocket-chat-demo
结尾
本文演示了 WebSocket 简易的聊天室功能是如何实现的，希望对你有所帮助。
我是前端西瓜哥，欢迎关注我，学习更多前端知识。
相关文章：
掌握Android Fragment开发之魂：Fragment的深度解析（上）
Fragment是Android开发中用于构建动态和灵活界面的基石。它不仅提升了应用的模块化程度，还增强了用户界面的动态性和交互性，允许开发者将应用界面划分为多个独立、可重用的部分，每个部分都可以独立于其他部分进行操作。本文将从以下几个方面深…...
python 项目如何生成 requirements.txt文件
在Python项目中生成requirements.txt文件是一个很好的实践，它可以帮助记录项目依赖，便于他人复现环境或部署应用。以下是几种常见的生成方法： 使用pip 安装所有依赖: 确保你的项目环境中已经安装了所有需要的包。 生成requirements.txt: 在…...
最长子序列
为了解决这个问题，我们可以使用滑动窗口的方法。滑动窗口可以让我们在不需要嵌套循环的情况下遍历序列中所有的连续子序列。 以下是这个方法的步骤：初始化两个指针 start 和 end，都指向序列的开始。 初始化当前和 current_sum 为 0。 移动 end 指针，每次移动都将 end 指向的…...
GreatSQL的sp中添加新的sp_instr引入的bug解析
GreatSQL的sp中添加新的sp_instr引入的bug解析 一、问题发现 在一次开发中用到的sp需要添加新的sp_instr以满足需求，但是添加了数个sp_instr以后发现执行新的sp会发生core。注：本次使用的GreatSQL 8.0.32-251、sp_head.cc的init_sp_psi_keys()代码里面添加10个新的sp_instr：…...
对于习惯使用ftp传输的企业，如何寻找最佳的替代方案？
FTP协议广泛应用各行业的文件传输场景中，对于很多企业而言，由于FTP传输应用获取门槛低、使用普遍，因此，有较为稳定的FTP使用习惯，但即便如此，也不得不面对，FTP应用存在着严重缺陷： 传输效率问题：FTP协议作为最早的互联网文件传输协议，虽然解决了传输协议有无的问题，…...
spring boot中一般如何使用线程池
在Spring Boot中，线程池作为并发编程的核心工具，对于提升应用程序性能、优化资源利用和保证系统稳定性具有重要作用。本文将详细阐述如何在Spring Boot中正确使用线程池，包括配置参数、实例化、任务提交、监控及常见问题处理等环节࿰…...
WebSocket 入门：简易聊天室
大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。 WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务…...
Windows10添加WebDav地址时报错“输入的文件夹无效，请选择另一个”
一、问题描述在使用Windows10添加WebDav网络地址时，报错“输入的文件夹无效，请选择另一个”，如下图所示：二、问题分析这是由于Windows10的WebDav默认只支持https协议，没有支持http协议导致的。三、解决办法3.1、修改注…...
Cadence PCB仿真使用Allegro PCB SI生成串扰总结报告Crosstalk Summary Report及报告导读图文教程
🏡《Cadence 开发合集目录》 🏡《Cadence PCB 仿真宝典目录》 目录 1，概述2，生成报告3，报告导读4，总结1，概述 Crosstalk Summary Report是各种串扰问题的一个简要总结报告。本文简单介绍使用Allegro PCB SI生成Crosstalk Summary Report报告的方法，及其要点导读。…...
【5-卷积神经网络】北京大学TensorFlow2.0
课程地址：【北京大学】Tensorflow2.0_哔哩哔哩_bilibiliPython3.7和TensorFlow2.1六讲：神经网络计算：神经网络的计算过程，搭建第一个神经网络模型神经网络优化：神经网络的优化方法，掌握学习率、激活函数、损…...
C++初阶：vector类
文章目录1 vector介绍2 实现vector2.1 类的定义2.2 默认成员函数2.2.1 构造函数2.2.2 析构函数2.2.3 拷贝构造2.2.4 赋值重载2.3访问接口2.4 容量接口2.5 修改接口2.5.1 尾插尾删2.5.2 任意位置插入2.5.3 任意位置删除2.6 其他接口1 vector介绍 1 vector是表示可变大小数组的序…...
机器学习中软投票和硬投票的不同含义和理解
设置一个场景，比如对于今天音乐会韩红会出现的概率三个人三个观点 A：韩红出现的概率为47% B：韩红出现的概率为57% C：韩红出现的概率为97% 软投票：软投票会认为韩红出现的概率为1/3*(47%57%97%)67% 硬投票：…...
Linux系统之网络客户端工具
Linux系统之网络客户端工具一、Links工具1.Links工具介绍2.安装Links软件3.Links工具的使用4.打印网页源码输出5.打印url版本到标准格式输出二、wget工具1.wget工具介绍2.安装wget软件3.wget工具的使用三、curl工具1.curl工具的介绍2.curl的常用参数3.curl的基本使用四、scp工具…...
c++函数（2）
这里写自定义目录标题默认参数函数重载递归函数变量周期默认参数 可为形参指定默认值，如果在函数调用时，没有指定与形参对应的实参时，就自动使用默认值。 默认参数可简化复杂函数的调用。 默认参数在函数名第一次出现在程序中指定࿰…...
HackTheBox Stocker API滥用，CVE-2020-24815获取用户shell，目录遍历提权
靶机地址： https://app.hackthebox.com/machines/Stocker枚举 使用nmap枚举靶机 nmap -sC -sV 10.10.11.196机子开放了22，80端口，我们本地解析一下这个域名 echo "10.10.11.196 stocker.htb" >> /etc/hosts 去浏览器访问…...
Java线程池应用实例
线程池的学习基本概念好处应用场景ThreadPoolExecutor实例理解：执行流程自定义线程池4大核心参数测试demo结论：ExecutorService常用方法思考获取ExecutorService代码示例ScheduleExecutorService常用获取方式如下ScheduledExecutorService常用方法如下:代…...
数字签名技术
介绍数字签名 数字签名是一种用于确认数据的完整性、确认发送者身份的技术。 签名主要包含两个过程：做摘要、进行非对称加密。 做摘要：签名者使用消息摘要算法对消息做摘要；进行非对称加密，得到签名值：签名者使用私…...
WPF-3D图形
WPF-3D图形 WPF的3D功能可以在不编写任何c#代码的情况下进行绘制，只需要使用xaml即可完成3D图形的渲染。本文主要讲述了WPF-3D中的关键概念， 以及常用到的命中测试、2d控件如何在3D对象中进行渲染，除此之外，还演示了如何导入外部…...
返回值的理解
前言 我们写的函数是怎么返回的，该如何返回一个临时变量，临时变量不是出栈就销毁了吗，为什么可以传递给调用方？返回对象的大小对使用的方式有影响吗？本文将带你探究这些问题，阅读本文需要对函数栈帧有一定…...
前端布局神器display:flex
Flexbox，一种CSS3的布局模式，也叫做弹性盒子模型，用来为盒装模型提供最大的灵活性。首先举一个栗子，之前我们是这样实现一个div盒子水平垂直居中的。在知道对象高宽的情况下，对居中元素绝对百分比定位，然后…...
【Typescript学习】使用 React 和 TypeScript 构建web应用（三）所有组件
教程来自freecodeCamp：【英字】使用 React 和 TypeScript 构建应用程序 跟做，仅记录用 其他资料：https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide/ 第三天 以下是视频(0:40-0:60) 的内容 目录第三天1 创建Todo…...
7.3 矩阵范数
定义 向量有范数，矩阵也有范数，定义和向量范数类似，不过多了一条要求。它的定义如下： 正定性positivity,∥A∥≥0\parallel A\parallel\ge 0∥A∥≥0，只有A0A0A0时才取等号；非负齐次性homogeneity或scalin…...
Jetpack架构组件库：Hilt
Hilt Hilt 是基于 Dagger2 的依赖注入框架，Google团队将其专门为Android开发打造了一种纯注解的使用方式，相比 Dagger2 而言使用起来更加简单。 依赖注入框架的主要作用就是控制反转（IOC, Inversion of Control）, 那么什么是控制…...
InstanceNorm LayerNorm
InstanceNorm && LayerNorm author: SUFEHeisenberg date: 2023/01/26 先说结论: 将Transformer类比于RNN：一个token就是一层layer，对一整句不如token有意义原生Bert代码或huggingface中用的都是InstanceNorm instead of LayerNormÿ…...
数据结构---堆
堆 定义 基本操作 建堆 堆排序 优先队列 一、堆的定义： 堆必须是一个完全二叉树 还得满足堆序性 什么是完全二叉树呢？ 完全二叉树只允许最后一行不为满 且最后一行必须从左到右排序 最后一行元素之间不可有间隔，中间不可有空缺 如下几棵树…...
3小时精通opencv(五) 利用TrackBar进行颜色检测
3小时精通opencv(五) 利用TrackBar进行颜色检测 参考视频资源:3h精通Opencv-Python 本章内容介绍如何利用TrackBar调节色域, 手动提取到我们需要的颜色 文章目录3小时精通opencv(五) 利用TrackBar进行颜色检测创建Trackbar色彩检测创建Trackbar 在opencv中使用createTrackbar函…...
学习记录673@项目管理之进度管理案例
本文主要是进度管理之关键链路法的案例。 案例 Perfect 项目的建设方要求必须按合同规定的期限交付系统，承建方项目经理李某决定严格执行项目进度管理，以保证项目按期完成。他决定使用关键路径法来编制项目进度网络图。在对工作分解结构进行认真分析后&…...
【设计模式】结构型模式·组合模式
学习汇总入口【23种设计模式】学习汇总(数万字讲解体系思维导图) 写作不易，如果您觉得写的不错，欢迎给博主来一波点赞、收藏~让博主更有动力吧！ 一.概述 又称为部分整体模式，用于把一组相似的对象当作一个单一的对象。组合模式依…...
Vue-Router详解
1、前端路由的发展历程 1.1、认识前端路由 路由其实是网络工程中的一个术语： 在架构一个网络时，非常重要的两个设备就是路由器和交换机。当然，目前在我们生活中路由器也是越来越被大家所熟知，因为我们生活中都会用到路由器&…...
Eclipse中的Build Path
Eclipse中的Build Path简介如果修改了Build Path中的中的JRE版本，记得还需要同步修改Java编译器的版本，如下图红框所示简介 Build Path是Java工程包含的资源属性合集，用来管理和配置此Java工程中【除当前工程自身代码以外的其他资源】的引用…...
Python与Matlab混合编程案例
前言因为项目需要，需要批处理很多Matlab的.m文件，从每个文件中提取结果合并到一个文件中。 很明显，如果手工统计，几百个文件会累死的。 因此立即想到了Python在批处理方面的优势，因此就在网上找了相关资料，…...
stack、queue、priority_queue
容器适配器 适配器是一种设计模式(设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结)，该种模式是将一个类的接口转换成客户希望的另外一个接口。 其中stack和queue都是容器适配器，其中stack可以封装vector、list以及我们…...
高通平台开发系列讲解（GPS篇）gpsONE 系统架构
文章目录 一、系统架构图二、gpsONE系统组成三、gpsONE交互流程沉淀、分享、成长，让自己和他人都能有所收获！😄 📢高通的定位系统模块，名称叫gpsONE。 一、系统架构图 二、gpsONE系统组成 GPS系统架构可以分为六个部分： APP层Framework Client端（LocationManager API…...
zkMove——针对Move合约生态的zkVM
1. 引言 Move为不同于Solidity的，开源的安全的智能合约开发语言，最早由Facebook为Diem链创造开发。不过，Move本身设计为与平台无关的语言，具有通用的库、工具，并使得采用完全不同数据模型和执行模型的链的开发者社区都…...
贪心算法的题目
每一步都做出一个局部最优的选择，最终的结果就是全局最优 只有一部分问题才能用贪心算法（严格来讲，一个问题能不能用贪心算法需要证明的） 2022.8.30 蔚来笔试题： 有a个y,b个o,c个u,用这些字母拼成一个字符串…...
线程控制--Linux
文章目录线程理解线程的优点与缺点进程的多个线程共享线程控制线程创建线程终止线程等待线程分离总结线程理解 谈及线程，就不得不谈起进程与线程的关系了。学习完前面有关进程的知识，之前我们对进程的定义是：内核数据结构代码和数据。但是今…...
17 | 如何做好面试复盘？将经验提升为能力
前言 前言：面试是最好的查漏补缺机会，做好面试复盘又是十分的重要。 文章目录前言一. 关于复盘1. 什么是复盘（What）2. 复盘的目的（Why）3. 什么时候需要复盘（When）4. 怎么进行复盘&am…...
数据结构-树
1. 二叉树遍历 #include <stdbool.h> #include "stdio.h" #include "stdlib.h"typedef struct TNode *Position; typedef Position BinTree; // 二叉树类型 typedef char ElementType;// 树结点定义 struct TNode {ElementType Data; // 结点数据Bin…...
Python3 循环语句
本章节将为大家介绍 Python 循环语句的使用。 Python 中的循环语句有 for 和 while。 Python 循环语句的控制结构图如下所示： while 循环 Python 中 while 语句的一般形式： while 判断条件(condition)：执行语句(statements)…… 执行流程…...
时序数据处理中的拟合问题
对于深度学习或机器学习模型而言，我们不仅要求它对训练数据集有很好的拟合（训练误差），同时也希望它可以对未知数据集（测试集）有很好的拟合结果（泛化能力），所产生的测试误差被称为泛化误差。度量泛化能力的好坏，最直观的表现就是模型的过拟合（overfitting）和欠拟合（…...
[数据结构基础]排序算法第一弹 -- 直接插入排序和希尔排序
目录 一. 排序的概念及分类 1.1 排序的概念 1.2 常见的排序算法 二. 直接插入排序 2.1 直接插入排序的实现逻辑 2.2 直接插入排序的实现代码 2.3 直接插入排序的时间复杂度分析 三. 希尔排序 3.1 希尔排序的实现逻辑 3.2 希尔排序实现代码 3.3 希尔排序的效率测试 …...
厚积薄发打卡Day115：Debug设计模式＜简单工厂、工厂方法、抽象工厂＞
厚积薄发打卡Day115：Debug设计模式<简单工厂、工厂方法、抽象工厂> 简单工厂 定义 由一个工厂对象决定创建出哪一种产品类的实例（严格意义并不是设计模式，更是一种风格） 类型：创建型，但不属于GOF…...
python元组
python元组 文章目录python元组一、实验目的二、实验原理三、实验环境四、实验内容五、实验步骤1.创建元组2.访问元组3.修改元组4.删除元组5.索引及截取6.元组运算符7.内置函数总结一、实验目的 掌握元组的用法 二、实验原理 Python 的元组与列表类似，不同之处在…...
gcc中预定义的宏__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__
今天在看Linux系统编程这本书的代码的时候看到了__GNUC__，不太清楚这个宏所以去查了一下，以此记录。GNU C预定义了一系列的宏，这些宏都是以双下划线开始的，这里只讲一下__GNUC__ __GNUC_MINOR__ __GNUC_PATCHLEVEL__，完…...
AxMath使用教程（持续更新中）
前言 这两天学了学Latex，主要是为了以后写毕业论文做铺垫，而且Latex在数学公式这一方面，要比Word方便许多，于是我就下载了一款国产的公式编辑器——AxMath。永久会员不贵，只要36元，而且软件很好用…...
day11 栈和队列 | 20、有效的括号 1047、删除字符串中的所有相邻重复项 150、逆波兰表达式求值
题目 20、有效的括号 给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串，判断字符串是否有效。 有效字符串需满足： 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序…...
【前端面试】http面试整理
"一问一答"模型的协议 客户端通过http请求；服务器端根据请求返回客户想要的资源；客户端接收到资源；http是什么 HTTP是超文本传输协议，是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约…...
倒霉倒霉倒霉(传送门 bfs 三维数组 递归 综合运用
题目描述“啊！倒霉倒霉倒霉~”龙叔被困在一座大厦里了，可恶的瓦龙把这座大厦点燃了，他借机消灭龙叔。这座大厦有L层，每一层都有R*C个房间。熊熊火焰蔓延十分快，有的房间已经着火了，龙叔没办法通过。这时老爹…...
C++函数定义和调用介绍
C函数定义和调用介绍 函数的意义：利用率高，可读性强，利于移植。 一个C程序中主函数有且只有一个，是程序的入口，而函数（或称子函数）可以有很多。 每个 C 程序都至少有一个函数，即主…...
手把手带初学者快速入门 JAVA Web SSM 框架
博主也是刚开始学习SSM，为了帮大家节省时间，写下SSM快速入门博客 有什么不对的地方还请 私信 或者 评论区 指出 只是一个简单的整合项目，让初学者了解一下SSM的大致结构 项目先把框架写好，之后在填写内容 项目压缩包 完整的蓝奏…...
RocketMQ源码本地搭建调试
1 GitHub源码 git clone https://github.com/apache/rocketmq.git导入IDEA，可在命令行执行mvn compile一下，保证源码能够正确编译。本次我使用的master分支的版本-4.8.0。下面我们开始准备启动Namesrv。 2 启动Namesrv 到namesrv模块找到NamesrvStart…...
Axios 二次封装并使用
index.js import axios from "axios";let token localStorage.getItem("token"); // let token "123213"; class Request {// 自定义变量instance;constructor(config) {// console.log(config)// 创建axios 实例，变量接收this.in…...
【SpringCloud】Nacos集群搭建
集群结构图官方给出的Nacos集群图如下：其中包含3个nacos节点，然后一个负载均衡器代理3个Nacos。这里负载均衡器可以使用nginx。我们接下来要尝试 Nacos集群搭建，效果图如下所示：三个nacos节点的地址：节点ipportnacos1l…...
【CSDN的2022与2023】普普通通的三年，从懵懂、焦虑到坚定、奋进，破除焦虑努力成为更好的自己
大家好，我是黄小黄！一名普通的软件工程在读学生。最近终于闲下来了一丢丢！借着休息之余，来写一篇年度总结散散心~与其说是年度总结，不如说是给大学生活与莽莽撞撞的自己一个交代叭！ 这些都是小标题~碎碎念1…...
k8s单机版使用本地存储local-path-provisioner
在k8s单机环境中，我们经常使用本机路径作为持久化存储。在k8s官方文档中有两种方式使用本机存储，一种是hostPath，另一种是local volume，这两种都不支持动态扩容，并且程序移植改动比较大，而local-path-provi…...
MySQL优化（1）执行计划explain中type属性详解
系列文章目录1.初始化测试数据1.初始化表格（user表）2.初始化表格（product表）3.初始化表格（user表数据初始化）4.初始化表格（product表函数）5.初始化表格（product表数据初始…...
AJAX家政系统 自营+多商家(高级授权)+独立端口 -源码下载
应用介绍 后台：https://service.hnajax.com/hxeJVakAdf.php/index/login AJAX家政系统 自营多商家(高级授权)独立端口 基于FastAdmin和原生微信小程序开发的一款同城预约、上门服务、到店核销家政系统，用户端、服务端(高级授权)、门店端(高级授权)各端…...
C# 获取一个字符串中非数字部分？
方法一：使用正则表达式 使用正则表达式可以便捷地匹配并提取出字符串中所有非数字字符。与之前保留数字时的做法相反，这次我们将匹配数字并替换为空字符串，从而留下非数字部分。 using System; using System.Text.RegularExpressions;publi…...
设计列表结构
实现1.1，1.2的有序列表 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>ol{list-style: none;}li:before{color:#f00;font-family:Times New Roman;}li{counter-increment:a 1;}li…...
JS基础：js的2种基本用法，4个属性详解
你好，我是云桃桃。 一个希望帮助更多朋友快速入门 WEB 前端的程序媛。 云桃桃-大专生，一枚程序媛，感谢关注。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端工具”，可获取 Web 开发工具合…...
Mac远程桌面windows11
文章目录 一、Mac安装Microsoft Remote Desktop二、Window11打开远程登录权限三、常见问题 一、Mac安装Microsoft Remote Desktop 下载地址：点击这里官方下载 基本不用看，凭感觉用就行。搞不定详情见：官方说明 二、Window11打开远程登录权…...
口感与风味的完善结合：精酿啤酒的多样风格
啤酒的世界是丰富多彩的，不同的啤酒有着各自与众不同的口感和风味。而Fendi club啤酒，作为精酿啤酒的代表，以其多样化的风格和卓着的口感，吸引了无数啤酒爱好者的目光。 Fendi club啤酒的多样风格，首先体现在其原料的选…...
【竞技宝】欧冠：多特淘汰大巴黎进决赛，姆巴佩迷失
多特蒙德在本赛季欧冠半决赛第二回合较量中,跟大巴黎队狭路相逢。赛前,大部分球迷和媒体都看好坐拥姆巴佩的大巴黎队,可以靠着主场作战的优势,逆转多特蒙德晋级欧冠决赛。大巴黎队主场作战确实创造出不少得分机会,只可惜球队运气有些差,射门都打在了多特蒙德横梁上。反观多特蒙…...
什么是香草看涨期权？香草看涨期权有哪些特点？
什么是香草看涨期权？香草看涨期权有哪些特点？ 香草看涨期权，通常也称为香草期权，是金融市场上的一种金融衍生品，由券商或金融机构推出。它允许投资者以较小的费用获取相应股票市值的收益权，主要用于风险管…...
GDPU 天码行空11
（一）实验目的 1、掌握JAVA中IO中各种类及其构造方法； 2、重点掌握IO中类所具有的IO操作方法； 3、熟悉软件中登录模块的开发方法； 4、掌握IO中读写常用方法。 5、进一步熟悉正则规则的使用方法。 （二&…...
Boost.Preprocessor库
Boost.Preprocessor库是Boost C库的一部分，提供了一组扩展的预处理器元编程功能。这个库的主要目的是帮助开发者使用预处理器进行元编程，以及提供一组工具来操纵预处理阶段的文本。 预处理器在C编译过程中的角色主要是处理源代码文件中的预处理指令&…...
引用 、宏、内联函数、auto、范围for、空指针
🐶博主主页：ᰔᩚ. 一怀明月ꦿ ❤️🔥专栏系列：线性代数，C初学者入门训练，题解C，C的使用文章，「初学」C，linux 🔥座右铭：“不要等到什么都没有了…...
【牛客】【模板】二维前缀和
原题链接：登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 二维前缀和板题。 二维前缀和：pre[i][j]a[i][j]pre[i-1][j]pre[i][j-1]-pre[i-1][j-1]; 子矩阵 左上角为(x1,y1) 右下角(x2,y2…...