•about 1 year ago
Let's create a functional chat interface right in the terminal with Node.js! Although building a chat app is no small task, with the help of Stream's fully featured Chat API, it'll only take a few lines of code, as you'll see.
Here's a demo of what the final application will look like:
Signing Up for Stream
To start creating our project, let's get our free Stream Chat API keys. You can do so by signing up here, and creating a new application, once logged in. Take note of the application keys, as we'll be making use of them shortly:
Creating an Authentication Server
Before a user can join a chatroom, they need to be authenticated using a login system. After doing so, a token is returned to the client. Create a new directory for this project,
cd into it, and initialize your Node project with a
Next, install the dependencies we'll be needing to build the server:
Now that we've installed the necessary packages, let's set up our environment with the variables retrieved from the Stream dashboard. Create a
.env file in the root of your project and set it up as follows:
dotenv package takes care of making the variables specified in this file accessible in our code, via the
Next, create a new
server.js file in the project root, and paste in the following code:
As mentioned earlier, we're not doing any real authentication here, so the token is generated straightaway, once a request is made to the
/join route. The
username of the user is all we need to generate a
token, and this
token is valid indefinitely, by default.
You can set an expiration to tokens by passing it as the second parameter.
token is used to create or update the
user on the Stream instance, and they are subsequently added to a general channel of the team type. This team type is meant for group conversations à la Slack. You can learn about other channel types here.
At this point, you can start the server by running
node server.js which should make it available on port 5500.
Creating the Client
Now that the server is up and running, let's set up a simple chat client that will enable us to send messages back and forth, right in the terminal!
We need to add a few other packages for this step:
1yarn add axios prompt ora util neo-blessed
Next, create a new
app.js file and populate it with the following code:
When the above code is executed, the user's
username is requested via the
prompt package. This
username is then sent to the server, which should be running by now, so that a
token is retrieved, which is then used to specify the current
user and connect to the General channel that was set up earlier.
At this point, we know that the user is authenticated and subscribed to the General channel. But how do we send and receive messages in the channel? That's where a Terminal User Interface comes in!
Creating a Terminal UI Using Blessed
Blessed is a terminal interface library for Node.js. At the time of writing, the original package has not been updated in over three years, so we'll make use of this fork, which seems to be the most active one at the moment.
Update your code in
app.js as shown below:
The relevant changes are between lines 57 and 128. We're using the
blessed package to assemble a typical chat interface with a text input at the bottom, and the list of messages just above the input. The blessed documentation goes into detail on each of the widgets available to you and their configuration options.
Between lines 99 and 111, we're able to retrieve the text entered in the input once the user presses the Enter key, and send this text as a new message to the channel using the
sendMessage method, which is documented here. Once the message is sent, the text input is cleared to allow the user to compose a new message.
On line 124, we're listening for new messages using an event on the channel so that they can be displayed in the message list. Each time this
event is triggered, we append the text to the
items array on
messageList via the
addItem method, which has the effect of printing the message on the screen.
If you enter
node app.js in your terminal, a username will be requested, and once authenticated, a UI will pop up from which you can send and receive messages. You can open up multiple terminal instances and chat in between them, as shown below:
In this tutorial, we created a terminal chat app in Node.js, and used the Stream Chat API to send and receive messages through a Blessed terminal interface. This is only an example of what is possible with Stream. If you want to take this further, make sure to check the Stream docs to find out all the features that are available to you.
The complete source code used in this tutorial can be found in this GitHub repository. Thanks for reading and happy coding!