react+react-router+redux+Node.js+socket.io寫一個聊天webapp

時間 2019-11-08

標籤 react+react react router+redux+node.js+socket.io router redux node socket 一個聊天 webapp 欄目 React 简体版

原文原文鏈接

1、項目預覽

以前看一個寫聊天器的教程，本身也跟着教程作了一遍，因爲懶得去找圖片和一些圖標我就用教程中的素材來作，主要是用了react+react-router+redux+Node.js+socket.io的技術棧，接下來就是項目的預覽javascript

1.首先在`/login`下能看到有登陸和註冊按鈕

2.點擊註冊按鈕，路由跳到`/register`，註冊一個帳號，用戶和密碼都爲LHH，選擇「牛人」，點擊註冊，以後路由會跳到`/geniusinfo`，即牛人完善信息頁，選擇一個頭像並完善信息後點擊保存按鈕

3.能夠看到已經進入有三個tab選項的內容頁面了，點擊「我」，路由跳轉到`/me`便可看到我的中心內容，但此時boss和消息的tab頁仍沒有內容，能夠按照以前步驟註冊一個Boss帳號，只需在註冊的時候選擇Boss選項

4.如今在LHH和LCE帳號分別能看到的列表

5.點擊進入聊天室，輸入內容

2、接下來對項目的主要內容進行解釋

1.項目的除掉node_modules後的目錄

├─build
│  └─static
│      ├─css
│      └─js
├─config
│  └─jest
├─public
├─scripts
├─server
└─src
    ├─component
    │  ├─authroute
    │  ├─avatar-selector
    │  ├─boss
    │  ├─chat
    │  ├─dashboard
    │  ├─genius
    │  ├─img
    │  ├─logo
    │  ├─msg
    │  ├─navlink
    │  │  └─img
    │  ├─user
    │  └─usercard
    ├─container
    │  ├─bossinfo
    │  ├─geniusinfo
    │  ├─login
    │  └─register
    └─redux

其中build文件夾的內容爲npm run build打包後的內容，在項目中若是啓用後端接口也可訪問css

2.入口頁面

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
// eslint-disable-next-line
import { BrowserRouter } from 'react-router-dom';
import App from './app'

import reducers from './reducer'
import './config'
import './index.css'

const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.devToolsExtension?window.devToolsExtension():f=>f
))

// boss genius me msg 4個頁面
ReactDOM.render(
    (<Provider store={store}>
        <BrowserRouter>
            <App></App>
        </BrowserRouter>
    </Provider> ),
    document.getElementById('root')
 )

使用react-redux的Provider，可實現全局的狀態存儲，子組件可經過props得到存儲在全局的狀態html

const store = createStore(reducers, compose(
    applyMiddleware(thunk),
    window.devToolsExtension?window.devToolsExtension():f=>f
))

上面代碼的主要做用是關於配置瀏覽器的redux插件的，能夠經過這個插件在控制檯中查看state中的數據。
來看下app.js中的代碼前端

import React from 'react'
import Login from './container/login/login.js';
import Register from './container/register/register.js';
import AuthRoute from './component/authroute/authroute.js';
import BossInfo from './container/bossinfo/bossinfo.js';
import Geniusinfo from './container/geniusinfo/geniusinfo';
import Dashboard from './component/dashboard/dashboard';
import Chat from './component/chat/chat'
import {  Route,  Switch } from 'react-router-dom';

class App extends React.Component{
    render() {
        return (
            <div>
                <AuthRoute></AuthRoute>
                <Switch>
                    <Route path='/bossinfo' component={BossInfo}></Route>
                    <Route path='/geniusinfo' component={Geniusinfo}></Route>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/register' component={Register}></Route>
                    <Route path='/chat/:user' component={Chat}></Route>
                    <Route component={Dashboard}></Route>
                </Switch>
                
            </div>
        )
    }
}
export default App

這裏主要是講主頁面中的代碼分割出來。
在authroute.js中是路由跳轉的邏輯判斷
頁面中的UI組件也用到了antd-mobile插件
客戶端接收和傳送數據得引入socket.io-client，代碼在chat.redux.js中。
聊天器中須要存儲在數據庫的內容主要爲from（發送端）、to（接收端）、read(是否已讀)、content（聊天內容）、create_time（聊天時間）並且還須要一個惟一的chatid來表明這個聊天室的惟一性，能夠用from和to拼接，拼接函數寫在util.js中。java

3.Server

後端接口用到了node.js的express框架，數據庫用到了mongodb，在server文件夾中存放鏈接數據庫的文件，model.js在直接與mongodb數據庫鏈接，node

const mongoose = require('mongoose');
// 鏈接mongo,而且使用my_app這個集合
const DB_URL = "mongodb://localhost:27017/chat_app";
mongoose.connect(DB_URL);

const models = {
    user: {
        'user': { 'type': String, 'require': true },
        'pwd': { 'type': String, 'require': true },
        'type': { 'type': String, 'require': true },
        // 頭像
        'avatar': { 'type': String },
        // 我的簡介或者職位簡介
        'desc': { 'type': String },
        // 職位名
        'title': { 'type': String },
        // 若是是boss，還有兩個字段
        'company': { 'type': String },
        'money': { 'type': String }
    },
    chat: {
        'chatid': { 'type': String, 'require': true },
        'from': { 'type': String, 'rewuire': true },
        'to': { 'type': String, 'require': true },
        'read': { 'type': String, 'require': true },
        'content': { 'type': String, 'require': true, 'default': '' },
        'create_time': { 'type': Number, 'default': new Date().getTime() }
    }
}
for (let m in models) {
    mongoose.model(m, new mongoose.Schema(models[m]))
}
module.exports = {
    getModel: function(name) {
        return mongoose.model(name)
    }
}

鏈接的數據庫端口號爲27017，這個視本身電腦的數據庫端口號而定。
在server.js中引入了http、express、socket.io插件，服務端用的是9093端口，react

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');
const model = require('./model')
    // const User = model.getModel('user');
const Chat = model.getModel('chat');
const path = require('path')
const app = express();
//work with express
const server = require('http').Server(app);
const io = require('socket.io')(server);
io.on('connection', function(socket) {
    // console.log('user login')
    socket.on('sendmsg', function(data) {
        const { from, to, msg } = data;
        const chatid = [from, to].sort().join('_');
        Chat.create({ chatid, from, to, content: msg }, function(err, doc) {
                // console.log(doc._doc)
                io.emit('recvmsg', Object.assign({}, doc._doc))
            })
            // console.log(data);
            // io.emit('recvmsg', data)
    })
})
const userRouter = require('./user');
app.use(cookieParser());
app.use(bodyParser.json())
app.use('/user', userRouter);
app.use(function(req, res, next) {
    if (req.url.startsWith('/user/') || req.url.startsWith('/static/')) {
        return next()
    }
    return res.sendFile(path.resolve('build/index.html'))
})
app.use('/', express.static(path.resolve('build')))
server.listen(9093, function() {
    console.log('Node app start at port 9093')
});

客戶端用到的接口寫在user.js中git

const express = require('express')
const Router = express.Router();
const model = require('./model')
const User = model.getModel('user');
const Chat = model.getModel('chat');
const _filter = { 'pwd': 0, '__v': 0 };

// 刪除全部聊天記錄
// Chat.remove({}, function(e, d) {})
// 加密
const utils = require('utility');
Router.get('/list', function(req, res) {
    const { type } = req.query
    // 刪除全部用戶
    // User.remove({}, function(e, d) {})
    User.find({ type }, _filter, function(err, doc) {
        return res.json({ code: 0, data: doc })
    })
});
Router.get('/getmsglist', function(req, res) {
    const user = req.cookies.userid;
    User.find({}, function(err, userdoc) {
        let users = {};
        userdoc.forEach(v => {
            users[v._id] = { name: v.user, avatar: v.avatar }
        })
        Chat.find({ '$or': [{ from: user }, { to: user }] }, function(err, doc) {
            // console.log(doc)
            if (!err) {
                return res.json({ code: 0, msgs: doc, users: users })
            }
        })
    })
})
Router.post('/readmsg', function(req, res) {
    const userid = req.cookies.userid;
    const { from } = req.body;
    // console.log(userid, from)
    Chat.update({ from, to: userid }, { '$set': { read: true } }, { 'multi': true },

        function(err, doc) {
            if (!err) {
                return res.json({ code: 0, num: doc.nModified })
            }
            return res.json({ code: 1, msg: '修改失敗' })
        })
})
Router.post('/update', function(req, res) {
    const userid = req.cookies.userid;
    if (!userid) {
        return json.dumps({ code: 1 });
    }
    const body = req.body;
    User.findByIdAndUpdate(userid, body, function(err, doc) {
        const data = Object.assign({}, {
            user: doc.user,
            type: doc.type
        }, body)
        return res.json({ code: 0, data })
    })
});
Router.post('/login', function(req, res) {
    const { user, pwd } = req.body;
    User.findOne({ user, pwd: md5Pwd(pwd) }, _filter, function(err, doc) {
        if (!doc) {
            return res.json({ code: 1, msg: '用戶名或者密碼錯誤' });
        }
        res.cookie('userid', doc._id)
        return res.json({ code: 0, data: doc })
    })
});
Router.post('/register', function(req, res) {
    console.log(req.body);
    const { user, pwd, type } = req.body;
    User.findOne({ user }, function(err, doc) {
        if (doc) {
            return res.json({ code: 1, msg: '用戶名重置' })
        }
        const userModel = new User({ user, pwd: md5Pwd(pwd), type });
        userModel.save(function(e, d) {
            if (e) {
                return res.json({ code: 1, msg: '後端出錯了' })
            }
            const { user, type, _id } = d;
            res.cookie('userid', _id)
            return res.json({ code: 0, data: { user, type, _id } })
        })
    })
})
Router.get('/info', function(req, res) {
    const { userid } = req.cookies;
    if (!userid) {
        return res.json({ code: 1 })
    }
    User.findOne({ _id: userid }, _filter, function(err, doc) {
            if (err) {
                return res.json({ code: 1, msg: '後端出錯了' })
            }
            if (doc) {
                return res.json({ code: 0, data: doc })
            }
        })
        // 用戶有沒有cookie

});
// 密碼加鹽
function md5Pwd(pwd) {
    const salt = 'lhh_is_good_1310486!@#5^%~*';
    return utils.md5(utils.md5(pwd + salt))
}
module.exports = Router

3、總結

本項目實現了獲取數據和表現的代碼分離，也是對於學習React、Node和WebSocket的一次更進一步提高，固然還有不少能夠改進的地方，好比能夠用async和await進行異步獲取數據等等。
做爲一名前端菜鳥，仍是但願前輩能給一些學習的建議和指點迷津
最後附上本項目的代碼連接
github連接github