How to Build a Simple Chat App with Solace (Part 2)
Tags: solace, chat
Published: 2019-09-12 19:36:53

---
title: How to Build a Simple Chat App with Solace (Part 2)
published: true
tags: solace,chat
canonical_url: https://solace.com/blog/build-chat-app-solace-2/
series: "How to Build a Simple Chat App with Solace"
---

 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-blog-featured-image.jpg) 

In an earlier blog post, I explained [how to build a simple chat browser application](https://dev.to/hq190204/how-to-build-a-simple-chat-app-with-solace-part-1-4hg1-temp-slug-6948697) that consumes messages via a direct topic subscription. In this follow-up to that tutorial, I’ll explain how to modify the sample code to get that application consuming messages from a queue.

Specifically, you will create a queue, add a subscription to the queue and create the queue consumer.

**Prerequisites:**

- [Download Git](https://git-scm.com/downloads) to your computer
- [Install Apache Maven](https://maven.apache.org/install.html)
- [Sign up](https://console.solace.cloud/login) with Solace PubSub+ Cloud
- [Understand Solace topics and queues](https://www.udemy.com/fundamentals-of-solace-administration/)

**Level:** Beginner

## **Create a Queue**

1. In your code editor, check out the developer-exercise-2 branch or in your command line, enter `git checkout remotes/origin/developer-exercise-2 -f`
2. Open the scripts directory under src \> main \> resources \> static.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_01.png)
3. Open the pubsubplusbroker.js file, comment out the direct topic subscription that was added in Part 1 and save the file.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_02.png)
4. [Log in](https://console.solace.cloud/login) to Solace PubSub+ Cloud, open your service, and click **Manage Service**.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_03-1024x161.png)
5. Click the **Queues** tab on the left.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_04.png)
6. Click the **+**  **Create** button to create a queue.
7. In the **Create Queue** dialog box, give the queue a name and click the **Create** button.  
 **![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_05.png)**  
8. Click **Apply** to use the default settings.

## **Add a Subscription to the Queue**

1. Click on the queue you just created and click the **Subscriptions** tab.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_06.png)
2. Click the **+ Subscription** button to open the **Create Subscription** dialog box.
3. In the **Create Subscription** dialog box, add the topic subscription, press **Enter** , and click **Create**.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_07.png)
4. In your code editor, type **mvn spring-boot:run** to run the application. Make sure you are in the web-app-server directory.
5. In your Web browser, type localhost:8081 to open the application if it is not already open.
6. Send a few messages in the application.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_08-1024x433.png)
7. In the queue you created at Step 3, click **Summary** to see the queued messages.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_09.png)

## **Create the Queue Consumer**

Now that the messages are in the queue, you need to create the consumer that consumes the messages in the queue. To create the consumer, follow the steps below:

1. Open the application-properties.js file under static \> resources and add ‘SOLACE\_CHAT’ to sReceiveQueue.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_10.png)
2. Open the pubsubplusbroker.js file, specify the queue descriptor, including the name and type of the queue, and set the acknowledge mode.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_11.png)
3. Add the following code to connect the message consumer.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_12.png)
4. In your code editor, type **mvn spring-boot:run** to run the application.
5. Refresh the chat application in your browser.  
You should be able to see the received messages from the broker.
6. In the queue that you created earlier, click **Summary** and then **Refresh Data** in the bottom right corner. You should see that the messages are no longer in the queue because of auto acknowledgement.  
 ![](https://solace.com/wp-content/uploads/2019/08/chat-app-blog-post-part-2_13-1024x586.png)

Congratulations! You have just created a queue, added a subscription to the queue, and created the queue consumer. In Part 3 of the series (coming soon), you will learn how to send a REST POST request from a login page to a dummy authentication service.

### **Related Resources**

- [How to Build a Simple Chat Application with Solace (Part 1)](https://dev.to/hq190204/how-to-build-a-simple-chat-app-with-solace-part-1-4hg1-temp-slug-6948697)
- Udemy Course: [Fundamentals of Solace Development](https://www.udemy.com/fundamentals-of-solace-development/)

 

The post [How to Build a Simple Chat App with Solace (Part 2)](https://solace.com/blog/build-chat-app-solace-2/) appeared first on [Solace](https://solace.com).