npx create-react-app socketio-demo
进入socketio-demo目录 运行eject进行拆包，本项目也可以不拆，这是个人习惯。 注意如果运行eject命令最好在项目初始阶段执行，已经开始编写后不要再使用容易出现bug，新人谨慎使用eject命令
yarn eject
项目拆包后创建服务器文件夹和文件
mkdir server type null>index.js
创建完成后目录如下
编写即时通讯（聊天室）后台
安装nodejs插件
npm i express http socket.io nodemon
进入server文件夹下的index.js页面开始编写后台程序
const app = require('express')(); const server = require('http').Server(app); const io = require('socket.io')(server); //设置端口9093 server.listen(9093); //创建socket.io连接 io.on('connection', function (socket) { //获取messages事件 socket.on('messages', function (data) { //向所有连接进行广播 socket.broadcast.emit('messages', data) //对发出者进行广播，用户名加上我 data.user=data.user+'[我]' socket.emit('messages', data) }); });
编写即时通讯（聊天室）前台
后台编写完毕，可以在src目录中编写前台内容 安装需要用到的react-router和redux依赖
npm i redux react-redux react-router react-router-dom
在src中创建io文件夹 在io文件夹中创建所需要的文件
cd src mkdir io cd io type null>login.js type null>socket-demo.js type null>socket-demo.css mkdir auth cd auth type null>auth.js
创建完成后目录如下
这里auth.js文件是用来判断用户是否输入昵称，如已输入昵称可以进入聊天室，如没有输入昵称则跳回登录界面要求输入昵称
本项目当中我们把昵称存在redux里实现登录界面和聊天室界面的共用，当然现这个项目比较小，如果想用localStorage存在本地也可以，不过考虑到后期的扩展性以及加深对redux的理解我还是选择存在redux当中
src文件夹下创建redux.js文件
src文件夹下创建redux文件夹,在redux文件夹下创建user.redux.js文件
cd src type null>redux.js mkdir redux cd redux type null>user.redux.js
新建目录如下
在redux文件夹下的user.redux.js中创建存储用户昵称的reducer
const SET_USERNAME='SET_USERNAME' //初始化仓库 const initState={user:''} //根据动作改变仓库 export function User(state = initState, action) { switch (action.type) { case SET_USERNAME: return {...state,user:action.payload} default: return state } } //写入昵称动作 export function setUserName(user) { return { type:SET_USERNAME, payload:user } }
在src/redux.js文件中创建仓库 combineReducers用于多个reducer的合并，这个项目中也可以不加，单为了后期扩展加入使用
import { combineReducers, createStore } from 'redux' import {User} from './redux/user.redux' //window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 用于chrome redux的扩展项 let reducer = combineReducers({ User }) let store = createStore( reducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()) export default store
这样就可以在页面当中使用redux了
下一步在app.js中引入redux，并把路由搭建起来 在src/app.js中写入
import React from 'react'; import {HashRouter as Router,Route,Switch} from 'react-router-dom' import Login from "./io/login"; import SocketDemo from "./io/socket-demo"; import {Provider} from 'react-redux' import store from './redux' import Auth from "./io/auth/auth"; function App() { return ( <Provider store={store}> <Router> <Auth></Auth> <Switch> <Route exact path='https://www.jb51.net/' component={Login}/> <Route exact path='/talk' component={SocketDemo}/> </Switch> </Router> </Provider> ); } export default App;
在写页面之前我们先安装修饰符插件
npm i babel-plugin-transform-decorators-legacy
Babel >= 7.x 时安装 @babel/plugin-proposal-decorators
npm i @babel/plugin-proposal-decorators
在package.json中babel项中配置，注意plugins放在presets前否则容易报错
"babel": { "plugins": [ ["@babel/plugin-proposal-decorators", { "legacy": true }] ], "presets": [ "react-app" ] }
好了这样就可以使用装饰付了
下面我们来编写判断是否设置用户名的程序 打开src/io/auth下的auth.js文件
import React from 'react'; import {connect} from 'react-redux' import {withRouter} from 'react-router-dom' //获取reducer @connect( state=>state, {} ) //获取router @withRouter class Auth extends React.Component{ componentDidMount() { //如果有用户名就跳到聊天页，如没有则跳到登陆页。 if(this.props.User.user){ this.props.history.push('/talk') }else { this.props.history.push('https://www.jb51.net/') } } render() { return null } } export default Auth
编写输入昵称并跳转步骤 打开src/io/login.js文件