转前端了！！

大家好，我是冰河~~

没错，为了更好的设计和开发分布式IM即时通讯系统，也为了让大家能够直观的体验到分布式IM即时通讯系统的功能，冰河开始转战前端了。也就是说，整个项目从需求立项到产品设计，从架构设计到整体研发，从后端开发到前端实现，从功能测试到全链路压测，从性能调优到上线部署运维，咱统统都包了。

这也是一个可以真正写到简历的生产级项目，同样，其简化版本也可以拿来做毕业设计，让你在众多的CRUD项目中脱颖而出。

点击【查看详情】了解更多关于分布式IM即时通讯系统的架构设计与落地实现方案。

经过一段时间的研发和打磨，分布式IM即时通讯系统已全面进入前端UI设计与研发阶段，冰河正带着大家从产品原型设计开始入手，到编码实现，再到测试验证，通过设计和开发前端页面，可以让大家更直观的感受到单聊和群聊消息在整个分布式IM即时通讯系统中的流程过程。

一、技术选型

为了能够让大家更加清晰的了解到在分布式IM即时通讯系统中学到哪些技术，这里，我们回顾下设计和研发分布式IM即时通讯系统时，我们主要使用的技术栈和中间件，整体如下所示。

• 开发框架：SpringBoot、SpringCloud、SpringCloud Alibaba、Dubbo。
• 缓存：Redis分布式缓存+Guava本地缓存。
• 数据库：MySQL、TiDB、HBase。
• 流量网关：OpenResty+Lua。
• 业务网关：SpringCloud Gateway + Sentinel（后续替换成自研网关）。
• 持久层框架：MyBatis、Mybatis-Plus。
• 服务配置、服务注册与发现：Nacos。
• 消息中间件：RocketMQ。
• 网络通信：Netty。
• 文件存储：Minio。
• 日志可视化治理：ELK。
• 容器化管理：Swarm、Portainer。
• 监控：Prometheus、Grafana。
• 前端：Vue。
• 单元测试：Junit。
• 基准测试：JMH。
• 压力测试：JMeter。

注意：业务网关后续会计划替换成星球的自研网关，这个网关的专栏和视频教程即将给大家安排，值得一提的是，这个网关项目是一个能够应对真实超高并发场景的生产级项目，经实际对比压测，其性能甚至比某些成熟的开源项目还要高，关于网关项目暂时就跟大家透漏这么多，我们拭目以待，哈哈。

通过上述的技术选型，我们可以看到，在分布式IM即时通讯系统中，开发前端页面主要使用的是Vue，那我们目前开发的前端页面长啥样呢？

二、原型展示

这里，我们就以好友模块为例来给大家简单展示下目前冰河画的原型设计草稿，像群组、单聊、群聊等等模块的设计和实现，大家可以到星球通过 专栏+视频+小册+源码+答疑 的方式进行学习，这里不再赘述。

（1）好友主体框架原型草稿

（2）添加好友原型草稿

（3）查看好友原型草稿

（4）快捷菜单原型草稿

三、研发效果

这里，同样以好友模块为例来给大家简单展示下目前冰河实现的前端效果，像群组、单聊、群聊等等模块的设计和实现效果，大家同样可以到星球通过 专栏+视频+小册+源码+答疑 的方式进行学习，这里不再赘述。

（1）好友主体框架实现效果

（2）添加好友实现效果

（3）查看好友实现效果

（4）快捷菜单实现效果

四、源码展示

分布式IM即时通讯系统主要是基于VUE实现的前端页面，前端工程的整体结构如下图所示。

这里只给出了整体的代码结构，完整的源码工程，大家可以到星球查看置顶公告获取。

五、写在最后

这些真实场景的项目设计与落地实现，在 冰河技术知识星球 除了分布式IM即时通讯系统外，还有其他5个项目，这些项目的需求、方案、架构、落地等均来自互联网真实业务场景，让你真正学到互联网大厂的业务与技术落地方案，并将其有效转化为自己的知识储备。

值得一提的是：冰河自研的比某些开源网关项目性能更优的生产级网关项目即将启动，你还在等啥？不少小伙伴经过星球硬核技术和项目的历练，早已成功跳槽加薪，实现薪资翻倍，而你，还在原地踏步，抱怨大环境不好。2024年抛弃焦虑和抱怨，我们一起塌下心来沉淀硬核技术和项目，让自己的薪资更上一层楼，

好了，今天就到这儿吧，我是冰河，我们下期见~~