前端进阶全栈开发-在线聊天室项目(爆肝)

如标题所示，Yang爆肝三天多学习了服务器相关知识和Node服务端框架Nest，上手React18的SSR渲染Nextjs，写出了一个最适合新手全栈业务开发入门的一个即时通讯项目

前言

Yang从0开始学习到完成这个项目总共花了三天多的时间，但是Codereview一遍之后再仔细想想，如果让我现在再写一遍这个项目，三个小时即可完成，毕竟前置知识都学完了(嘿嘿)

项目体验地址：点击这里进入即时通讯项目👈👈👈

项目前端React18仓库：https://github.com/BoyYangzai/Instant-messaging-React18
项目后端Nestjs仓库：https://github.com/BoyYangzai/Instant-messaging-Nest
欢迎点个star✨
该项目的学习笔记：https://www.yuque.com/boyyang/ouk6df

本项目适合以下人群：

• Vue开发者--想学习React18全家桶/Nextjs✅

• 纯前端开发--对服务器知识不了解✅

• JS基础牢固--想进阶初级全栈开发✅

• 项目经历少--对websocket即时通讯项目感兴趣✅

• 前后端基础薄弱-但肯吃苦学习✅✅✅
  如果你满足以上五个条件之一，不妨花几天时间从纯前端进阶一下初级全栈开发，从单纯的vue开发这变成双技术栈开发者，提升自己的核心竞争力
  也可以在此项目基础上二次开发或移植到APP或小程序上，变成一个经典校园社交软件项目

  掌握这个项目你能学会：

  服务器入门+数据库Sequelize(Mysql)+PM2项目部署🎉
  Nestjs企业级Node服务端框架+JWT+Websocket🎉
  React18/服务端渲染Nextjs+Redux-toolkit+styled-components🎉

  入门全栈业务开发学习路线指南：

1.了解linux服务器基础(推荐新手使用宝塔)+Mysql数据库基本操作+服务器项目基本部署

这里推荐使用腾讯云轻量服务器，然后***h链接，自带宝塔，可推送文件到服务器上
推荐文章-服务器连接：https://juejin.cn/post/7049692191110725645#heading-21
推荐文章-***端口：https://www.yuque.com/boyyang/ouk6df/erio5o
PM2项目部署：https://juejin.cn/post/6960843722644783141#heading-5

最终目标：成功部署Nextjs+Nestjs全栈项目

2.学习企业级Node服务端框架Nestjs并完成JWT和websocket
Yang的Nest学习笔记：https://www.yuque.com/boyyang/ouk6df/qkp50t
Nestjs官方基础课程：https://www.bilibili.com/video/BV1T44y1W7Si?spm_id_from=333.999.0.0
刷一遍Nest官方文档：https://docs.nestjs.com/
刷一遍socket.io官方文档：https://socket.io/
Nest集成socket.io入门：https://docs.nestjs.com/websockets/gateways
配置完成初始化Nest+JWT：https://github.com/BoyYangzai/nest-jwt-init-template

最终目标：完成即时通讯项目后端开发：https://github.com/BoyYangzai/Instant-messaging-Nest

3.从Vue3.2过渡上手React18服务端渲染Nextjs
Yang的Next学习笔记：https://www.yuque.com/boyyang/ouk6df/lo8ob0
ReactHooks：https://react.docschina.org/docs/hooks-intro.html
Nextjs-SSR部署+踩坑：https://nextjs.org/ （这里一定要看英文文档）
上手Redux-toolkit、styled-components等工具类库

最终目标：完成即时通讯项目前端开发：https://github.com/BoyYangzai/Instant-messaging-React18

4.最终效果--简易全栈在线聊天室完成！

尾言

希望这个项目可以帮助更多迷茫无从下手的前端er快速入门全栈业务开发💪
能独立完成这个项目的朋友一定在前端这条道路上挥洒过自己的汗水，我们一起加油！
洋的博客：https://www.yuque.com/boyyang