如何用Node.js和React构建一个支持长尾词的智能即时通讯聊天室？

本文共计853个文字，预计阅读时间需要4分钟。

使用`npx create-react-app socketio-demo`创建项目，进入`socketio-demo`目录，运行`eject`进行打包。注意，本项目习惯不进行打包，这是个人习惯。建议在项目初期阶段执行`eject`命令，编写代码后不要再使用容器化。

npx create-react-app socketio-demo

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

yarn eject

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

mkdir server type null>index.js

创建完成后目录如下

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

安装nodejs插件

npm i express 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实现即时通讯简易聊天室功能，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！