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


Posted in NodeJs onAugust 21, 2019

npx create-react-app socketio-demo

进入socketio-demo目录 运行eject进行拆包,本项目也可以不拆,这是个人习惯。 注意如果运行eject命令最好在项目初始阶段执行,已经开始编写后不要再使用容易出现bug,新人谨慎使用eject命令

yarn eject

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

mkdir server
type null>index.js

创建完成后目录如下

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

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

安装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

创建完成后目录如下

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

这里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

新建目录如下

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

在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='/' 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('/') 
  } 
 } 
 render() { 
  return null 
 } 
} 
 
export default Auth

编写输入昵称并跳转步骤 打开src/io/login.js文件

import React from 'react';
import './socket-demo.css';
import {connect} from 'react-redux'
import {setUserName} from '../redux/user.redux'
@connect(
 null,
 {setUserName}
)
class Login extends React.Component{
 constructor(props) {
  super(props);
  this.state={
   user:''
  }
  this.login=this.login.bind(this)
  this.onKeyDown=this.onKeyDown.bind(this)
 }
 //键盘点击跳转 
 onKeyDown(e){
  switch (e.keyCode) {
   case 13:
    this.login();
    return;
   default:
    return;
  }
 }
 //添加键盘事件 
 componentDidMount() {
  document.addEventListener("keydown", this.onKeyDown)
 }
 //赋值state 
 handleChange(title,target){
  this.setState({
   [title]:target.target.value
  })
 }
 //赋值并跳转到聊天室页面 
 login(){
  let {user}=this.state;
  if(user!==null && user.trim()!==''){
   this.props.setUserName(user);
   this.props.history.push('/talk')
  }
 }
 render() {
  return (
   <div className='loginDiv'>
    <input type='text' placeholder='输入昵称' onChange={v=>this.handleChange('user',v)} />
    <button onClick={this.login}>进入聊天室</button>
   </div> );
 }
}

export default Login

下面是重头戏,聊天室的前端展示的核心代码 打开src/iosocket-demo.js文件

import React from 'react'
import io from 'socket.io-client'
import {connect} from 'react-redux'
import './socket-demo.css'
const url='ws://localhost:9093'
const socket = io(url);
@connect(
 state=>state,
 {}
)
class SocketDemo extends React.Component{
 constructor(props) {
  super(props);
  this.state={
   message:'',
   user:this.props.User.user,
   messages:[]
  }
  this.send=this.send.bind(this)
  this.login=this.login.bind(this)
  this.onKeyDown=this.onKeyDown.bind(this)
 }
 componentDidMount() {
  //输入欢迎信息 
  this.login()
  //增加回车事件 
  document.addEventListener("keydown", this.onKeyDown)
  //socket.io连接后台 
  io(url).on('connect', ()=>{
   console.log('connect');
   socket.on('messages', data => {
    //返回用户列表 
    this.setState({
     messages:[...this.state.messages,data]
    })
    if(this.refs.showDiv){
     this.refs.showDiv.scrollTop=2000
    }
   });
  });
 }
 componentWillUnmount() {
  //断开socket io连接 
  io('ws://localhost:9093').on('disconnect', function(){
   console.log('disconntect');
  });
  document.removeEventListener("keydown", this.onKeyDown)
 }
 //鼠标回车事件 
 onKeyDown(e){
  switch (e.keyCode) {
   case 13:
    this.send();
    return; default:
    return;
  }
 }
 //向后台发送信息 
 send(){
  let {user,message}=this.state;
  console.log(this.refs.showDiv);
  socket.emit('messages', {user,message});
  this.setState({
   message:''
  })
 }
 login(){
  let user=this.props.User.user;
  const obj={user:'作者',message:`欢迎${user}来到聊天室`}
  if(user.trim()!==''){
   this.setState({
    user:user,
    messages:[obj]
   })
  }
 }
 //赋值state 
 handleChange(title,target){
  this.setState({
   [title]:target.target.value
  })
 }
 render() {
  let cn='showInfo'
  return (
   <div>
    <div className='talkDiv'>
     <div className='operatingDiv'>
      <input type='text'
          placeholder='请在此输入聊天信息'
          onChange={v=>this.handleChange('message',v)}
          value={this.state.message}
      />
      <button onClick={this.send}>发送链接</button>
     </div> <div ref='showDiv' className='showDiv'>
     {
      this.state.messages.map((v,index)=>{
       if(index===0){
        cn='titleInfo'
       }else{
        cn='showInfo'
       }
       return (
        <div className={cn} key={index}>
         <span>{v.user}:</span>
         <span>{v.message}</span>
        </div> )
      })
     }
    </div>
    </div>
   </div> );
 }
}
export default SocketDemo;

最后加上src/iosocket-demo.css

body{ 
  background: #008DB7; 
 font-family: 'Microsoft YaHei UI'; 
 
} 
.loginDiv{ 
  text-align: center; 
 margin: 150px auto 0; 
 width: 250px; 
} 
.loginDiv input[type='text']{ 
  display: inline-block; 
 box-sizing: border-box; 
 border-radius: 5px; 
 padding-left: 5px; 
 border: none; 
 width: 250px; 
 height: 35px; 
 line-height: 35px; 
} 
.loginDiv button{ 
  display: inline-block; 
 box-sizing: border-box; 
 border-radius: 5px; 
 padding-left: 5px; 
 border: none; 
 width: 250px; 
 height: 35px; 
 line-height: 35px; 
 margin-top: 10px; 
 background: #0067A2; 
 color: #ffffff; 
} 
 
.talkDiv{ 
  position: fixed; 
 top: 0; 
 left: 0; 
 right: 0; 
 bottom: 0; 
} 
 
.talkDiv .operatingDiv{ 
  position: fixed; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 height: 40px; 
 display: flex; 
} 
 
.talkDiv .operatingDiv input[type='text']{ 
  flex: 1; 
 height: 40px; 
 line-height: 40px; 
 box-sizing: border-box; 
 padding-left: 10px; 
} 
.talkDiv .operatingDiv button{ 
  display: inline-block; 
 box-sizing: border-box; 
 border-radius: 5px; 
 border: none; 
 width: 250px; 
 height: 40px; 
 line-height: 40px; 
 background: #0067A2; 
 color: #ffffff; 
} 
 
.talkDiv .showDiv{ 
  position: fixed; 
 bottom: 40px; 
 left: 0; 
 right: 0; 
 top: 0; 
 font-size: 16px; 
 color: #ffffff; 
 overflow: auto; 
} 
.talkDiv .showDiv .titleInfo{ 
  padding: 10px; 
 color: yellow; 
 font-size: 20px; 
} 
.talkDiv .showDiv .showInfo{ 
  padding: 10px; 
}

在package.json中加入命令行

"scripts": { 
 "start": "node scripts/start.js", 
 "build": "node scripts/build.js", 
 "server": "nodemon server/index.js"
},
  • 运行后台 yarn server
  • 运行前台 yarn start

启动程序

总结

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

NodeJs 相关文章推荐
nodejs分页类代码分享
Jun 17 NodeJs
使用nodejs、Python写的一个简易HTTP静态文件服务器
Jul 18 NodeJs
Nodejs进阶:核心模块net入门学习与实例讲解
Nov 21 NodeJs
详解nodejs express下使用redis管理session
Apr 24 NodeJs
详解Windows下安装Nodejs步骤
May 18 NodeJs
nodejs接入阿里大鱼短信验证码的方法
Jul 10 NodeJs
详解redis在nodejs中的应用
May 02 NodeJs
nodejs用gulp管理前端文件方法
Jun 24 NodeJs
用Electron写个带界面的nodejs爬虫的实现方法
Jan 29 NodeJs
nodejs中request库使用HTTPS代理的方法
Apr 30 NodeJs
nodejs实现的http、https 请求封装操作示例
Feb 06 NodeJs
nodejs+express最简易的连接数据库的方法
Dec 23 NodeJs
Nodejs 识别图片类型的方法
Aug 15 #NodeJs
NodeJs实现简易WEB上传下载服务器
Aug 10 #NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
Aug 05 #NodeJs
Nodejs监听日志文件的变化的过程解析
Aug 04 #NodeJs
nodejs对项目下所有空文件夹创建gitkeep的方法
Aug 02 #NodeJs
nodejs读取图片返回给浏览器显示
Jul 25 #NodeJs
关于NodeJS中的循环引用详解
Jul 23 #NodeJs
You might like
PHP与SQL注入攻击[二]
2007/04/17 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
PHP简单实现上一页下一页功能示例
2016/09/14 PHP
php创建图像具体步骤
2017/03/13 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
JavaScript 利用StringBuffer类提升+=拼接字符串效率
2009/11/24 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
JavaScript常用对象的方法和属性小结
2012/01/24 Javascript
JavaScript自执行闭包的小例子
2013/06/29 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
Bootstrap3 图片(响应式图片&amp;图片形状)
2017/01/04 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
关于JavaScript 数组你应该知道的事情(推荐)
2019/04/10 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
在Python中操作字典之update()方法的使用
2015/05/22 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
有关Python的22个编程技巧
2018/08/29 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
flask框架url与重定向操作实例详解
2020/01/25 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
ffmpeg+Python实现B站MP4格式音频与视频的合并示例代码
2020/10/21 Python
Python调用ffmpeg开源视频处理库,批量处理视频
2020/11/16 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
高中教师考核方案
2014/05/18 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书
如何用Python搭建gRPC服务
2021/06/30 Python
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android
vue elementUI批量上传文件
2022/04/26 Vue.js
nginx设置资源请求目录的方式详解
2022/05/30 Servers