nodejs和反应实现即时通讯简易聊天室功能

萘普生创建-反应-应用程序插座-演示

进入套接字io-演示目录运行驱逐进行拆包，本项目也可以不拆，这是个人习惯。注意如果运行驱逐命令最好在项目初始阶段执行，已经开始编写后不要再使用容易出现臭虫，新人谨慎使用驱逐命令

纱线弹出

项目拆包后创建服务器文件夹和文件

mkdir servertype nullindex.js创建完成后目录如下

编写即时通讯（聊天室)后台

安装开发插件

NPM我快递http套接字。io nodemon

进入计算机网络服务器文件夹下的index.js页面开始编写后台程序

const app=require(' express ')()；const server=require('http ').服务器(app)；const io=require('socket.io ')(服务器);//设置端口9093服务器。听(9093)；//创建socket.io连接io.on('connection '，function (socket) { //获取信息事件socket.on('messages '，function (data) { //向所有连接进行广播插座。广播。发出('消息，数据)//对发出者进行广播，用户名加上我data.user=data.user '[我]' socket.emit('messages '，data)})；});编写即时通讯（聊天室)前台

后台编写完毕，可以在科学研究委员会目录中编写前台内容安装需要用到的反应路由器和回家的依赖

NPM I redux react-redux react-路由器react-路由器-DOM

在科学研究委员会中创建超正析象管文件夹在超正析象管文件夹中创建所需要的文件

CD srcmkdir iocd iotype null登录。jstype空套接字-演示。jstype空套接字-演示。cssmkdir authcd authtype null auth。射流研究…创建完成后目录如下

这里auth.js文件是用来判断用户是否输入昵称，如已输入昵称可以进入聊天室，如没有输入昵称则跳回登录界面要求输入昵称

本项目当中我们把昵称存在回家的里实现登录界面和聊天室界面的共用，当然现这个项目比较小，如果想用localStorage存在本地也可以，不过考虑到后期的扩展性以及加深对回家的的理解我还是选择存在回家的当中

科学研究委员会文件夹下创建redux.js文件

科学研究委员会文件夹下创建回家的文件夹，在回家的文件夹下创建user.redux.js文件

CD srctype nullredux。jsmkdir redux CD redux类型nulluser。redux。射流研究…新建目录如下

在回家的文件夹下的user.redux.js中创建存储用户昵称的还原剂

const SET _ USERNAME=' SET _ USERNAME '//初始化仓库const IntState={ user : ' ' }//根据动作改变仓库导出函数用户(状态=初始状态，动作){开关(动作。类型){ case SET _ username : return }.状态，用户：操作。有效载荷}默认值：返回状态} } //写入昵称动作导出函数setUserName(用户){返回{ type:SET_USERNAME，payload:user } }在src/redux.js文件中创建仓库组合减少器用于多个还原剂的合并，这个项目中也可以不加，单为了后期扩展加入使用

从redux '导入{组合生成器，创建存储}从redux '导入{用户} ./redux/user。redux//window ._ _ REDUX _ DEVTOOLS _ EXTENSION _ _窗口.__REDUX_DEVTOOLS_EXTENSION__()用于铬还原的扩展项let reducer=combinereeducers({ User })let store=createStore(reducer，window ._ _ REDUX _ DEVTOOLS _ EXTENSION _ _窗口.__REDUX_DEVTOOLS_EXTENSION__())导出默认存储这样就可以在页面当中使用回家的了

下一步在app.js中引入redux，并把路由搭建起来在src/app.js中写入

从“反应”导入做出反应；从“react-router-dom”导入{ HashRouter作为路由器、路由、交换机}从导入登录“/io/登录”；从""导入SocketDemo ./io/socket-demo '；从“反应-还原”导入{提供程序}”从导入存储"。/redux "从导入授权"。/io/auth/auth '；函数App(){ return(提供商商店={ store }路由器授权/授权交换机路由精确路径='/'组件={登录}/路线精确路径='/说话'组件={ socket demo }//交换机/路由器/提供商)；}导出默认应用在写页面之前我们先安装修饰符插件

NPM一世巴别塔-插件-转换-装饰者-遗留

巴别塔=7.x时安装@ babel/plugin-提案-装饰者

NPM我@巴别塔/插件-提案-装饰者

在package.json中巴别塔项中配置，注意插件放在事先调整前否则容易报错

babel ' : { ' plugins ' :[[' @ babel/plugin-propose-decorator '，{ 'legacy': true }]，' preferences ' :[' react-app ']}好了这样就可以使用装饰付了

下面我们来编写判断是否设置用户名的程序打开src/io/auth下的auth.js文件

从“反应”导入做出反应；从“反应-还原”导入{connect}，从“react-router-DOM”/导入{带路由器}获取reduce @ connect(state=state，{} ) //获取路由器@带路由器类作家（author的简写）扩展了做出反应.组件{ componentDidMount() { //如果有用户名就跳到聊天页，如没有则跳到登陆页如果(这个。道具。用户。用户){这个。道具。历史。push('/talk ')} else { this。道具。历史。push('/')} } render(){ return null } }导出默认作家（author的简写）编写输入昵称并跳转步骤打开src/io/login.js文件

从“反应”导入做出反应；"进口"。/socket-演示。CSS '；从“反应-还原”导入{连接}”从"导入{设置用户名}./redux/user。redux ' @ connect(null，{setUserName})类注册扩展了做出反应.组件{构造器（道具){ super(道具);这个。state={ user : ' ' }这。登录=这个。登录。把这个绑起来。onkeydown=这个。翁克顿。绑定(此)}//键盘点击跳转onKeyDown(e){ switch(e . key code){ case 13: this。登录()；返回；默认值：返回；} } //添加键盘事件componentDidMount(){ document。addeventlistener(' keydown '，this.onKeyDown) } //赋值state handleChange(标题，目标){ this。setstate({[title]:目标。目标。value })}//赋值并跳转到聊天室页面log in(){ let { user }=this。国家；如果(用户！==null user.trim()！==''){ this.props.setUserName(用户);这个。道具。历史。push('/talk ')} } render(){ return(div类名=' loginDiv '输入类型=“文本”占位符='输入昵称onChange={ v=this。handlechange(' user '，v)}/button onClick={this.login}进入聊天室/button/div)；} }导出默认登录下面是重头戏，聊天室的前端展示的核心代码打开src/iosocket-demo.js文件

从“反应”导入反应从" socket.io-client "导入{连接}从“反应-还原”导入/socket-演示。CSS ' const URL=' ws ://localhost :9093 ' const socket=io(URL)；@connect(状态=state，{})类SocketDemo扩展了做出反应.组件{构造器（道具){ super(道具);this.state={ message: ' '，user:this.props.User.user，messages :[]} this。send=这个。发送。把这个绑起来。登录=这个。登录。把这个绑起来。onkeydown=这个。翁克顿。bind(this)} component demont(){//输入欢迎信息this.login() //增加回车事件文件。addeventlistener(' keydown '，this.onKeyDown) //socket.io连接后台io(网址)。on('connect '，)={ console。日志(“连接”)；socket.on('消息'，数据={ //返回用户列表this.setState({ messages:[.this.state.messages，data]})if(this。参考文献。{这个。参考文献。展示区。滚动顶部=2000 } })；});}组件将卸载(){ //断开套接字超正析象管连接io(' ws :///localhost :9093 ').on('disconnect '，function(){ console。日志(“断开”)；});文件。removeeventlistener(' keydown '，this.onKeyDown) } //鼠标回车事件onKeyDown(e){ switch(e . key code){ case 13: this。send()；返回；默认值：返回；} } //向后台发送信息send(){ let {user，message }=this.stateconsole。日志(这个。参考文献。show div)；socket.emit('messages '，{user，message })；这个。setstate({ message : ' ' })}登录(){让用户=this。道具。用户。用户；const obj={user: '作者，消息： `欢迎${user}来到聊天室` } if(user.trim()！==' '){这个。setstate({ user : user，messages 3360[obj]})} }//赋值state handleChange(标题，目标){ this。setstate({[title]:目标。目标。value })} render(){ let cn=' showInfo ' return(div类名=' talkDiv ' div类名=' operating div '输入类型='text '占位符='请在此输入聊天信息onChange={ v=this。handlechange(' message '，v)}值={ this。国家。message }/button onClick={ this。发送}发送链接/button/div ref=' show div '类名=' show div ' { this。国家。消息。map((v，index)={ if(index===0){ cn=' title info ' } else { cn=' show info ' } return(div类名={ cn } key={ index } span { v . user } :/span { v . message }/span/div)}/div/div/div)；} }导出默认SocketDemo最后加上src/iosocket-demo.css

正文{ background : # 008 db 7 font-family : '微软雅黑用户界面'；} .登录div { text-align : center余量： 150像素自动0;宽度： 250像素；} .loginDiv输入[类型=' text ']{ display : inline-block；盒子尺寸：边框盒子；边界半径： 5px左衬垫left: 5pxborder:无；宽度： 250像素；高度： 35px线高： 35px} .loginDiv按钮{ display : inline-block；盒子尺寸：边框盒子；边界半径： 5px左衬垫左侧left: 5pxborder:无；宽度： 250像素；高度： 35px线高： 35px页边距-top : 10px；背景技术# 0067A2color: # ffffff}。talkDiv{ position:固定；top : 0；左： 0；右： 0；底部： 0；} .talkDiv .操作四位置：固定；底部： 0；左： 0；右： 0；高度： 40pxdisplay: flex}。talkDiv .操作iv输入[类型=' text ']{ flex : 1；高度： 40px线高： 40px盒子尺寸：边框盒子；左填充： 10px} .talkDiv .操作按钮{ display : inline-block；盒子尺寸：边框盒子；边界半径： 5pxborder:无；宽度： 250像素；高度： 40px线高： 40px背景技术# 0067A2color: # ffffff}。talkDiv .showDiv{ position:固定；bottom : 40pxleft : 0；右： 0；top : 0；font-size : 16pxcolor: # ffffff飞越：汽车；} .talkDiv .展示区.titleInfo { padding: 10px颜色：黄色；font-size : 20px} .talkDiv .展示区.showInfo { padding: 10px }在package.json中加入命令行

脚本' : { '开始' : '节点脚本/start.js ' '，build': '节点脚本/build.js '，' server ' : ' nodemon server/index。js ' }，运行后台纱线服务器运行前台纱线开始启动程序

总结

以上所述是小编给大家介绍的开发和反应实现即时通讯简易聊天室功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！