This guide provides an example of using @fluvio/client to write a chat application using Node.js.
Before starting on this tutorial, you’ll need to have completed the following
git clone https://github.com/infinyon/fluvio-demo-apps-node.git
Once cloned, navigate to the chat-app directory by running the following command:
All commands will be run from the chat-app directory in this repository.
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.
@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.
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.
npm run build
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.
> firstname.lastname@example.org 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
Chat server is running at http://localhost:5050...
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.
> email@example.com 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! │
With the client and server applications running, you can now visit the client application and test the chap application.
When you visit the client application, you need to register a new user. Click the Register User button
to create a new chat user.
Once clicked, create a new username and password.
After the user has been created, enter the username and password details in the login form.
Once logged in, you are now able to send a message in the chat room.
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.
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.