This is part two of a two-part tutorial using Quix, a tool to develop and run event-streaming applications. The first part focused on updating the backend so chat messages are vetted for banned words. However, this change is not yet reflected in the frontend. In this second part, you’ll learn how to update a frontend service and connect it to new data coming from a new topic (the “messages_sanitized” topic you created in the first part of the tutorial). Depending on which message broker you selected, that topic is stored in Redpanda Cloud or in Quix Cloud (the default). The required frontend updates are the same in both cases.After you finish the tutorial, the frontend should look like this:For this task, it helps to know a bit about SignalR, the technology that any frontend uses to interact with Quix. If you’ve never heard of it, here’s a brief rundown.SignalR is an .NET library that enables real-time communication between server and connected clients. It’s kind of like a Swiss Army knife for real-time interactions because it abstracts away the underlying real-time communication protocols. From a developer’s perspective, you don’t have to worry about whether WebSockets are supported on the client. SignalR will fall back to other supported protocols transparently. 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 isn’t necessary in Quix cloud. A SignalR Hub is already integrated into every project (aka workspace), so you just need to handle the client interactions. This chat app demo uses the SignalR TypeScript library to connect to the hub.Normally, a frontend would be running outside of Quix, since Quix is primarily a backend environment, so the frontend needs a bearer token to authenticate with Quix. To make this project easier to replicate, we’ve included a frontend service in the project template. However, even though the frontend service is running within the Quix environment, it still needs a bearer token.The frontend uses SignalR to communicate with Quix via a Websocket API to retrieve and render data from the backend. This API requires a bearer token that is specific to each environment.For this tutorial, you’ll create a Quix personal access token to use as your bearer token. You’ll then create a secret to store this token in your environment (yes, this is a bit convoluted, but you only have to do it once).Here’s how you get a personal access token in Quix.In the Quix portal, open the Applications page and click Sentiment Demo UI to open the Quix IDE.Before you start changing the frontend code, you’ll need to add an environment variable that will be accessed via the frontend code to determine the extra topic to read from (the “messages_sanitzed” topic you created in the first part of this tutorial).Unlike other service types, the topic variable needs to be a free text variable.Now comes the main part of the task — updating the frontend end code so that it access the new “messages_sanitized” topic variable and renders the censored messages rather than the original messages in the chat historyWe’re going to update several source files that form the backbone of the frontend.Again, open the source code for the frontend service in the Quix IDE.To update the files, follow these five steps.Firstly you need to make the new variable accessible to the Angular application at runtime.To do so, open the file ./run_server.sh at the base of the service’s file structure.Add the following line after the other variables and commit the change.echo "${messages_sanitized}" > /usr/share/nginx/html/messages_sanitized_topicThe file run_server.sh, is a shell script that sets up the environment for the chat application with sentiment analysis. It writes various environment variables, making their values available to the application at runtime.Next, edit 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 that we have 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 repo:tutorial-code/chat-with-sentiment-exercise/Sentiment Demo UI/quix.service.tsThe 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 handles connection setup, reconnection attempts and subscription to data changes.In the Quix IDE, open ./src/app/services/room.service.ts. This file contains the code for another Angular service that manages the chat rooms. It interacts with the Quix service to send and receive messages, and to subscribe or unsubscribe from chat rooms.Locate the following line:Underneath it, add an equivalent line for the new “messages_sanitized” topic like so:Repeat the process for the unsubscribeFromParameter block (directly after the subscribeToParameter block). The final result should look like this.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 handles user interactions such as sending messages, displaying received messages and showing typing indicators.Locate the following line:Change the messagesTopic parameter to messagesSanitizedTopic so the update line resembles the following example:Once you’ve committed the changes, again tag your most recent revision so that it’s easier to tell what version of the code you want a deployment to use.To test that it works, you’ll need to open the chat room again and type a sentence that contains a banned wordThe banned words list contains a few tamer words that I don’t mind repeating here (such as “viagra”), so if you’re stuck for something to write, enter “It is forbidden to mention viagra in this chat room.” When the message comes through in the chat history, you should see a censored version, like this:Did it work? I hope so. If you had any issues, be sure to post a question in our community forum and one of us will get right on it.Community created roadmaps, articles, resources and journeys fordevelopers to help you choose your path and grow in your career.