![]() ![]() Start a new chat and select the down arrow Type the names of the people you’d like to add in the To field. Select the down arrow to the far right of the To field and then type a name for the chat in the Group name field. Select New chat at the top of your chat list. Start and name a group chatĬreate a group chat the same way you start a one-on-one chat. Compose your message just as you would in a regular one-on-one chat. If you unpin the chat and want to find it again, select New chat and enter your name into the To field. Use this space for drafts, to send messages and files to yourself, or to get to know chat features a little better. ![]() You’ll see your name pinned to the top of your chat list by default. Open it by choosing their picture in a channel or by using search. You can also start a one-on-one chat from someone's profile card. When you're ready, select Send or press Enter to start the chat. To open formatting options, select Format beneath the box where you type your message. Once you've selected New chat and entered a person’s name, compose your message in the box at the bottom of the chat. env.local in your project's root directory.You start one-on-one and group chats the same way: by selecting New chat at the top of your chat list. Instead of embedding those keys directly into our code, let’s store them as environment variables so we can easily use different ones for different modes (like development, test, and production). Then go to the "API Keys" tab from the left sidebar. You can get the App Id from the dashboard below the name of the app you've just created.Īnd for the API Key, click on "Explore" in the app box. V2 will be out of beta soon at which point we will update this tutorial.įor this tutorial, we need to know two pieces of information from CometChat: the App ID and the API Key. To follow this tutorial or run the example source code you'll need to create a V1 application. In our example let's name it "one-on-one chat app". Just enter the app name in the "Add New App" box, and hit the "+" button. You can do that easily from the dashboard. You can create it from /#/register.įor each app you build, you have to create a new app in CometChat. To do that, we first have to create a new pro account in CometChat. Now we're ready to start integrating CometChat into our app. Here's what you should see in your browser now: Now let's add the JS and CSS code for this component: We can know that the message is being sent from the sendingMessage data property, which we'll create next. And as the message is being sent, we should disable the text input and show a loading indicator. If the user pressed the Enter key, we should send the message by calling the sendMessage method. We're keeping track of the currently entered text message inside messageText data property. But since we're at it, let's create src/components/ChatMessage.vue.īelow the messages section, we have the messages input area. We're displaying the messages in another component called ChatMessages, which we didn't create yet. Has messages state: in this state, we display any existing messages between the logged-in user and the selected contact. Loading messages state: when fetching previous messages between participants, we should show a loading view that tells users about that.Įmpty state: when messages are fetched but nothing was returned from the server, then we should display a message that tells the user that there are no messages between you the active contact yet. The main area of the chat can have one of the following three states: If you don't have it installed on your machine yet, install it via npm like this: Let's create a new Vue project using Vue CLI. It's a good idea to run the demo before diving in to make sure you have the full picture of what we're going to build here. The instructions on how to run it are included there. You can get the tutorial's source code from GitHub. After you finish this tutorial, you should have something like this: In this tutorial, I'll teach you how to build your own one-on-one chat app in Vue from scratch. CometChat doesn't only solve these issues, it also provides us with more cool features like chat groups, user roles, and friends list. But luckily for us, CometChat comes to save us the headache. These are just a few challenges that you can face when implementing your own chat system. Not only that, but also you need to make sure your connections are reliable so your app doesn't miss a message sent between users. It requires you to learn some realtime technology (like socket.io) and how to manage connections between participants. Building a chat app for the browser is not a very straightforward task.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |