Node.js+express+MongoDB+socket.io做的一個即時聊天案例

說明

---

目錄說明:

• config 配置目錄
• public 公共資原始檔目錄
• scripts 框架自帶js檔案
• server 服務端檔案

• src 客戶端檔案

  • component 元件檔案
  • container 頁面檔案
  • redux 常量與redux檔案
  • APP.js index.jx 入口檔案
  • reducer.js 包含所有的reducer檔案
  • store.js 包含store檔案，擴充套件其它外掛

---

演示圖片

![Uploading file…]()

我是拿某款錄屏gif軟體錄的，導致點選傳送訊息的時候，傳送了兩次，實際上只有一次，原因應該是服務端觸發了兩次廣播，懶得改了。。。將就看吧！

---

專案包說明

antd

螞蟻金服的react元件

按需載入流程

• 安裝antd

`
npm install antd –save
`

• 暴露eject

npm run eject

• 安裝babel-plugin-import

`
npm install babel-plugin-import –save
`

• 修改package.json如下程式碼

`
“babel”: {

"presets": [
  "react-app"
]

}
`

`
“babel”: {

"presets": [
  "react-app"
],
"plugins": [
  [
    "import",
    {
      "libraryName": "antd",
      "style": "css"
    }
  ]
]

}
`

react-router-dom

管理react路由

在瀏覽器使用需要引入

`
import {BrowserRouter, Route} from `react-router-dom`
`

node-sass

使create-react-app支援sass

`
npm install node-sass –save
`

mongoose

管理MongoDB

react-redux

管理redux

redux-thunk

thunk中介軟體

utility

js加密庫

bodyPaser

bodyPaser

cookiePaser

cookiePaser

brwoser-cookies

管理cookie

socket.io

提供socket服務端

socket.io-client

提供socket客戶端

github地址：https://github.com/kavience/react-zhaopin