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

---
title: How to Build a Simple Chat App with Solace (Part 1)
published: true
tags: solace,chat
canonical_url: https://solace.com/blog/build-chat-app-solace-1/
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 this tutorial, you will learn how to build a simple chat browser application. At the end of the tutorial, the application will be able to send and receive messages via a direct topic subscription. Specifically, you will learn how to build the application, connect it to Solace PubSub+ Cloud, and start publishing/receiving messages.

#### Prerequisites

- [Download Git](https://git-scm.com/downloads) to your computer
- [Install Apache Maven](https://maven.apache.org/install.html%20)
- [Sign up with Solace PubSub+ Cloud](https://console.solace.cloud/login)

#### Level

- Beginner

## Build the Application

1. On the [Solace Training page](https://github.com/SolaceTraining/fundamentals-of-solace-dev/tree/developer-exercise-1), select master from the Branch drop-down menu, open the Clone or download tab, and copy the URL.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_01.png)
2. In your command line, type the following code line to clone a repository to your computer.  
`git clone https://github.com/SolaceTraining/fundamentals-of-solace-dev.git`
3. In your code editor, check out the developer-exercise-1 branch or in your command line, enter `git checkout remotes/origin/developer-exercise-1`
4. Under src \> main \> resources, duplicate the file application-template.properties and rename it to application.properties.  
 ![Build the Application](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_02.png)
5. Download the Solace JavaScript messaging API.  
 ![Build the Application](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_03.jpg)
6. Copy the lib directory of your downloaded JavaScript API to the static directory of your cloned repository under src \> main \> resources.  
 ![Build the Application](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_04.png)
7. [Download Maven](https://maven.apache.org/download.cgi) if you have not already done so.
8. In your command line, enter `mvn clean install` to compile the application.
9. Type `mvn spring-boot:run` to run the Web server. Make sure you are in the \web-app-server directory.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_05-1024x347.png)

## Connect to the PubSub+ Cloud Service

You have created your application. However, it needs to connect to the PubSub+ Cloud service for it to work.

1. Under static \> resources, duplicate the application-properties-template.js file and rename it to application-properties.js.  
 ![Connect to the PubSub+ Cloud Service 1](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_06.png)
2. [Log in to Solace PubSub+ Cloud](https://console.solace.cloud/login).
3. Click the **Create Service** button to create a service.
4. Click the **Connect** tab.  
 ![Connect to the PubSub+ Cloud Service](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_07.png)
5. Open the Solace Web Messaging section.  
 ![Connect to the PubSub+ Cloud Service](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_08-1024x402.png)
6. Copy the connection details to the application-properties.js file, add ‘solace/chat’ as the Publish and Subscribe topics, and save the file.  
 ![Connect to the PubSub+ Cloud Service](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_09.png)  
_Note: Since we need the secure WebSocket connection, make sure that you use Secured Web Messaging Host as the sBROKERURL, not Web Messaging Host._
7. Type `mvn spring-boot:run` to run the application. ![Connect to the PubSub+ Cloud Service](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_10.png)
8. In your Web browser, type `localhost:8081` to view the application.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_11.png)  
You should see a message that says you are connected to your PubSub+ Cloud service.

## Publish and Receive Messages

Though the application is connected to your PubSub+ Cloud service, it cannot yet publish and subscribe. In this section, you will modify the sample code to publish the messages to the Solace broker so that people who connect to it can receive them.

1. Under the script directory, open the pubsubplusbroker.js file.  
 ![open the pubsubplusbroker.js file](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_12.png)
2. Type the code lines as shown below to create the message, define the topic destination, and set the delivery mode and the message body.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_13.png)  
[Learn about message delivery modes.](https://docs.solace.com/Messaging-Basics/Core-Concepts-Message-Delivery-Modes.htm)  
[Learn about topics and topic support.](https://docs.solace.com/Messaging-Basics/Topic-Support-and-Syntax.htm)  
[Learn what each of the above code lines does.](https://docs.solace.com/API-Developer-Online-Ref-Documentation/js/solace.Message.html)
3. Type the code line shown below to call the broker session and send the message.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_14.png)
4. Uncomment the oResultCallback and console.debug command lines so that you can see if the message is actually published.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_15.png)
5. Run the application.
6. Log in to your Solace PubSub+ Cloud and click the **Try Me!** tab.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_16.png)
7. In the Subscriber section, click the **Connect** button, add the topic “solace/chat”, and click the **Subscribe** button.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_17.png)
8. In your Web browser, type localhost:8081 or refresh the browser if you are already there.
9. In the application, type “Hello World” and click the arrow.  
You should see that the subscriber has received the message.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_18.png)
10. In the establishing the subscription section of the pubsubplusbroker.js file, type the following code lines to create a topic, generate an event, pass in a correlation key for the event, and define the number of milliseconds it will wait before stopping to add the subscription to the connection.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_19.png)
11. Run the application.
12. In the application in the browser, type a message and send it out.
13. Open another browser at localhost:8081.  
You should see that the message has been received.  
 ![](https://solace.com/wp-content/uploads/2019/07/chat-app-pic_20.png)

## Congratulations!

You have just created a chat application with Solace and sent and received messages via it. In the next part (coming soon), you will learn how to modify the sample code so that the application consumes messages from a queue instead of via a direct topic subscription.

To learn more about coding for Solace PubSub+, check out the 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 1)](https://solace.com/blog/build-chat-app-solace-1/) appeared first on [Solace](https://solace.com).