As wolkenkit is a backend framework, you are completely free to create whatever client you want to, as long as it is able to do HTTP requests.

For JavaScript, there is a client SDK that internally uses this HTTP API, but adds a convenience layer that simplifies talking to your backend dramatically. You can use it inside the browser as well as on the server.

Now open the src/index.js file. As you can see, the wolkenkit SDK is already being loaded by the following line:

const wolkenkit = require('wolkenkit-client');

Additionally, the file contains a ready-made view object which takes care of handling the UI. It provides a render function to update the UI as well as access to the list of messages (messages), the input field for new messages (newMessage), and the send message form (sendMessageForm).

Finally, it contains a run function which is the main entry point of your client. Inside of that function you will find a comment where to put your code:

Now, start your wolkenkit backend by running the following command from inside the chat directory, and wait until a success message is shown:

$ wolkenkit start

wolkenkit only takes care of the server part of your application and does not automatically run the client for you. To do so, run the following command from inside the client directory. This will also launch a browser and open the client:

$ npm run serve

Have a look at the browser's development console to verify that you actually see the success message:

To send a message, you must add an event handler to the submit event of the client's send message form. Inside of this handler, you can then run the send command of the message aggregate, that you can access using the communication context of the chat application:

To get notified when something goes wrong, add the failed callback to the command. Also, it might be useful to reset and focus the text box, once the command has been delivered to the server. For that, add the delivered callback to the command:

Although you are now able to send messages, your client will not receive any of them. To make things work, you need to read and observe the messages list and update the UI accordingly. For that, use the started and the updated callbacks. As before, you will also want to make sure that you get notified in case of errors:

In a chat it makes sense to have the newest messages at the top of the client, so we will order the messages reversed by their timestamp. Also, you probably do not want to receive all messages that have ever been written, so let's limit their number to 50:

What is still missing is the ability to like messages. As the client already provides buttons for this, we are going to handle their click events. For performance reasons this is done once for the list, not for each button individually. Of course, then you need to get the id of the message whose button was clicked.