Build a Chat Application Using Fluvio Node.js Client

This guide provides an example of using @fluvio/client to write a chat application using Node.js.

Prerequisites 

Before starting on this tutorial, you’ll need to have completed the following

  • Install Node.js (v12.11.0 or above);
  • Have the Fluvio CLI installed and have access to a Fluvio cluster. See our getting started guide;
  • Clone the fluvio-demo-apps-node repository;

Cloning the Repository 

git clone https://github.com/infinyon/fluvio-demo-apps-node.git

Once cloned, navigate to the chat-app directory by running the following command:

cd ./fluvio-demo-apps-node/chat-app

All commands will be run from the chat-app directory in this repository.

Application Overview 

This demo consists of a WebSocket proxy server relaying messages from a React client web application to the @fluvio/client, sending user and chat topic events to the Fluvio cluster.

register

@fluvio/client is currently not supported in the browser, therefore the WebSocket server is required to proxy the client events. An example of this proxy service can be viewed at ./chat-server/src/fluvio-lib/dataStream/index.ts.

Read the API docs for more information.

Building the Demo App 

From the chat-app directory, run npm run build. This will run the ./build.sh script, which will install the build dependencies and build the client and server applications.

Running the Demo App 


Run the Server 

Open a new terminal window, navigate to the chat-server directory and start the application:

cd chat-server && npm run start

On a freshly installed cluster with no prior events, you should see the following message if the server successfully started.

> chat-server@1.0.0 start /Users/ryantate/Projects/InfinyOn/fluvio-demo-apps-node/chat-app/chat-server
> npx ts-node ./src/chat-server.ts

requiring platform specific module
init users ...
Topic 'nsc-user-events' created
Topic 'nsc-chat-events' created
┌─────────┐
│ (index) │
├─────────┤
└─────────┘
Loaded (0) chat messages
...init done
Chat server is running at http://localhost:5050...

Run the Client 

Open a new terminal window, navigate to the chat-client directory and start the application:

cd chat-client && npm run start

If everything was installed and built successfully, you should see the following message when starting the application.

Visit the application at http://localhost:5051

Your network address will be different than the example shown below.

> chat-client@1.0.0 start /Users/ryantate/Projects/InfinyOn/fluvio-demo-apps-node/chat-app/chat-client
> npx serve ./dist -l 5051 -s

npx: installed 78 in 3.108s

   ┌──────────────────────────────────────────────────┐
   │                                                  │
   │   Serving!                                       │
   │                                                  │
   │   - Local:            http://localhost:5051      │
   │   - On Your Network:  http://192.168.0.24:5051   │
   │                                                  │
   │   Copied local address to clipboard!             │
   │                                                  │
   └──────────────────────────────────────────────────┘



Using the Application 

With the client and server applications running, you can now visit the client application and test the chap application.

Registering a Chat User 

When you visit the client application, you need to register a new user. Click the Register User button to create a new chat user.

Login

Once clicked, create a new username and password.

register

After the user has been created, enter the username and password details in the login form.

Login

Once logged in, you are now able to send a message in the chat room.

chat

Adding More Users 

To add more users to the application, open the application in another browser window or use chrome’s incognito mode. This will create a fresh local storage for testing the application.

Follow the same steps as above in the newly opened browser window, but this time change your username.

Once you have added more users to the chat window, you can test sending messages between the users by typing in each of the browser windows.

Conclusion 

Congratulations! You’ve completed the chat-app example and now have an example for using @fluvio/client in an application.

Read the API docs for more information on how to use @fluvio/client for your project.