- 博客(85)
- 收藏
- 关注
RSS订阅
原创 深入探究node搭建socket服务器
自从上篇中sokect实现了视频通话，但是是使用ws依赖库实现的服务端，所以最近再看ws源码，不看不知道，一看很惊讶。接下来一点点记录一下，如何搭建一个简易的服务端socket，来实现上次的视频通讯。
2024-02-20 21:05:51
1374
原创 数组随机排序
如何将一个数组随机排序？这个题目很有意思，我在直播的时候看的，大家讨论如何将一个数组进行随机排序。然后我想到的是sort+Math.random()利用数组的sort算法，比较函数返回一个-0.5到0.5的随机数，这个方法看似可行，其实有很大的问题。
2024-05-11 21:51:31
280
原创 更改主题色
最近就碰到面试官问我，如何有一个更改主题色的场景，我会如何实现？脑子里最先出现的就是修改css变量，根据用户选择或者系统主题进行更改。接下来根据这个业务场景，设计一个技术方案吧~
2024-04-21 21:30:38
463
原创 你真的完全了解window.location.href吗？
当服务器返回这个状态码时，它指示客户端应该使用GET方法（而不是POST或其他方法）来访问一个新的URL，并且这个重定向是临时的，客户端应该在以后的请求中继续使用原来的URL。这篇文章到这里就结束了，其实打开控制台，修改location.href的作用，就跟你打开一个新的浏览器tab一样，随便你如何更改这个url地址。其实输入window.location.href = ‘baidu.com’，页面是刷新了，根据上面的内容，我们知道，本来是要跳转到。掘金的官网地址，就有这样的效果，这是怎么实现的？
2024-02-23 15:43:38
1037
原创 socket实现视频通话-WebRTC
最近喜欢研究视频流，所以思考了双向通信socket，接下来我们就一起来看看本地如何实现双向视频通讯的功能吧~
2024-01-02 21:33:04
1085
原创 web如何实现录制音频，满满干货（下篇）
好了，这就是录制+播放+下载+上传音频的正确方式，其实上面这些功能，就是第三方库js-audio-recorder的全部源码了。
2023-12-12 21:42:44
190
原创 web如何实现录制音频，满满干货（上篇）
最近的需求，要求web端实现录制音频，包括开始录制，重录，暂停录制，继续录制，结束录制；当然除了录制，还要解决播放问题，开始播放，暂停播放，继续播放，结束播放；然后还要能够上传文件到腾讯云或阿里云；最后还需要有下载操作，下载格式选择；接下来就一一探讨一下，如何实现这些功能吧~先说明，我知道能够直接在GitHub上找已经实现的demo和成熟的SDK，但是这里想一起看看如何用JavaScript实现。
2023-12-12 21:41:32
827
原创 微信内H5页面唤醒App
首先，简述一下这个需求的背景，产品希望能够让用户在微信内，打开一个h5页面，然后就能唤醒公司中维护的app，这个是为了能够更好的引流。
2023-11-05 17:08:30
2256
1
原创 react版音乐播放器的各种兼容问题
由于工作要求，需要制作一个h5页面的音乐播放器，其实如果放在原生做，效果会好很多，其实大多数app的音乐播放器也是原生做的，所以会要求你打开app再去播放音乐，但是有些特殊的情况，还是会用到h5播放器，比如说分享，把音乐分享给其他人，这个时候音乐播放器就是一个链接，这种情况下，能够保证在各个环境内都能够播放，就依赖于浏览器的功能，毕竟无论是qq，微信还是推特，社交软件上都内置了浏览器功能，这就允许分享到各个环境中。
2023-09-26 08:35:46
628
原创 实现滚动点赞墙
需要实现的效果如下：需要将用户点赞的信息，一条一条的展示在页面顶部，这样的效果有多种实现方式，下面一一来了解一下吧~scss如下：（如果要将scss改为less，将$改为@就可以了）当移动到第8行结束的时候，同屏出现的两行（第9行和第10行），就需要结束循环，重头开始了这是一个上移的动画，动画执行的时间就是8sitemShowTime+(itemShowTime + (itemShowTime+(oneCycleItemNum - oneScreenItemNum)∗(oneScreenItemNum) *
2023-09-14 00:22:28
103
原创 排查disabled问题之谷歌新版本特性
最近我突然接手一个后台的bug，这个后台很久没有迭代更新了，我也不熟悉业务，所以只能看一下源码，问题很快就复现，测试的修复操作也很正确，就是因为渲染的input标签中存在disabled='disabled’属性导致的。但是测试和运营那边的人员都坚持，两个月前还是正常的，记录能够证明，我先怀疑的是，两个月前是正常的，那是不是两个月前有迭代，谁更新了什么依赖的版本导致出现的bug，然后就开始找仓库最后一次修改记录。这是一个子组合，父组件传递的属性确实是false，而且不传递这个属性时，默认值也是false。
2023-09-14 00:13:31
519
4
原创 谷歌面试-扔鸡蛋
今天想跟大家分享一个有意思的面试题，这让我再一次感叹思维的奇妙，接下来我们一起看看吧~首先来看看题目：你有2颗鸡蛋，需要以来判断在100层的高楼上，哪一层楼是鸡蛋的安全层。换句话说，就是需要确定我们从哪一层楼扔鸡蛋下去，鸡蛋恰好不会摔碎。高于安全层鸡蛋都会碎，低于安全层都不会碎。比如鸡蛋在第1层没有摔碎，在第2层摔碎了，那么鸡蛋的安全层就是第1层。这里有几个假设条件：没有摔碎的鸡蛋可以重复使用；每颗鸡蛋的坚硬程度都是相同的。
2023-08-26 22:35:16
6531
4
原创 项目部署之后页面没有刷新怎么办?
1.如果页面是协商缓存，如何获取页面最新内容？协商缓存比较好办，那就刷新页面，不过需要勾选Disable cache，但是用户不知道打开控制台怎么办？那就右击页面的刷新按钮，然后选择硬性重新加载，或者清空缓存并硬性重新加载，页面就获取到最新资源了2.如果页面没有设置cache-control，那默认的缓存机制是什么样的？默认是协商缓存，这也符合浏览器设计，缓存可以减少宽度流量，加快响应速度3.如果项目重新部署还是没有更新，怎么办？在确定项目已经部署成功。
2023-08-25 22:41:28
644
原创 tsup打包如何更改outFileName
首先简单介绍一下，什么是tsuptsup是一个打包工具，类似的有rolluptsup的优点：打包速度快，配置少，与ts兼容良好。
2023-08-11 21:57:20
321
原创 各种catch写法，你知道多少？
1.reject错误，会由最近的catch捕获，在被最近的catch捕获之前，后面的流程会中断执行2.finally是在then或者catch之后执行（不会晚于下一层对then或catch的捕获输出慢）3.最终是什么返回给下一层，如果finally有return，它的优先级是高于且覆盖then或者catch的return的。
2023-08-01 16:21:54
291
原创 element-plus源码学习后，我了解到多种多样的写法
本文是阅读源码之后，学习到一些新写法，平常业务开发也可以用起来。在我看来，阅读源码，不但能知道该框架的底层原理，出现bug时，可以快速排查和修复，更重要的是，阅读源码就像向优秀的人学习，掌握我们不曾了解的新知识点，看看别人是如何编写出漂亮的，可复用的代码。
2023-07-16 11:16:41
798
1
原创 h5页面如何与原生交互
本文讲述h5页面跟原生通信，比如在app内，调用相机，获取相册内的图片，在app内拉起微信小程序等等，h5页面没有这么多权限能够直接调用移动端的原生能力，这个时候就需要与原生进行通讯，传递一个信号给原生这边，然后原生直接调用手机端的能力。下面分别讲解h5与Android，ios系统通信。
2023-07-09 22:26:01
3463
1
原创 一直报错npm ERR! cb() never called!删除缓存仍然不行
看到npm下载包出错, 通常我们会手动删除node-modules这个文件夹来解决.但是往往现实很骨感, 然后我们会找网上各种方法来解决, 比如这篇但是当所有方法都尝试了一遍, 仍然还是出错, 这到底是什么原因呢?可以使用npm config ls 查看一下我们电脑上是否会有一份.npmrc文件。
2023-06-21 08:48:13
310
原创 Node内存管理+垃圾回收机制
最近看到《深入浅出node》这本书，里面正好有内存控制， 加上最近看到一篇文章，也是讲了内存管理和垃圾回收机制。由于自己曾经做过一个ssl接口，导致node服务经常重启，我潜意识就怀疑是内存管理出现了问题，所以这次来专门学习这块知识点，下面是自己的一些分享。
2023-06-17 19:28:31
622
原创 微应用如何实现自动更新提示
先来介绍一下微应用的特点.微应用就是有一个主应用服务负责登录和管理各个子应用, 通常企业中的后台就是这样的比如有一个主应用app, 主应用中有很多很多子后台, 比如: 管理订单的(orderCenter), 管理用户信息的(userCenter), 管理考勤的(attendanceCenter)前端微应用框架中,qiankun最受欢迎, 使用量和star数量都很高。
2023-06-04 18:33:26
472
原创 vite源码分析之dev
最近研究socket, 所以就顺便看了一下vite源码, vite的热更新就是根据socket实现的, 所以正好记录一下.前端任何脚手架的入口,肯定是在package.json文件中,当我们输入script命令时, 会经历什么样的步骤呢?接下来我们一起来探索一下~~~
2023-05-27 18:24:11
1526
原创 客户端读取响应头+后端读取请求头的那些事
在一些特殊场景中，我们在客户端想要去获取服务端接口设置的一些自定义响应头，服务端该如何处理，客户端才能取到这些自定义响应头的值呢？特殊场景，我这里也举例一下，原生页面webView嵌入web页面。这个时候如果在app内，用户已经登录了，就需要h5页面能够拿到用户信息，但是登录信息在app中，所以需要原生把这个信息传递给h5页面。这个时候会有两种方法，一个是通过接口请求的方式，我们指定尽管是一个页面，在浏览器打开，但其实本质是一个get请求。所以能够通过这个接口传递数据；第二个方法就是与h5页面进行通信。
2023-05-19 21:44:54
1436
原创 ios中video标签兼容问题
前端来获取视频首帧终究不是上上策，因为前端处理视频，就需要视频加载这个过程，如果页面上有很多视频，那访问这样页面，岂不是要偷偷浪费用户流量来加载，最理想的情况是：用户点击播放，需要看哪个视频，就加载哪个视频，这样既能保证页面的响应速度，也能够保证不浪费用户流量，最重要的是用户体验感会增强很多。要解决此错误，您需要确保画布中使用的所有图像都托管在与您的网页相同的域中，或者它们具有适当的跨域资源共享 (CORS) 标头集。如果设置的截图时间t超过了视频时长，则返回视频的最后一帧关键帧。
2023-05-18 22:01:43
3385
1
原创 使用railway部署Node项目及遇到的问题
大家好, 今天愚人节, 祝大家节日快乐~同时向大家推荐一个非常nice的网站, railway, 它能够免费部署项目, 大家赶紧来试试呀~~~
2023-04-01 20:32:19
1324
8
原创 使用indexedDB的正确打开方式和多种使用场景
针对以下场景，在不使用库的情况下，如何使用indexedDB数据库, 下面将介绍使用直接使用indexedDB的痛点, 最后给出解决方案一张数据表,大家应该都能够操作,但你会发现,只是简简单单的使用api,会出现一些意外情况,怎么解决这样的意外情况呢?请看下面的小demo但是当你删除这张表, 刷新这个页面, 再次打开时,你就会发现不能正常进行操作了Uncaught DOMException: Failed to execute ‘transaction’ on ‘IDBDatabase’: One of
2023-03-16 09:09:24
2119
3
原创 下载node-gyp依赖包报错：gyp ERR! find VS msvs_version not set from command line or npm config
windows没有c++编译环境，所以要下载Vistual Studiowindows没有设置msvs_version，所以下载之后，还需要使用命令行设置注意node版本。
2023-02-15 21:36:58
5736
3
原创 svg VS canvas,哪种在移动端适配度更好?实战经历告诉你~
最近做了一个画图的功能,后端提供棋盘数据,前端需要把数据转换成一个棋盘画出来,当时有两种实现方法,一种是使用canvas画图,一种是使用svg画图.
2022-11-19 18:32:31
1063
原创 上传时获取图片和视频宽高(onload和Promise配合使用)
在有onload事件的函数中，有返回值，需要使用promise,借助reslove和reject，不然会先返回undefined，没有等到onload事件执行完成，就已经返回了值。DOM元素需要等待onload事件之后再去读取元素的值，比如元素的naturalWidth和width，不然会先读到0.创建DOM元素之后，不需要再使用了就清空DOM元素哟~使用了async和await关键字,最好使用try…catch…或.catch()捕获错误。
2022-11-13 09:00:00
2458
原创 当导入导出为同一个接口时，会产生什么样的“化学反应”？
虽然情况1和情况2两次的blob的类型不一致，一个是application/vnd.ms-excel类型，一个是text/xml，但是由于第三种情况的介入，必须要获取到后端返回的json格式数据显示。设置了responseType为blob类型，接口返回的数据如下：没有设置responseType时，接口返回的数据如下：目前是 解析 text/xml类型的blob, 成为JSON对象。如果大家有什么更好的处理方法，欢迎评论区讨论~~~
2022-10-20 08:57:40
473
原创 使用mongoose连接远程云数据库，需要用户权限访问
刚开始的// 引入第三方模块mongooseconst mongoose = require('mongoose');// 连接数据库 mongoose.connect('mongodb://IP地址/game', {useNewUrlParser: true}) .then(() => console.log('数据库连接成功')) .catch(() => console.log('数据库连接失败'))不要写上http://我这里随便列举一个：mongodb://10.2
2022-05-07 15:13:29
836
原创 VScode编写英文时出现奇怪字符
问题如图：提交代码的时候，自己不知道按了什么键，导致出现如下问题：于是我在代码里编写如下：解决办法：这是由于英文输入法时是全角导致的shift+空格键 (在中文状态下按shift+空格键，再转换成英文状态就OK)或者直接点击圆角/半角符...
2022-05-01 15:19:18
945
1
原创 解决 get请求出现431状态码
这是由于get请求头过长导致的腾讯云解释（里面有很多奇怪的状态码解释）：https://cloud.tencent.com/developer/section/1190190HTTP 431 Request Header Fields Too Large响应状态码指示服务器不愿意处理请求，因为它的头部字段太大。请求可以在减少请求头域的大小后重新提交。它可以在请求头字段的总数太大或单个头字段太大时使用。这个错误不应该发生在经过良好测试的生产系统上，但在测试新系统时可以更频繁地发现。这是怎么导致的.
2022-04-03 22:33:09
5226
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人