/samples-ui-chat

Sample Chat Application Web UI - for use with chat samples in other languages

Primary LanguageTypeScriptApache License 2.0Apache-2.0

Cloudstate Sample Chat Application

Table of Contents

1. Overview

This is a sample application showing an example of using Cloudstate to build a Chat application in Node.js. The application consists of three services:

  • A stateless service chat

  • A stateful Entity based service friends

  • A stateful CRDT based service presence

Cloudstate Sample - Chat Application

 

The UI is designed to model a chat room where multiple users can connect/disconnect and exchanging chat messages. You simulate the chat room activities in one single browser window. This makes it easy to see the real time interactions, server-side pushes etc, without needing to open many browser tabs. Each user is a separate iframe with a separate websocket connection. The screen below shows the possible actions to interact with the UI.

Chat Application - Navigation Guide

 

2. Code implementation

chat-ui

directory containing the code of the stateless service chat. This code is written in TypeScript, and run as a Node.js server.
deploy

directory containing the yaml files to deploy all the services composing the Chat application. The target cluster could be your own Kubernetes cluster or Lightbend Cloudstate

The code of the backend services Friends and Presence is separate from the UI code. This is intentional to demonstrate the polyglot aspect of Cloudstate services. They can seamlessly interact regardless of the programming language used to implement the service. Below are the available implementations. You can choose any combination for deployment. For example, Friends service in JavaScript and Presence service in Java.

2.1. JavaScript implementation

2.2. Java implementation

3. Prerequisites

3.1. Deployment Tools

3.2. Docker repository

You must package your services into docker images and publish these images in a Docker registry. At deployment time, the Kubernetes cluster will pull the images from this registry. You can get a free Docker registry at https://hub.docker.com/

3.3. Self-hosting or Managed hosting?

For the deployment, there are two possible choices. Below we highlight the main characteristics of each deployment approach. Details about prerequisites and infrastructure preparation would be discussed further in the Deployment section.

3.3.1. Managed hosting

This deployment approach doesn’t require any local infrastructure. Lightbend Cloudstate, which is a kind of "Cloudstate-as-a-Service", will take care of the hosting, configuration and maintenance of your services. The deployment prodedure is pretty minimal:

  • Open an account with Lightbend Cloudstate

  • Install the "Cloudstate CLI" tool csctl

And that’s it. Then you just use csctl to deploy the your services that you had published in your Docker registry.

3.3.2. Self-hosting

In case you prefer to host your own services, you need to provide a Kubernetes cluster. This cluster could be local or cloud-based and must fulfill the following requirements:

  • A Kubernetes cluster, with 1.13 as the minimum required version

  • An ingress controller with a Layer7 Load Balancer ability

  • A working knowledge of Kubernetes to be able to manage your cluster and to troubleshoot, should any issue specific to your Kubernetes cluster arise.

4. Build Docker images

Before beginning the deployment, each of the various microservices composing the Chat application must be packaged into their own docker image, and published to your Docker registry.

4.1. Building the Friends & Presence services

4.2. Chat-UI

You can user our hosted UI here https://static.cloudstate.com/js-chat/index.html

5. Deployment

We have built, tested and published 2 dockers images of the 2 services: Friends, Presence. Now we are ready to deploy the Chat application. There are two possible tracks for deploying your services: