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新建目录如下
