使用ReactJS和Firebase聊天应用程序(实时数据库)

在本文中,我们将学习如何使用ReactJS和Firebase构建聊天应用程序。 如果您是前端或全栈开发人员,则必须听说过ReactJS。 它是Facebook创建的JavaSscript库,用于创建UI组件。

对于初学者,让我们简要介绍一下ReactJS和Firebase。

ReactJS:

React是Facebook创建和使用的JavaScript库。 该库用于构建用户界面。 它是Web应用程序的视图层。 React应用程序由组件组成。 组件充当UI模块,并使用成熟的客户端功能(例如按钮,表格和向导的组件)呈现一些html输出。 一个组件可以在其输出中包含一个或多个组件。 创建小组件后,我们将它们合并到定义应用程序的高级组件。

火力地堡:

Firebase是后端即服务(BAAS)。 BAAS是一种云计算服务模型,用作中间件,可为开发人员提供通过API和SDK将其Web和移动应用程序连接到云服务的方法。 Firebase由Google开发,提供的一些服务如下:

实时数据库

推送通知

Firebase分析

Firebase身份验证

Firebase云消息传递

Firebase储存

Firebase托管

在我们的聊天应用程序中,我们将使用实时数据库Firebase托管。

实时数据库是NoSQL云数据库。 数据以JSON格式存储并实时同步到每个客户端。 每次数据更改时,所有连接的客户端都会在毫秒内收到更新的数据。 您可以使用浏览器访问它,不需要任何应用程序服务器。 可通过安全规则进行安全性和数据验证。

创建React App:

我们将使用create-react-app创建由Facebook提供的react应用。 您不需要安装Webpack和Babel,它们已经预先配置了。

  npx create-react-app聊天应用 

您也可以使用任何样板开始。 现在安装Firebase节点模块。

  npm安装firebase --save 

尝试运行该应用程序,应该在浏览器中打开一个标准的create-react-app页面。

  cd聊天应用 
npm开始

您的目录结构将如下所示:

 聊天应用 
├──README.md
├──node_modules
├──package.json
├──.gitignore
├──公众
│├──favicon.ico
│├──index.html
│└──manifest.json
└──src
├──App.css
├──App.js
├──App.test.js
├──index.css
├──index.js
├──logo.svg
└──serviceWorker.js

现在,我们将添加两个主要组件UserChat。src/文件夹中添加两个JavaScript文件User.jsChat.js。

User.js

以下是整个用户组件的代码

 从'react'导入React,{组件}; 
从“ ./firebase”导入{数据库};

导出默认类用户扩展组件{
constructor(){
超();

this.state = {
使用者:[],
用户名: ''
};
}

componentWillMount(){
const userRef = database.ref('users')
.orderByKey()
.limitToLast(100);

userRef.once('value',快照=> {
const users = [snapshot.val()];
this.setState({users:users});
});
}

onNameChange(e){
this.setState({用户名:e.target.value})
}

onAddClick(e){
e.preventDefault();
database.ref('users')。push({username:this.state.username});
localStorage.setItem('chat_username',this.state.username);
this.props.history.push('/ chat');
}

render(){
返回(





);
}
}从“反应”中导入React,{组件};
从“ ./firebase”导入{数据库};

导出默认类用户扩展组件{
constructor(){
超();

this.state = {
使用者:[],
用户名: ''
};
}

componentWillMount(){
const userRef = database.ref('users')
.orderByKey()
.limitToLast(100);

userRef.once('value',快照=> {
const users = [snapshot.val()];
this.setState({users:users});
});
}

onNameChange(e){
this.setState({用户名:e.target.value})
}

onAddClick(e){
e.preventDefault();
database.ref('users')。push({username:this.state.username});
localStorage.setItem('chat_username',this.state.username);
this.props.history.push('/ chat');
}

render(){
返回(





);
}
}

在数据库中创建对“用户”模型的引用并检索用户。

  const userRef = database.ref('users') 
.orderByKey()
.limitToLast(100);

userRef.once('value',快照=> {
const users = [snapshot.val()];
this.setState({users:users});
});

Chat.js

该组件呈现所有消息。 每个消息包含两个属性。

讯息文字

用户名

 从'react'导入React,{组件}; 
从“ ./firebase”导入{数据库};

导出默认类Chat扩展了Component {
constructor(){
超();

this.state = {
讯息:[],
用户名: ''
};

this.onAddMessage = this.onAddMessage.bind(this);
}

componentWillMount(){
const username = localStorage.getItem('chat_username');
this.setState({username:username?username:'Unknown'})
const messagesRef = database.ref('messages')
.orderByKey()
.limitToLast(100);

messagesRef.on('value',快照=> {
让messagesObj = snapshot.val();
让消息= [];
Object.keys(messagesObj).forEach(key => messages.push(messagesObj [key]));
messages = messages.map((message)=> {return {text:message.text,user:message.user,id:message.key}})
this.setState(prevState =>({
讯息:讯息,
}));
});
}

onAddMessage(event){
event.preventDefault();
database.ref('messages')。push({text:this.input.value,user:this.state.username});
this.input.value ='';
}

render(){
返回(


聊天消息


{this.state.messages.map((message)=> {
const _class = message.user === this.state.username? 'message-left container':'message-right container';
返回(

{message.user}

{message.text}





})}






);
}
}

以下代码创建chat参考并检索更新的数据。

  const messagesRef = database.ref('messages') 
.orderByKey()
.limitToLast(100); messagesRef.on('value',快照=> {
让messagesObj = snapshot.val();
让消息= [];
Object.keys(messagesObj).forEach(key => messages.push(messagesObj [key]));
messages = messages.map((message)=> {return {text:message.text,user:message.user,id:message.key}})
this.setState(prevState =>({
讯息:讯息,
}));
});

每次数据库中的数据更新时,都会使用更新的数据来调用已注册的回调函数并更新组件的状态。

App.js

 从'react'导入React,{组件}; 

App类扩展了组件{
render(){
返回(

{this.props.children}

);
}
}

导出默认应用程序;

Index.js

 从'react'导入React; 
从'react-dom'导入ReactDOM;
导入'./index.css';
从“ ./App”导入应用;
从'./User'导入User;
从“ ./Chat”导入聊天;
从'./registerServiceWorker'导入registerServiceWorker;
从'react-router-dom'导入{HashRouter,Route}

ReactDOM.render(





,document.getElementById('root'));
registerServiceWorker();

一些样式:

public/index.html添加Bootstrap链接以提高响应速度。

   

Index.css

 身体 { 
保证金:0自动;
最大宽度:800px;
填充:0 20px;
}

。容器 {
border:2px实心#dedede;
背景颜色:#f1f1f1;
border-radius:5px;
填充:10px;
边距:10px 0;
}

.darker {
border-color:#ccc;
背景颜色:#ddd;
}

.container ::之后{
内容:“”;
清楚的
显示:表;
}

.container img {
向左飘浮;
最大宽度:60px;
宽度:100%;
右边距:20px;
边界半径:50%;
}

.container img.right {
浮动:正确;
左边距:20px;
margin-right:0;
}

.time-right {
浮动:正确;
颜色:#aaa;
}

。剩下的时间 {
向左飘浮;
颜色:#999;
}
img {
宽度:100%;
}

.message-left {
宽度:55%;
显示:inline-block;
}
.message-right {
宽度:55%;
浮动:正确;
}
.text-area {
宽度:90%;
高度:85px;
}
.send-btn {
左边距:5px;
上边距:-60px;
}
.textarea-div {
溢出:隐藏;
}
.padding-13 {
内边距:13px;
}
.messages-div {
高度:500像素;
溢出:自动;
}
.name-heading {
颜色:cadetblue;
font-size:20px;
字体粗细:600;
}
.marg-left-10 {
左边距:10px;
}

通过npm start运行该应用npm start 。 随着应用程序的正常运行,让我们在Firebase上部署该应用程序。

在Firebase上部署:

登录到Firebase,获取API密钥和项目ID

  Firebase登录 

像这样将API密钥和其他设置复制到Firebase.js

 从“ firebase”导入*作为firebase; 

const config = {
apiKey:'you-api-key',
authDomain:“ your-domain.firebaseapp.com”,
databaseURL:“ https:// .firebaseio.com”,
storageBucket:“ .appspot.com”
};

firebase.initializeApp(config);

const database = firebase.database();

出口 {
数据库,
};

初始化Firebase应用程序,选择适当的数据库和托管选项

  Firebase初始化 

部署应用运行

 火力基地部署 

运行上述命令后,将在控制台上提供托管应用的网址。 打开它,享受吧!

这是您使用Firebase向应用程序添加实时更新的方式。 有几种使用Signal R,Socket.io的方法,但是Firebase为其提供了极大的方便。

您可以在此处找到代码存储库。 如果您遇到任何问题,请随时与我联系 rkhurram343@gmail.com