Introduction Recently, me and my friend built a location-based chatroom called — People can talk with each other nearby in a web app. We would like to share what we did and how to make it. Please feel free to give us feedback by replying this article. Near ( . https://near.idgo.me) Prerequisites Basic Knowledge of Geohash Basic knowledge of Firebase Basic knowledge of Vue.js component What We Want to Achieve? In this tutorial, we would try to make it so that you can see the effect quickly. So, the following steps we will be covered today. as simple as possible Get the user’s position via Geolocation API and convert the latitude and longitude into geohash Send a message to a room Display messages What is Geohash? Before talking about how to do it, we would like to briefly introduce what the geohash is. is a geocoding system which will be used to define a chatroom in this tutorial. Geohash For example, represents Tsim Sha Tsui in Hong Kong (Latitude and Longitude = 22.29818732, 114.16646970). Each geohash character represents an area of the world and more character means more specific to a place. You can use this to know how it works. wecnvgm2re3u tool In this application, geohash is an ideal mechanism to define a room ID based on user’s location and use the geohash precision (the length of geohash) to define the area coverage. Create a Vue Project In this article, we use to generate a Vue seed project. vue-cli Install vue-cli Root permission may be needed npm install -g vue-cli Initialize a vue project via vue-cli vue init webpack-simple my-project In this tutorial, we use template as a demo. For more detail about vue-cli, please see . webpack-simple here Install dependencies and run the project by the following commands cd my-projectnpm installnpm run dev Now, you can access your project on localhost:8080 After we created a Vue project and installed the dependencies, we can start to work on the Vue component ( ). If you are not familiar with Vue single file component, you can see the . my-project/src/App.vue official website Next, try to modify your script to become the following structure. Inside the component, add some data variables to store the chatroom information. — A Firebase reference object which represents the room room — A precision of the geohash (default is 6 in this tutorial) precision — A Firebase SDK to communicate with Firebase db Install Firebase and Geohash Encoder Apart from Vue.js, we need to communicate with Firebase and use package to encode the latitude and longitude to geohash (room ID). You can install the these two packages by the following command. Firebase SDK geohash converter npm install --save firebase latlon-geohash After installing these two packages, you can import them inside the script tag in . For the package, we will explain it later. App.vue Geohash import * as Firebase from 'firebase'import Geohash from 'latlon-geohash' export default{ // ....} Initialize Firebase When the Component Is Ready When Vue component is ready, the will be called. So, we can initialize a Firebase client object and assign it into a variable called — Remember to put your Firebase credential e.g. , and as parameters. We assume that you know how to set up a Firebase project and obtain the credential. If you have no idea how to set it up, go to . mounted hook db. apiKey, authDomain databaseURL projectId Firebase Get Started Guide Dependencies are Ready. It is time to Build. 1. Get the user’s position and convert the latitude and longitude into geohash In this step, we will create a method called — to access user’s location via and convert it into geohash so that we can define which room should they go. init() Geolocation API When the geolocation is obtained, we use the Geohash encoder imported before to convert the location into geohash. For example: Location: => 22.29818732, 114.16646970 wecnvg (geohash) Since we set the default precision is 6, encoder only returns 6 characters. When we get the geohash, we initialize a Firebase reference with the room ID (geohash) and assign the reference to the variable which can be reused later. room OK. The method is completed, but we still need to call it when the component is ready. So, call method inside the . Like the code below. Then, the component will try to access user’s location when the component is ready. init init mounted hook 2. Create an input element to send a message Create an input element inside tag in the component (App.vue). We use v-model to store the message and use to remove the leading space of the input. When user presses the enter in the input element. The method will be called. Remember to create a key inside the data part. template messageInput trim send(messageInput) messageInput Now, we are going to implement the method to handle the event from the input element. Inside this method, we simply create an temporary object with a key called — to store the message body. After that, call the to obtain a key and set the value on that key afterwards. send(messageInput) message push() Remember to clean the value when the message is sent. Otherwise, your input always be there. messageInput When you press the enter, probably get an error in your browser console. The image below is from Chrome console. Don’t worry. Since Firebase only allows authorized user to access by default, so you need to enable a permission for that. Follow the steps below to enable the permission: Go to Firebase console Select your project Select Database section You can see the JSON in section and see the default setting. Rules {"rules": {".read": "auth != null",".write": "auth != null"}} We want to see the effect quickly. We enable anyone can access Firebase by the following setting. (This approach is for demo only. Don’t do it in production). {"rules": {".read": true,".write": true}} After published the rules, you can try to send a message again. There is no error anymore. If you can access Firebase console, you can see the data from your input (Like the image below). Since geolocation is an async process (in step 1), the geolocation cannot be obtain immediately. So, it is good to add a flag to indicate the geolocation is ready. Otherwise, an error will be thrown when you send a message because the room ID (Geohash) is not ready. : Notes 3. Display messages We have already known how to send a message to Firebase. Now, we are going to create a listener to listen to an event from Firebase and display the messages when they comes. The code below shows how to create an event listener and activate the event listener after the room is selected. When a new message added into Firebase, an event will be triggered and run the callback method with a snapshot data. If you don’t know how Firebase works, good to read the tutorial . Inside the callback method, the snapshot of the data will be pushed into the variable. child_added here messages Next, we need to render the data in HTML level when the variable change. Add the code below to inside the template tag. message <div v-for="msg in messages">{{msg.message}}</div> Since the basic data structure of a message in Firebase in Step 2 is the following: {"message":"my message"} So, in the HTML level, we can access to display the data. When you send a message, a new message will show. msg.message Combine Together Final View Conclusion Finally, there are some important points in this tutorial: Make sure you have permission to access Firebase Since getting the geolocation is an async process, make sure you have obtained the geolocation before sending a message to Firebase. Create appropriate variable(s) in each section Activate the event listener to listen to new messages There is a completed application — https://near.idgo.me Feel free to give us feedback. No matter it is good or bad. In addition, we will prepare part 2 to make the chatroom more fun.

Build a Location-based Chatroom with Firebase and Vue.js

Too Long; Didn't Read

Companies Mentioned

@kittsang

RELATED STORIES