This is the second part of a two-part tutorial using Quix, a tool for developing and running event streaming applications. THE first part focused on updating the backend so that chat messages are checked for banned words. However, this change is not yet reflected in the frontend. In this second part, you will learn how to update a frontend service and connect it to new data coming from a new topic (the “messages_sanitized” topic that you created in the first part of the tutorial). Depending on the message broker you selected, this topic is stored in Redpanda Cloud or Quix Cloud (default). THE front-end updates required are the same in both cases.
After completing the tutorial, the interface should look like this:
For this task, it helps to know a little about SignalR, the technology that any frontend uses to interact with Quix. If you’ve never heard of it, here’s a quick overview.
Bringing real-time data to frontend applications
SignalR is a .NET library that allows real-time communication between the server and connected clients. It’s a bit like a A Swiss army knife for real-time interactions because it abstracts from the underlying real-time communication protocols. From a developer perspective, you don’t have to worry about whether WebSockets are supported on the client. SignalR will seamlessly revert to other supported protocols. This makes it perfect for user-to-user or group chat applications.
To use SignalR, you normally need to install a SignalR Hub in your backend and connect to it with a SignalR client. However, installing a Hub is not necessary in the Quix cloud. A SignalR Hub is already built into every project (aka workspace), so all you need to do is manage customer interactions. This chat app demo uses the SignalR TypeScript library to connect to the hub.
Setting up a bearer token for the frontend
Normally a frontend would run outside of Quix, since Quix is primarily a backend environment, so the frontend needs a bearer token to authenticate to Quix. To facilitate the replication of this project, we have included a frontend service in the project template. However, even though the front-end service is running in the Quix environment, it still needs a bearer token.
The frontend uses SignalR to communicate with Quix via a Websocket API to retrieve and return data from the backend. This API requires a bearer token specific to each environment.
For this tutorial, you will create a Quix Personal Access Token to use as a bearer token. You will then create a secret to store this token in your environment (yes, it’s a bit complicated, but you only have to do it once).
Obtain a personal access token
Here’s how to get a personal access token in Quix.
- Open your profile menu at the top right and select Personal Access Topics.
- In the dialog box that appears, click Generate a token and paste your personal access token into notepad or other temporary storage location – you will need it for the next step.
Adding required secrets
In the Quix portal, open the Applications page and click Sentiment Demo UI to open the Quix IDE.
- In the Variables (bottom left), click Secrets management.
- In the sidebar that appears, click + New secretand enter “bearerToken” as the secret key.
- In the “Default” and “Tutorial” columns, paste your personal access token that you created in the previous step as the value in each cell.
Adapting the frontend to read from the new topic
Before you start modifying the frontend code, you will need to add an environment variable that will be accessible via the frontend code to determine the additional topic to read (the “messages_sanitzed” topic that you created in the first part of this tutorial ).
Added a new environment variable for the Cleaned Messages topic
- In the Quix portal, open the Applications page, click Sentiment Demo UIand in the Variables section, click + Add.
- Select free text As the variable type, enter “messages_sanitized” for the variable name and value, then save your changes. (This allows you to later change which topic to use without having to update the code again).
Unlike other service types, the subject variable must be a free text variable.
Editing frontend source files
Now comes the main part of the task: updating the frontend code so that it accesses the new topic variable “messages_sanitized” and returns the censored messages rather than the original messages in the chat history.
We will be updating several source files that form the backbone of the frontend.
Again, open the frontend service source code in the Quix IDE.
- In the Quix portal, open the Applications page, click Sentiment Demo UI and inspect the Application files list.
To update the files, follow these five steps.
Step 1: Adding the new subject environment variable to the init script
First, you need to make the new variable accessible to the Angular application at runtime.
To do this, open the file ./run_server.sh at the base of the service’s file structure.
Add the following line after the other variables and validate the modification.
echo "${messages_sanitized}" > /usr/share/nginx/html/messages_sanitized_topic
The file run_server.sh, is a shell script that configures the chat application environment with sentiment analysis. It writes various environment variables, making their values available to the application at runtime.
- To confirm that the changes are correct, see this example of the final version of the file.
Step 2: Updating Quix Login Service
Next, modify the Quix service that manages connections with the SignalR Hub. (There are quite a few changes, so it’s easier if you just replace the code with a file we’ve already prepared for the tutorial.)
In the Quix IDE, open ./src/app/services/quix.service.ts and replace it with the code from the tutorial-code repository:
tutorial-code/chat-with-sentiment-exercise/Sentiment Demo UI/quix.service.ts
The file quix.service.ts is an Angular service that manages connections to Quix. It uses SignalR to establish two separate connections, one for reading data (ReaderHub) and one for writing data (WriterHub). The service manages connection setup, reconnection attempts, and subscription to data changes.
- Again, here is a file difference in GitHub to show you what’s changed.
Step 3: Update the chat room service
In the Quix IDE, open ./src/app/services/room.service.ts. This file contains code for another Angular service that manages chat rooms. It interacts with the Quix service to send and receive messages, as well as to subscribe to or unsubscribe from chat rooms.
Locate the following line:
Below, add an equivalent line for the new topic “messages_sanitized” like this:
Repeat the process for unsubscribeFromParameter block (directly after the subscribeToParameter block). The end result should look like this.
Step 4: Update Web Chat UI Component
In the Quix IDE, open ./src/app/components/web-chat/web-chat.component.ts. This is an Angular component that manages the functionality of a real-time chat interface. It manages user interactions such as sending messages, viewing received messages, and displaying input indicators.
Locate the following line:
Change the messagesTopic parameter to messagesSanitizedTopic the update line therefore looks like the following example:
Step 5: Redeploy the frontend service
Once you’ve committed the changes, re-mark your most recent revision so that it’s easier to determine which version of the code you want a deployment to use.
- Mark the commit by clicking the tag icon and give it a name, something like “read-censored-msgs”.
- Again, redeploy the service: open the deployment dropdown at the top right and select Modify the existing deployment, then click Redeploy. (Don’t forget to select the tag you just created).
Test your changes
To test that this works, you will need to open the chat room again and enter a sentence containing a banned word
- To open the user interface, click the blue launcher icon next to the service name “Project Front End” (on the Pipeline page).
The list of banned words contains some quieter words that I don’t hesitate to repeat here (like “viagra”), so if you don’t know what to write, type in “Mentioning viagra is prohibited in this chat room” . When the message appears in chat history, you should see a censored version, like this:
Did it work? I hope so. If you have any issues, be sure to ask a question in our Community Forum and one of us will take care of it.
-
- To see another full working demo, try our computer vision demowho uses the Model YOLO ML to detect vehicles in transit for London traffic camera feeds.
