react+react-router+redux+Node.js+socket.ioチャットwebappを書く
一、プロジェクトプレビュー
前に1つのチャットを书く教程を见て、自分も教程について1回して、ピクチャーといくつかのアイコンを探すのがおっくうなため私は教程の中の素材でして、主に
1.まず
2.登録ボタンをクリックして、ルートは
3.すでに3つのtabオプションのあるコンテンツページが表示されているので、「私」をクリックすると、ルートが
4.現在LHHとLCEアカウントでそれぞれ見られるリスト
5.クリックしてチャットルームに入り、内容を入力する
二、次にプロジェクトの主な内容を説明する
1.プロジェクトの削除node_modules後のディレクトリ
このうち
2.入口ページ
react-reduxのProviderを使用すると、グローバルなステータスストレージが実現され、サブコンポーネントはpropsによってグローバルに格納されたステータスを取得できます.
上記のコードの主な役割は、ブラウザのreduxプラグインを構成することです.このプラグインを使用してコンソールでstateのデータを表示できます.アプリを見てみましょうjsのコード
ここでは主にホームページの中のコードを分割します.
3.Server
バックエンドインタフェースは
接続されているデータベースポート番号は
クライアントが使用するインタフェースは
三、まとめ
本プロジェクトでは、取得データと表現のコード分離を実現し、
前に1つのチャットを书く教程を见て、自分も教程について1回して、ピクチャーといくつかのアイコンを探すのがおっくうなため私は教程の中の素材でして、主に
react+react-router+redux+Node.js+socket.io
の技术のスタックを使って、次はプロジェクトのプレビューです1.まず
/login
でログインと登録ボタンが表示されます2.登録ボタンをクリックして、ルートは
/register
まで跳んで、1つのアカウントを登録して、ユーザーとパスワードはすべてLHHで、“牛人”を選んで、登録をクリックして、その後ルートは/geniusinfo
まで跳んで、つまり牛人は情報ページを完備して、1つの顔を選んでそして情報を完備した後に保存ボタンをクリックします3.すでに3つのtabオプションのあるコンテンツページが表示されているので、「私」をクリックすると、ルートが
/me
にジャンプして個人センターの内容が表示されますが、bossとメッセージのtabページにはまだ内容がありません.前の手順に従ってBossアカウントを登録することができます.登録するときにBossオプションを選択するだけです.4.現在LHHとLCEアカウントでそれぞれ見られるリスト
5.クリックしてチャットルームに入り、内容を入力する
二、次にプロジェクトの主な内容を説明する
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パッケージされたものであり、プロジェクトでバックエンドインタフェースを有効にするとアクセスできます.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(
(
),
document.getElementById('root')
)
react-reduxのProviderを使用すると、グローバルなステータスストレージが実現され、サブコンポーネントはpropsによってグローバルに格納されたステータスを取得できます.
const store = createStore(reducers, compose(
applyMiddleware(thunk),
window.devToolsExtension?window.devToolsExtension():f=>f
))
上記のコードの主な役割は、ブラウザのreduxプラグインを構成することです.このプラグインを使用してコンソールでstateのデータを表示できます.アプリを見てみましょう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 (
)
}
}
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
に書くことができる.3.Server
バックエンドインタフェースは
node.js
のexpress
フレームワークを使用し、データベースはmongodb
を使用し、server
フォルダに接続データベースのファイルを格納し、model.js
はmongodb
データベースに直接接続し、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
ポートを使用し、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
に書かれています.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
三、まとめ
本プロジェクトでは、取得データと表現のコード分離を実現し、
React、Node WebSocket
の学習をさらに向上させることもできるが、async
とawait
で非同期取得を行うことができるなど、多くの改善点がある.先端菜鳥として、やはり先輩に勉強のアドバイスとアドバイスをしてもらいたいです.最後に本プロジェクトのコードリンクgithubリンクを添付します.