Hello，又到了每天一次的下午茶时间。酱酱们的下午茶新增优质作者介绍和码上掘金板块，专注于发掘站内优质创作者和优质内容，欢迎大家多提宝贵意见！
本文字数 1800+，阅读时间大约需要 6 分钟。
- 【本期掘金酱的下午茶】亮点：
- 用 Node.js 手写 WebSocket 协议
- VSCode 插件为组件库赋能，全新的 Varlet VSCode 插件发布了
- vite3+vue3+ts+pinia + Naive UI 项目实战 —— 使用 ref 引用组件时如何标注类型
- 还在手动发送小程序体验二维码给同事吗？
- CSS Flex 布局和 Grid 布局怎么选？
- Flutter & ChatGPT | 代码生成器
- 云音乐 Android 内存监控探索篇
- ……
筛选规则：文章发布时间在本期「掘金酱的下午茶」发布时间的 1-3 天内，且符合社区推荐标准，也会同步发布在掘金相关技术社群。
今日主理人｜下午茶
本期每日掘金由 法医 负责制作，法医是一个长期活跃于沸点的最佳摸鱼手，热爱Coding，喜欢分享，五湖四海皆兄弟，欢迎大家一起在沸点摸鱼，在掘金创作。
每日干货｜下午茶
主理人们会对近期（1-3 天）社区深度技术好文进行挖掘和筛选，优质的技术文章有机会出现在下方列表，排名不分先后。
『前端』
实时性较高的需求，我们会用 websocket 实现，比如即时通讯、游戏等场景。websocket 和 http 没什么关系，但从 http 到 websocket 需要一次切换的过程。这个切换过程除了要带 upgrade 的 header 外，还要带 sec-websocket-key，服务端根据这个 key 算出结果，通过 sec-websocket-accept 返回。响应是 101 Switching Protocols 的状态码。
在之前的版本中，我们的插件只能做到一些类似悬停组件提示文档，组件名称的提示、自动补全这样的小功能，算是试试水吧～。为了更优秀的开发体验，我们决定对插件进行重写。
在构建的项目中，有时我们需要在父组件中调用子组件通过
defineExpose()对外暴露的方法。比如我在做登录页面时，将登录按钮放在父组件中，然后把登录表单封装成了子组件 LoginForm.vue，并在里面定义了登录相关方法validateFormModel。
我们在开发小程序时，完成了功能的开发和自测后我们往往需要上传小程序代码到开者后台，然后获取体验版本的二维码，再将这个二维码发给测试的同学进行测试。CI工具除了可以上传代码外还可以实现预览的功能，获得预览二维码。本文将介绍如何获取预览二维码并自动发送到飞书群聊中。和手动发送二维码相比，这样是不是显得比较高级啊？
CSS 中的 Flex 布局和 Grid 布局都是非常强大的布局方案，那什么情况下应该使用 Grid 布局，什么情况下应该使用 Flex 布局呢？本文就来通过一些示例看看两者之间的区别以及使用场景！
『后端』
之前我们通过面试的形式，讲了
JWT实现单点登录(SSO)的设计思路，并且到最后也留下了疑问，什么是CAS。
距离我第一次上手ES过去了一年半多了吧，当时我是从零开始花了大半年时间搭建了一整套Filebeat+Kafka+数据处理服务+Elasticsearch+Kibana+Skywalking日志收集系统。感觉还是很刺激的，毕竟同时去深度学习和运用多个刚上手的中间件对我来说是个极大的磨练。日志收集系统的数据处理服务切换到了Flink，这个后面总结完毕后我会出一篇单独的文章讲讲Flink和改造过程。但是始终有一个问题困扰着我，团队内部对于ES的应用尚浅，仅仅用来做日志收集，导致我对ES的认识一直不算深刻，所以我之前也没有写一篇优秀的文章来阐述我的认知。当然现在我依旧算个小白，但是因为一两个需求重新深刻认识了ES，算是一段不错的经历，因此分享给大家，有问题的话请各位大佬指正。
根据《State of Frontend 2022》问卷调查， 最受欢迎的前五个工具库中，时间处理相关的库占据了两席。时间处理工具为什么如受前端工程师青睐？JS Date 为什么无法满足开发需求？不同的时间库之间又存在哪些差异？
微服务后端开发的最大痛点之一就是调试困难，非常影响我们的开发效率。如果我们想与其他微服务进行联动调试，则需要在本地环境中启动对应的微服务模块，这可能需要大量的配置和构建时间，同时也会占用我们本地很多资源，可能还会出现”带不动“的情况。
为内存中数据存储，Redis 以其速度和性能着称，通常被用作大多数后端服务的缓存解决方案。但是，在内部，Redis 采用单线程架构。为什么单线程设计依然会有这么高的性能？如果利用多线程并发处理请求不是更好吗？在本文中，让我们深入探讨为什么 Redis 才有单线程架构，依然如此之快，主要从下面4个方面讲解。
『移动端』
ChatGPT 作为一个自然语言处理工具，已经火了一段时间。对待 ChatGPT 不同人有着不同的看法，新事物的出现必然如此。利益相关者形成 抵制 和 狂热 两极；哗众取宠者蹭蹭热度，问些花活，博人眼球；猎奇者尝尝鲜，起哄者挑挑火；实用派在思考新事物的价值和劳动力：
在日常的开发工作中，仅仅使用ListView、ListView.builder等这样的滑动组件就能满足大部分的业务需求，在碰到较为复杂的滑动页面时，加上Slivers系列中的几个常用组件也简单的实现。这也就导致了一些朋友没有较为完整的去了解Slivers系列。那么在重识Flutter这个专栏中，预计有5篇slivers相关的文章，从组件的使用到其背后的渲染原理，让我们一起探索Slivers的魅力吧！
随着云音乐不断的对线上崩溃治理，目前崩溃率已经达到了行业内较低水平。但线上还存在很多 OOM 的崩溃，这种崩溃大多是因为编码不规范导致的内存异常问题（比如内存泄露、大对象、大图等不合理的内存使用）。内存问题难发现、难复现和难排查。这就需要我们通过一些监控手段和一些工具去协助开发人员更好的排查此类问题。 接下来就是云音乐在内存监控方面的一些探索和实践，主要从以下几个方面介绍
今天想聊一下老生常谈的一种模式，工厂方法模式。另外本文中会出现大量的代码，不过都很简单容易理解。
今天我们将在一个愉快的氛围下，让ImageSpan动起来，并进行一些更深层次的探索，不出意外，这将是Drawable相关文章的终结篇。
📖 投稿专区｜下午茶
大家可以在评论区推荐认为不错的文章，并附上链接和推荐理由，有机会登上下一期。文章创建日期必须在近 1-3 天内；可以推荐自己的文章、也可以推荐他人的文章。
