拥抱开源，React全家桶+Socket.io+Ts+Antd的IM即时通讯项目开源啦🎉🎉🎉
项目背景
Vue与React各有千秋，且两者都有广泛的生态系统和强大的社区支持。不过相比于React而言，Vue则表现的更加易学易用，这也使得笔者在日常开发中会偏向于Vue，但这并不等同于在日常开发中会偏离React。所谓一分耕耘、一分收获，笔者在业余时间通过React全家桶开发了此项目，目的是为了在经常使用Vue的同时，不会将React过快的忘掉、忘净，并且笔者也会一直将此项目迭代、维护下去
项目选题确定
如何选择一个新颖且有足够兴趣的项目来长期维护下去呢？
笔者当时能够想到的有xx管理系统、xx购物网站、xx视频网站、xx笔记备忘录、xx播放器等等，但经过一番抉择之后，最终确定了项目的选题为「社交平台」（或者你也可以理解为聊天室？！），因为这可以不断地为项目拓展一些比较新颖的功能，比如私聊、群聊、朋友圈、视频号、公众号、帖子插眼功能、H5支付、直播功能等等，甚至可以通过微前端来将“小程序(H5)”嵌入到浏览器中(H5)？！
而项目类型确定之后，就要从0开始建造了，比如产品原型图、产品设计、UI设计、前端、后端、数据库、测试、部署环节等等。考虑到数据的安全性等，笔者暂不将后端等进行开源，所以本文章只围绕前端的开源工作进行着重叙述。
前端主要技术栈
- React 18
- TypeScript
- Axios
- Socket.io
- Antd
- Webpack
- Less
React部分均采用Hook写法。Antd已在开源前升级为了4.x的最后一版，这将为以后升级Antd5.x做准备
此项目包含的一些功能
私聊
与朋友进行一对一聊天，这是在平台上与他人亲密交流的主要方式。不论是分享喜怒哀乐，还是传递重要信息，私聊都为你提供了一个隐秘、便捷的空间
Emoji表情或图片消息
在交流中使用丰富的Emoji表情和图片可以让对话更加生动有趣。表情能够传达出你的情感和情绪，而图片消息则能够直观地展示你所要分享的事物（例如一个狗头表情包）。这些多彩的表达方式丰富了你们之间的对话内容，让沟通变得更加有趣和多样化
拍一拍
拍一拍是一种轻松的互动方式，这是一种不需要文字的交流方式，特别适合传达简单的问候和鼓励，让你与朋友之间保持亲近联系
撤回消息
发送了不恰当的消息？不用担心！撤回消息让你有机会纠正自己的错误，同时使对话保持流畅和准确，避免尴尬和误解
语音
在朋友之间发送语音是一种生动的交流方式，它能够更加准确地传达情感和信息。通过语音，你可以用自己的声音与朋友分享想法、感受与故事，增加了交流的真实感和亲近感
群聊
群聊是与多位朋友一起交流的方式，可以一起分享兴趣、讨论话题，或者简单地聊天互动。群聊让你能够将多人的想法和观点汇聚在一起，创造出丰富多彩的交流氛围
群禁言
群禁言是一个管理工具，群主可以对群聊中的成员进行禁言，以维护聊天的秩序。这有助于防止垃圾信息和不适当的言论，保持群组的健康和友好交流环境
头像、背景的自定义
你可以上传个性化的头像和主页背景来展示你的独特个性。头像是你在平台上的标识，而背景则能够为你个人增添不一样的风格，让主页界面更加美观和富有个性
朋友圈
朋友圈是分享生活、瞬间和精彩的地方。你可以在朋友圈发布文字、图片和语音，与朋友们分享你日常生活中的点滴和重要时刻。同时，你也可以在朋友圈中与好友互动、点赞、评论，创造出更多的交流乐趣
消息炫彩字
通过消息炫彩字功能，你可以在聊天中使用丰富多彩的显示样式，增添消息的创意和吸引力。这使得你的消息更加引人注目，让对话内容更富有表现力
适配主题色
为了可以更好地适应不同的使用场景，主题切换功能应运而生。平台支持主题跟随系统自动进行切换，另外也提供了浅色模式与深色模式来应对日常使用
输入状态
输入状态能够让你知道对方是否正在输入消息。这能够增加互动感，让你了解朋友们的实时动态，更好地掌握对话节奏
朋友圈可见范围
在朋友圈中，你可以设定说说的可见范围，从而保护你的隐私。你可以选择向所有人公开、仅向好友展示，或者根据自己的需求进行调整，确保你的分享得到合适的传播
账号等级
平台根据用户的活跃度来分配不同的账号等级。这是一种鼓励用户参与平台建设、积极互动的方式，也让活跃用户得到一定的认可和回馈。平台将账号等级进行了可视化处理，使用山、树、花、草来代表不同的等级
项目展望
在我看来，如果项目开发完成后就不再维护了，那么不如不开发，虽然这样劳而也有获，但终归收获比较小，如果能将它一直维护、更新下去，那么未来所拥有的技术收益也会是越来越多的，比如
- 不断地为项目增加需求，可以使自己的技术更加过硬
- 通过库或框架的升级（react18 -> react19 -> ...），可以不断的拓展自己的技能树
- 在长期维护中所不断修复的bug，也会使代码质量不断改进
- ... ... ...
笔者会将此项目一直迭代、维护下去，不能把React的相关技术栈“白白忘掉”，并且社交类型的项目对笔者来说也是充满了兴趣，比如后面可以增加音视频通话功能，或将其打包为App，亦或在未来将react18升级为更高版本等等。在这个长期维护的过程中，也希望能够借此机会来积累更多的实战经验和解决问题的能力等等
除此之外，本项目更会在未来产出一些高质量文章，而这些文章中所提到的技术都是在本项目中沉淀得来的，例如怎样通过useRoutes打造自己的路由守卫、如何优雅的实现Token无感刷新、Axios如何与用户体验联系起来、大项目中推崇的设计模式、... ... ...
文末
由于文章篇幅有限，所以只列举了项目中的部分功能，至于其它功能，你可以亲自来体验！
通过本文的介绍，可以了解到一个基于React全家桶与Socket.io的社交类开源项目。从技术栈的视角来讲，希望可以为在座的工程师们提供一些参考和借鉴的价值，同时也希望大家可以对此项目提出宝贵建议，以帮助该项目进行不断的成长
少年，开源不易，如果这个项目对您有一点点的帮助，就请给个Star吧！