前端進(jìn)階全棧開發(fā)-在線聊天室項(xiàng)目(爆肝)

如標(biāo)題所示，Yang爆肝三天多學(xué)習(xí)了服務(wù)器相關(guān)知識(shí)和Node服務(wù)端框架Nest，上手React18的SSR渲染Nextjs，寫出了一個(gè)最適合新手全棧業(yè)務(wù)開發(fā)入門的一個(gè)即時(shí)通訊項(xiàng)目

前言

Yang從0開始學(xué)習(xí)到完成這個(gè)項(xiàng)目總共花了三天多的時(shí)間，但是Codereview一遍之后再仔細(xì)想想，如果讓我現(xiàn)在再寫一遍這個(gè)項(xiàng)目，三個(gè)小時(shí)即可完成，畢竟前置知識(shí)都學(xué)完了(嘿嘿)

項(xiàng)目體驗(yàn)地址：點(diǎn)擊這里進(jìn)入即時(shí)通訊項(xiàng)目??????

項(xiàng)目前端React18倉庫：https://github.com/BoyYangzai/Instant-messaging-React18
項(xiàng)目后端Nestjs倉庫：https://github.com/BoyYangzai/Instant-messaging-Nest
歡迎點(diǎn)個(gè)star?
該項(xiàng)目的學(xué)習(xí)筆記：https://www.yuque.com/boyyang/ouk6df

本項(xiàng)目適合以下人群：

Vue開發(fā)者--想學(xué)習(xí)React18全家桶/Nextjs?
純前端開發(fā)--對(duì)服務(wù)器知識(shí)不了解?
JS基礎(chǔ)牢固--想進(jìn)階初級(jí)全棧開發(fā)?
項(xiàng)目經(jīng)歷少--對(duì)websocket即時(shí)通訊項(xiàng)目感興趣?
前后端基礎(chǔ)薄弱-但肯吃苦學(xué)習(xí)???
如果你滿足以上五個(gè)條件之一，不妨花幾天時(shí)間從純前端進(jìn)階一下初級(jí)全棧開發(fā)，從單純的vue開發(fā)這變成雙技術(shù)棧開發(fā)者，提升自己的核心競(jìng)爭(zhēng)力
也可以在此項(xiàng)目基礎(chǔ)上二次開發(fā)或移植到APP或小程序上，變成一個(gè)經(jīng)典校園社交軟件項(xiàng)目

掌握這個(gè)項(xiàng)目你能學(xué)會(huì)：

服務(wù)器入門+數(shù)據(jù)庫Sequelize(Mysql)+PM2項(xiàng)目部署??
Nestjs企業(yè)級(jí)Node服務(wù)端框架+JWT+Websocket??
React18/服務(wù)端渲染Nextjs+Redux-toolkit+styled-components??

入門全棧業(yè)務(wù)開發(fā)學(xué)習(xí)路線指南：

1.了解linux服務(wù)器基礎(chǔ)(推薦新手使用寶塔)+Mysql數(shù)據(jù)庫基本操作+服務(wù)器項(xiàng)目基本部署

這里推薦使用騰訊云輕量服務(wù)器，然后***h鏈接，自帶寶塔，可推送文件到服務(wù)器上
推薦文章-服務(wù)器連接：https://juejin.cn/post/7049692191110725645#heading-21
推薦文章-***端口：https://www.yuque.com/boyyang/ouk6df/erio5o
PM2項(xiàng)目部署：https://juejin.cn/post/6960843722644783141#heading-5

最終目標(biāo)：成功部署Nextjs+Nestjs全棧項(xiàng)目

2.學(xué)習(xí)企業(yè)級(jí)Node服務(wù)端框架Nestjs并完成JWT和websocket
Yang的Nest學(xué)習(xí)筆記：https://www.yuque.com/boyyang/ouk6df/qkp50t
Nestjs官方基礎(chǔ)課程：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

最終目標(biāo)：完成即時(shí)通訊項(xiàng)目后端開發(fā)：https://github.com/BoyYangzai/Instant-messaging-Nest

3.從Vue3.2過渡上手React18服務(wù)端渲染Nextjs
Yang的Next學(xué)習(xí)筆記：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等工具類庫