Now, let’s create a function to append messages to the DOM. Add the below to the selectUserHandler function: Now, let’s call this function when we click on a user that we want to chat with. To set up a channel for a one-to-one chat, we only need to pass in the two users' IDs and not worry about the channel name.Īdd the below function to the public/custom.js file for initializing a channel: Now call this function in the initializeClient function so that we can fetch users as soon as we initialize the chat: In this function, when we click on a user, we style that user differently so that we can uniquely identify the current user from other users.įinally, let’s fetch and list users! Add the following function to the public/custom.js file:
ONE TO ONE PRIVATE CHAT CODE
Add the following code to public/custom.js: Next, let’s create the selectUserHandler function. In the above code, we added a click event to each user which calls the selectUserHandler function when a user is clicked. To start to fill things out, let’s create a function that takes in an array of users, and then populates them to the DOM by targeting the div with id of users: If you open the app, and input a username, then hit enter, you may find that the app is almost empty but promising!: Once the user hits enter, we call the initializeClient() function to initialize the client. Let’s fix that!Īdd the code below to the public/custom.js file, so we can listen to the input for when a user hits enter so we can display their message in the chat area: Currently, it does not do anything when you hit enter. When you load the app, the first page that shows up displays a form to input a username before proceeding. Add the function below to the public/custom.js file to do that: Add the code below to your public/custom.js file:īefore we can start using the client SDK, we must first set the current user. The first step for creating the client-side of the app is to initialize the Javascript SDK. Let's get our styling started by inserting the following into style.css: The three s at the end of this code allow us to connect into Stream, make HTTP requests (using Axios), and connect into the actions for the page, from our custom.js file. Creating the InterfaceĪdd the following code to your public/index.html file to create your chat interface: We just need to pass in the username to the URL via the query string - when we want to generate a token for a user. With the above code, we have created a new /token endpoint, to which we can make a request when generating a new token.
ONE TO ONE PRIVATE CHAT UPDATE
Make sure to update the and placeholders with the ones we grabbed above. Add the below piece of code for generating tokens in the server.js file: To be able to initialize the client, we need to get a valid token, which we can generate from our Node server. We’ll be using the JavaScript SDK on both the server, to generate our tokens, and the client end, to get real-time updates of what is happening on the chat, including real-time messages. You can now access the project on Generating and Utilizing Tokens Here, we have created a Node server that will be running on port 8800. To check if you have Node installed on your system, enter the command below in your terminal: You'll also want to make sure you have Node (version 8 or above) installed on your system. To follow along with this tutorial, you'll need to have a basic understanding You can also get the source code for this tutorial on GitHub.
In this tutorial, we'll walk through building a one-to-one user chat application using just the Stream Chat SDK and Vanilla JavaScript. To help make this task seem less daunting, let me introduce Stream Chat Stream Chat can help you implement a chat solution in your application in minutes! Adding this feature to existing applications, or even new ones, however, can seem like a giant, time-consuming undertaking. More and more applications are seeing the value in allowing users to communicate in real-time, either with one another or with their support team. Also have a look at our React Chat Tutorial when React is your technology of choice. You can still refer to the post below for its concepts and ideas, but our Angular Chat App Tutorial is where you should go to get started with ease. It allows you to build chat experiences with ease. Javascript developers can now use SDKs specfic to their tech stack, like our dedicated Angular Chat SDK. 💡 This blog post describes an outdated approach to using Javascript against our Chat platform.
0 kommentar(er)
