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 (v13 or above).
  • Have the Fluvio CLI installed and have access to a Fluvio cluster. See 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, chat, and session messages to the Fluvio cluster in real-time.

register

The node API reference guide is available here.

Running the Demo App 

In a terminal window, from chat-app directory, run the following command:

npm run build

This will run the ./build.sh script, which will install the build dependencies and build the client and server applications.

Run the Server 

In the terminal window, from chat-app directory, run the following command:

cd chat-server && npm run setup && npm run start

The script npm run setup will provision fluvio topics.

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 setup /fluvio-demo-apps-node/chat-app/chat-server
> sh ./setup.sh

topic "chat-app-users" created
topic "chat-app-messages" created
topic "chat-app-sessions" created

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

requiring platform specific module
Users
┌─────────┐
│ (index) │
├─────────┤
└─────────┘
ChatMessages
┌──────────┬────────┐
│ (index)  │ Values │
├──────────┼────────┤
│ messages │   0    │
└──────────┴────────┘
----
Chat server is running at http://localhost:5050...

Run the Client 

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

cd chat-client && npm run start:dev

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

...
Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html] 989 bytes {HtmlWebpackPlugin_0} [built]
ℹ 「wdm」: Compiled successfully.

Open the web browser at http://localhost:5051/ and we are ready to use the App.

Using the Application 

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

Registering a Chat User 

When you visit the client application, you need to register a new user. Click the Register button to create a new chat user. In a full application, you’d also have a password but this is just a tutorial.

register

After the user has been created, enter the username in the Login dialog.

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.

Fluvio Data Streaming 

Fluvio stores messages/events in three different topics:

  • chat-app-users
  • chat-app-sessions
  • chat-app-messages

While Chat app uses these events for persistence, they are also available for other purpose. For example if another service is interested in user logins, the service can hook-up a consumer and receive login events in real-time.

User Events 

User events are generated by registration, login, and logout:

  • AddUser - generated by registration.
  • AddToken - generated by login.
  • RemoveToken - generated by logout.
  • RemoveUser - generated by unregistration.

When a user registers, the server assigns him a color code; when he logs-in, the server sends an authorization tokens.

User messages can be viewed in Fluvio:

fluvio consume chat-app-users -B

Returns all messages in the users topic:

{"kind":"AddUser","content":{"user":"alice","colorCode":"lime"}}
{"kind":"AddToken","content":{"user":"alice","token":"7b0164dbde7c92a0d9d9cf9eafe7e4a63ce0bb3c"}}
{"kind":"AddUser","content":{"user":"bob","colorCode":"purple"}}
{"kind":"AddToken","content":{"user":"bob","token":"0737d893bc368fb8e02a88bd1479287b75dc7082"}}
{"kind":"RemoveToken","content":{"user":"jack","token":"03d492c63e44c3c61829dffb89e19cf5b34432df"}}

Session Events 

Chat App supports multiple sessions for the same user. For instance the user may login at the same time from a web server and a mobile device. User sessions capture the beginning of the session and the online/offline state.

A user is marked online when it is connected on at least one device and offline when it is disconnected from all devices.

Session messages can be viewed in Fluvio:

 fluvio consume chat-app-sessions -B

Returns all messages in the sessions topic:

{"kind":"Started","content":{"user":"alice","sid":"c41e59f83f713fdcf25affabf458a594"}}
{"kind":"UserOnline","content":{"user":"alice"}}
{"kind":"Started","content":{"user":"bob","sid":"6a9a7ec4831e8291f78aec8c6e2b738c"}}
{"kind":"UserOnline","content":{"user":"bob"}}
{"kind":"Started","content":{"user":"charlie","sid":"5d4973b4bf39e182020174daecca1459"}}
{"kind":"UserOnline","content":{"user":"charlie"}}

Chat Messages 

Chat messages store all user messages published by all users.

fluvio consume chat-app-messages -B

Returns all messages in the messages topic:

{"sid":"5d4973b4bf39e182020174daecca1459","message":{"user":"charlie","message":"Hey guys","timestamp":"2021-01-01T11:04:16.792"}}
{"sid":"c41e59f83f713fdcf25affabf458a594","message":{"user":"alice","message":"What's going on charlie?","timestamp":"2021-01-01T11:04:40.161"}}
{"sid":"c41e59f83f713fdcf25affabf458a594","message":{"user":"charlie","message":"Not much. Just pretty excited about using fluvio!","timestamp":"2021-01-01T11:05:15.755"}}

Each messages has a user name, a messages and the timestamp.

Conclusion 

Fluvio data streaming platform can turn simple prototypes into powerful event drive applications. In this example, we used Fluvio for persistence and inter service communication. When services communicate with each other in real-time, it opens the door for a new class of services beyond the capability of any database.

For additional information, checkout the following related articles: