{"id":12144,"date":"2022-10-05T10:53:23","date_gmt":"2022-10-05T15:53:23","guid":{"rendered":"https:\/\/upmostly.com\/?p=12144"},"modified":"2022-10-05T10:53:24","modified_gmt":"2022-10-05T15:53:24","slug":"guide-build-a-real-time-chat-application-with-reactjs-%f0%9f%94%a5%e2%9a%9b%ef%b8%8f","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/guide-build-a-real-time-chat-application-with-reactjs","title":{"rendered":"Guide: Build a Real-Time Chat Application With ReactJS \ud83d\udd25+\u269b\ufe0f"},"content":{"rendered":"\n<p>When we talk about real-time chat applications, we think of web sockets and how to handle receive and send messages through dedicated sockets and handle them efficiently. In this guide, we are going to learn how to make a real-time chat application using <a href=\"https:\/\/firebase.google.com\/\" data-type=\"URL\" data-id=\"https:\/\/firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">firebase<\/a> and ReactJS. \ud83d\udd25 + \u269b\ufe0f<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Pre-requisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Javascript<\/li><li>Development environment<\/li><li>Programming concepts<\/li><li>ReactJS environment<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">1. Getting Started<\/h2>\n\n\n\n<p>We will kick off by creating a new ReactJS application<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npx create-react-app my-chat-app<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">2. Firebase Configuration<\/h2>\n\n\n\n<p>While your new ReactJS project is being installed let us jump on our next configuration so that we can save time \ud83d\ude0b. Go to <a href=\"https:\/\/console.firebase.google.com\/\" data-type=\"URL\" data-id=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">firebase console<\/a>. Over here you can get started by adding a new project. You will now go through some steps to successfully create a firebase project.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-1024x567.png\" alt=\"\" class=\"wp-image-12159\" width=\"670\" height=\"370\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-1024x567.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-768x425.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-1536x850.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.35.14-AM-2048x1134.png 2048w\" sizes=\"auto, (max-width: 670px) 100vw, 670px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-1024x567.png\" alt=\"\" class=\"wp-image-12162\" width=\"673\" height=\"373\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-1024x567.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-768x425.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-1536x850.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.38.13-AM-2048x1134.png 2048w\" sizes=\"auto, (max-width: 673px) 100vw, 673px\" \/><\/figure>\n<\/div>\n\n\n<p>When your firebase project is ready, go to project overview, and at the end of the page create a web application for your project. After creating the application you will get a configuration snippet for your code. Copy that to you file, we will be using it later.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.39.26-AM-1024x566.png\" alt=\"\" class=\"wp-image-12165\" width=\"714\" height=\"393\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-1024x567.png\" alt=\"\" class=\"wp-image-12180\" width=\"715\" height=\"396\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-1024x567.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-768x425.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-1536x850.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.40.32-AM-2048x1134.png 2048w\" sizes=\"auto, (max-width: 715px) 100vw, 715px\" \/><\/figure>\n<\/div>\n\n\n<p>After copying this configuration, move on to the next steps which are<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Firestore configuration \ud83d\ude80<\/li><li>Authentication with Google \ud83d\udc40\ud83d\udd11<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. Firestore Configuration \ud83d\udd25<\/h2>\n\n\n\n<p>Firestore is a flexible, scalable NoSQL cloud database to store and sync data for client and server-side development. It syncs data using real-time listeners and also offers offline support. Go to <strong>Build -&gt; Firestore database<\/strong> to create a new database and collection in it, once you new database is ready go under <strong>Data<\/strong> tab and create a new collection with the name <strong>chat-messages<\/strong>, we will be using this collection to store our messages data.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-1024x566.png\" alt=\"\" class=\"wp-image-12183\" width=\"636\" height=\"351\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-1024x566.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-768x425.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-1536x849.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.42.07-AM-2048x1132.png 2048w\" sizes=\"auto, (max-width: 636px) 100vw, 636px\" \/><\/figure>\n<\/div>\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-1024x565.png\" alt=\"\" class=\"wp-image-12186\" width=\"633\" height=\"349\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-1024x565.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-768x424.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-1536x848.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.46.11-AM-2048x1131.png 2048w\" sizes=\"auto, (max-width: 633px) 100vw, 633px\" \/><\/figure>\n<\/div>\n\n\n<p>Now go under the <strong>Rules<\/strong> tab and change the read, write rules to true<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">  allow read, write: if true;<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">4. Authentication Using Google<\/h2>\n\n\n\n<p>Mostly all of the applications require some way of recognizing their users so that relevant can be displayed on their accounts. Firebase authentication allows various methods of authentication using <strong>phone number, email, google, username<\/strong>, and many more. For this one, we are going to set up <strong>google authentication<\/strong>. Go to <strong>Build -&gt; Authentication<\/strong> from the left panel on the firebase project console and select <strong>google<\/strong> from the list of options and complete the setup.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-1024x565.png\" alt=\"\" class=\"wp-image-12192\" width=\"624\" height=\"344\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-1024x565.png 1024w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-300x166.png 300w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-768x424.png 768w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-1536x848.png 1536w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-11.41.12-AM-2048x1131.png 2048w\" sizes=\"auto, (max-width: 624px) 100vw, 624px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">5. Code Dive \ud83d\udc68\ud83c\udffd\u200d\ud83d\udcbb<\/h2>\n\n\n\n<p>Now that our configurations are done, let us jump into code without wasting any more time. Install these dependencies first.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">npm i firebase react-firebase-hooks<\/code><\/pre>\n\n\n\n<p>Under <strong>src\/config<\/strong> make a firebase configuration file to use and initialize the firebase project in our react JS application.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { initializeApp } from \"firebase\/app\";\n\nconst firebaseApp = initializeApp({\n  \/\/ your configurations will go here\n});\n<\/code><\/pre>\n\n\n\n<p>And in the same configuration file, we will put down configurations for firestore and authentication as well and export all three from there.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { getAuth } from \"firebase\/auth\";\nconst firebaseAuth = getAuth();<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { getFirestore } from \"firebase\/firestore\";\nconst firebaseFirestore = getFirestore(firebaseApp);<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">export { firebaseApp, firebaseFirestore, firebaseAuth };<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">6. Component Breakdown<\/h2>\n\n\n\n<p>Inside our <strong>App.js<\/strong> we will check if our user is logged in if they are we are going to render the <strong>chat room<\/strong> and if they are not we will render the <strong>Login<\/strong> button. We will be using <strong>useAuthState<\/strong> hook by <strong>react-firebase-<a href=\"https:\/\/upmostly.com\/tutorials\/react-hooks-simple-introduction\" data-type=\"URL\" data-id=\"https:\/\/upmostly.com\/tutorials\/react-hooks-simple-introduction\">hooks<\/a><\/strong> to check logged-in users. <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React from \"react\";\nimport \".\/App.css\";\nimport \"firebase\/firestore\";\nimport \"firebase\/auth\";\nimport \"firebase\/analytics\";\n\nimport { getAnalytics } from \"firebase\/analytics\";\nimport { useAuthState } from \"react-firebase-hooks\/auth\";\nimport ChatRoom from \".\/components\/shared\/ChatRoom\";\nimport { firebaseAuth } from \".\/config\/firebase\";\nimport Logout from \".\/components\/shared\/Logout\";\nimport Login from \".\/components\/shared\/Login\";\n\ngetAnalytics();\n\nfunction App() {\n  const [user] = useAuthState(firebaseAuth);\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;header&gt;\n        &lt;img\n          className=\"logo\"\n          src={\n            \"https:\/\/media-exp1.licdn.com\/dms\/image\/C4E0BAQH_rUv_B2D53g\/company-logo_200_200\/0\/1588445172804?e=1672876800&amp;v=beta&amp;t=IavOGphydKOcsodno1NAWhP76nVn6pGG3FytO8T2R8k\"\n          }\n        \/&gt;\n        {user ? &lt;h2&gt;{`Welcome ${user?.displayName}`}&lt;\/h2&gt; : &lt;&gt;&lt;\/&gt;}\n        &lt;Logout \/&gt;\n      &lt;\/header&gt;\n\n      &lt;section&gt;{user ? &lt;ChatRoom \/&gt; : &lt;Login \/&gt;}&lt;\/section&gt;\n    &lt;\/div&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<p>We see different components supporting <strong>App.js<\/strong>. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>&lt;Logout \/&gt;<\/li><li>&lt;Login \/&gt;<\/li><li>&lt;ChatRoom \/&gt;<\/li><li>&lt;ChatMessage \/&gt;<\/li><\/ul>\n\n\n\n<p>Our codebase has the following structure<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-5.48.57-PM.png\" alt=\"\" class=\"wp-image-12207\" width=\"261\" height=\"478\" srcset=\"https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-5.48.57-PM.png 532w, https:\/\/upmostly.com\/wp-content\/uploads\/Screenshot-2022-10-05-at-5.48.57-PM-164x300.png 164w\" sizes=\"auto, (max-width: 261px) 100vw, 261px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">7. ChatRoom Component<\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import React, { useRef, useState } from \"react\";\nimport {\n  collection,\n  getDocs,\n  addDoc,\n  orderBy,\n  limit,\n  query,\n  serverTimestamp,\n} from \"firebase\/firestore\";\nimport { firebaseAuth, firebaseFirestore } from \"..\/..\/..\/config\/firebase\";\nimport ChatMessage from \"..\/ChatMessage\";\n\nfunction ChatRoom() {\n  const divForAutoScroll = useRef();\n  const [messages, setMessages] = useState([]);\n  const [formValue, setFormValue] = useState(\"\");\n  const messagesRef = collection(firebaseFirestore, \"chat-messages\");\n  const q = query(messagesRef, orderBy(\"createdAt\"), limit(25));\n  getDocs(q).then((response) =&gt; {\n    setMessages(response.docs.map((doc) =&gt; doc.data()));\n  });\n\n  const sendMessage = async (e) =&gt; {\n    e.preventDefault();\n\n    const { uid, photoURL } = firebaseAuth.currentUser;\n\n    await addDoc(collection(firebaseFirestore, \"chat-messages\"), {\n      text: formValue,\n      createdAt: serverTimestamp(),\n      uid,\n      photoURL,\n    });\n\n    setFormValue(\"\");\n    divForAutoScroll.current.scrollIntoView({ behavior: \"smooth\" });\n  };\n\n  return (\n    &lt;&gt;\n      &lt;main&gt;\n        {messages &amp;&amp;\n          messages.map((msg) =&gt; (\n            &lt;ChatMessage key={msg.createdAt} message={msg} \/&gt;\n          ))}\n\n        &lt;span ref={divForAutoScroll}&gt;&lt;\/span&gt;\n      &lt;\/main&gt;\n\n      &lt;form onSubmit={sendMessage}&gt;\n        &lt;input\n          value={formValue}\n          onChange={(e) =&gt; setFormValue(e.target.value)}\n          placeholder=\"Write a message...\"\n        \/&gt;\n\n        &lt;button type=\"submit\" className=\"button-submit\" disabled={!formValue}&gt;\n          \u27a1\ufe0f\n        &lt;\/button&gt;\n      &lt;\/form&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default ChatRoom;\n<\/code><\/pre>\n\n\n\n<p>Inside our ChatRoom component, we have a form to write a new message, fetching messages from firestore using <strong>query<\/strong>, using <strong>addDoc<\/strong> to post new messages to the firestore collection, and div for auto scrolling whenever a new message is added. Isn&#8217;t that neat? \ud83e\udd29<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. ChatMessage Component<\/h2>\n\n\n\n<p>In our application <strong>chat room<\/strong> component is consuming the <strong>ChatMessage<\/strong> component so let&#8217;s go ahead and construct that as well.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { firebaseAuth } from \"..\/..\/..\/config\/firebase\";\n\nfunction ChatMessage(props) {\n  const { text, uid, photoURL } = props.message;\n  const messageClass =\n    uid === firebaseAuth.currentUser.uid ? \"sent\" : \"received\";\n\n  return (\n    &lt;&gt;\n      &lt;div className={`message ${messageClass}`}&gt;\n        &lt;img\n          src={\n            photoURL ||\n            \"https:\/\/media-exp1.licdn.com\/dms\/image\/C4D03AQGdjRH_8EOjAA\/profile-displayphoto-shrink_400_400\/0\/1641733341873?e=1670457600&amp;v=beta&amp;t=nWuW9BjwZxZ4g4jkl6B7cD4TkUd7kBr0JQwCU87dv5E\"\n          }\n        \/&gt;\n        &lt;p&gt;{text}&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default ChatMessage;<\/code><\/pre>\n\n\n\n<p>Our ChatMessage component is <strong>dumb<\/strong> or <strong>presentational only<\/strong> since it is just rendering the messages using the data provided by <strong>ChatRoom<\/strong>. The only check it has is whether the message is from the receiver end or the sender end.   <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">9. Login &amp; Logout<\/h2>\n\n\n\n<p>The <strong>Login<\/strong> and <strong>Logout<\/strong> component are pretty straight forward so I decided to join them under one section.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { GoogleAuthProvider, signInWithPopup } from \"firebase\/auth\";\nimport { firebaseAuth } from \"..\/..\/..\/config\/firebase\";\n\nfunction Login() {\n  const signInWithGoogle = () =&gt; {\n    const provider = new GoogleAuthProvider();\n    signInWithPopup(firebaseAuth, provider);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;button className=\"sign-in\" onClick={signInWithGoogle}&gt;\n        Login with Google \ud83d\udc40\ud83d\ude80\n      &lt;\/button&gt;\n    &lt;\/&gt;\n  );\n}\n\nexport default Login;<\/code><\/pre>\n\n\n\n<p>Inside Login, we are using <strong>GoogleAuthProvider<\/strong> to login into a new pop-up window with the help <strong>signInWithPopup<\/strong>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"jsx\" class=\"language-jsx\">import { firebaseAuth } from \"..\/..\/..\/config\/firebase\";\n\nfunction Logout() {\n  return (\n    firebaseAuth.currentUser &amp;&amp; (\n      &lt;button className=\"sign-out\" onClick={() =&gt; firebaseAuth.signOut()}&gt;\n        \ud83d\udc4b\ud83c\udffd\n      &lt;\/button&gt;\n    )\n  );\n}\n\nexport default Logout;<\/code><\/pre>\n\n\n\n<p>While in our logout component we are emptying our user inside the firebase authentication. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\">MOMENT OF TRUTH \ud83d\ude80\ud83d\udd25<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/ezgif.com-gif-maker-3-3.gif\" alt=\"\" class=\"wp-image-12222\" width=\"822\" height=\"475\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"347\" src=\"https:\/\/upmostly.com\/wp-content\/uploads\/ezgif.com-gif-maker-4-1.gif\" alt=\"\" class=\"wp-image-12225\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Wrap Up \ud83d\ude2e\u200d\ud83d\udca8<\/h2>\n\n\n\n<p>Did we just make a real-time chat application with under 300 lines of code and less than 20 minutes? \ud83d\ude05<br><strong>THAT&#8217;S ABSOLUTE FIRE \ud83d\udd25\ud83e\udd75<\/strong>. We used firebase and reactJS applications in combination to build a beautiful chat application. I know this guide was too long, let me know in the comments section if it was worth it. I will see you in the next one, <strong>Take Care.<\/strong>\ud83e\udd13<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Repository<\/h2>\n\n\n\n<p>Here&#8217;s a <a href=\"https:\/\/github.com\/upmostly\/react-chat-app\" data-type=\"URL\" data-id=\"https:\/\/github.com\/upmostly\/react-chat-app\" target=\"_blank\" rel=\"noopener\">link<\/a> to the repository so that you can have a look at the code easily. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we talk about real-time chat applications, we think of web sockets and how to handle receive and send messages through dedicated sockets and handle them efficiently. In this guide, we are going to learn how to make a real-time chat application using firebase and ReactJS. \ud83d\udd25 + \u269b\ufe0f Pre-requisites Javascript Development environment Programming concepts [&hellip;]<\/p>\n","protected":false},"author":141,"featured_media":12231,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[34,29,40,38,35],"class_list":["post-12144","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-advanced-react-tutorials","tag-javascript","tag-popular-tutorials","tag-react-components","tag-react-hooks"],"acf":[],"_links":{"self":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/12144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/comments?post=12144"}],"version-history":[{"count":5,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/12144\/revisions"}],"predecessor-version":[{"id":12330,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/posts\/12144\/revisions\/12330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media\/12231"}],"wp:attachment":[{"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/media?parent=12144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/categories?post=12144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/upmostly.com\/wp-json\/wp\/v2\/tags?post=12144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}