•almost 2 years ago
When building a chat application, your head tends to spin in terms of what functionality you need. When building in-house, this process can turn into a nightmare.Thankfully, there are companies out there such as Stream that provide chat as a service as an API.
This tutorial assumes the following:
- A basic understanding of Vue.js
- You should also have Node.js installed on your system (version 8.9 or above, preferably 12.x)
- You should have npm or yarn installed on your system
Creating a Stream Chat App
To start using Stream Chat, we need need to have an API key, which we can get by creating a Stream Chat app. If you don't have one already, create an account or login to your dashboard. Once you’re logged in, you can use the app that's automatically created for you. Or, if you prefer, go to the dashboard, hit the blue “Create App” button at the top right of the screen and give your app a name as shown below: Once the app is created, click on the app from the dashboard overview you will be provided with a few options within your dashboard. Click on Chat to go the Stream Chat dashboard.
Building a Simple API for Capturing Stream Tokens
While the tutorial will be more focused on Vue.js, we still need a simple API, which we’ll use for generating a Stream Chat token that will be used to authenticate users in the Vue app. So, let’s spin up a dead simple API.
Next, we need to install a couple of dependencies:
As you might have guessed from the list of dependencies we installed, we’ll be using Express for the API. We also installed the Stream Chat Node.js SDK, which we’ll use to generate the authentication tokens. Create an
index.js file and paste the following:
The API has just one endpoint, which accepts a users username. Using the Stream Chat Node.js SDK, we’ll generate a token from the username, and return a JSON object containing a user object and the generated token. Next, we’ll create a
.env file and add the snippet this snippet of code to it:
Note: Remember to update these details with your own details.
Finally, start the API with the following command:
Once the API is up and running on
http://localhost:3000, you’re all set to continue on.
Building the Vue App
With the API out of the way, let’s start building the Vue app. For this, we’ll be making use of the Vue CLI.
When prompted, press enter to select the default preset. Once the Vue app is created, let’s install the necessary dependencies that we’ll be using in the Vue app:
Note: Remember to update these details with your own details.
Start the app and leave it running while we continue to build (the UI will automatically update with changes):
Note that the app should be running on
http://localhost:8080 For quick prototyping the design of our application, we’ll be using a CSS framework called UIKit. Let’s pull it from a CDN. Add the line below to
head section of your
Updating the App component
Now, we can start building the Vue real-time chat app. To keep things simple and straightforward, we’ll be using a single component, which is App.vue. The component will be comprised of two sections: login and chats. Update App.vue as below:
hasJoinedChat will be updated accordingly once a user joins chat, and it determines what users see (login form vs. chats). We’ll get to the other data properties in subsequent sections.
Building the Login
For the login interface, replace the with the code below:T
his view contains a form for joining a chat. The form has just one field, which is for the username. Once the form is submitted, a
joinChat method will be called. So let’s create the method. Update the
script section of
App.vue as follows:
Here, we make a request to our API passing along the user’s username. We set
hasJoinedChat to true. Also, we set
token to their respective values gotten for our API. Lastly, we call two methods. The
initializeStream method creates a new instance of Stream Chat, using our API key. Then we specify the current user and pass along the user token. Here, we set only the
name fields for the user. Of course, you can add other fields as well.
Check the docs for other supported fields. The
initializeChannel method creates a new
messaging channel. Lastly, we fetch the channel’s messages and subscribe to the channel for future messages.
Building the Chat
Now that users can join a chat, let’s allow them to see previous chat messages as well as add and send new messages. Replace the with the code below:
This is comprised of two parts: chat messages and form to send a new message. For the list of messages, we loop through the messages array and display an individual message. We add a few tweaks to how the messages are displayed. If the user is the sender of a message, we align the message to the right, and on the flip side, we align the user to the left. To send a new message, the
sendMessage method is called once the form is submitted. To create the method, add the following code inside the
channel instance created earlier, we call a
sendMessage method on it, which accepts an object of the message content. In our case, we are only sending a text. For a full list of what can be sent as the message object, check out the docs on sending a message. Lastly, we clear the form field.
Listening for New Messages
As it stands, when we send a new message we don't see the message immediately, the same goes for the other person we're chatting with.This is because our app currently lacks real-time interactivity. That’s bad! Not to worry, Stream Chat has our back on this. So let’s fix it. Add the code below inside the
joinChat method immediately below where we call the
Stream Chat provides a handful of events which we can listen to and perform some actions accordingly. The one we are interested in our case it the
message.new event, which is triggered every time a new message is sent. So we listen for that event and update the
messages array with the new message, which is passed along with the event.
Testing the App
Now, let’s test what we’ve been building so far. Navigate to
http://localhost:8080 and open the app in two separate windows and login and start chatting.
Conclusion & Final Thoughts
In this tutorial, we learned how to build a real-time chat app with Vue, using functionality provided by Stream Chat. Considering that our application is as basic as it gets, we’ve barely scratched the surface of what’s possible with Stream Chat. In [this tutorial on how to build a chatroom with Laravel, Vue.js and Stream Chat](https://getstream.io/blog/building-a-chatroom-with-laravel-vue-js-and-stream-chat/ Stay tuned for future posts and tutorials on additional functionality), you can learn how to build a chatroom where users can join and chat with other users. Additionally, to learn more about Stream Chat, have a look here. You can find the complete code of the Vue App as well as the API on GitHub.