Implement Chat for your Flow app

Users can now chat with each other, in real time, with the latest Collaboration Engine (CE) update. The current roster of CE features enables users to see each other, work together without experiencing save conflicts and with the latest additions, and engage in discussion. CE, including chat, is free to implement for your V20 Flow application. Chat will become available for V14 in a later release.

Don’t have a Vaadin Flow application? Start a new app at start.vaadin.com!

You can try the live chat demo here. Type your name, choose an avatar, and select any employee in the “Employees” view to see it in action.

What is Collaboration Engine?

Businesses often rely on multiple third-party tools, such as instant messaging services or external document editors, to enable real-time collaboration in remote or distributed workflows. Collaboration Engine provides everything necessary to build these features directly into custom business applications productively and affordably. This manifests as simpler workflows, superior UX and complete control over sensitive data.

Why use it?

Have you ever tried to implement a change in a form only to learn that someone else was editing it and your changes didn’t go live?

Business applications are often “multi-player” by default when several people work on the same view at the same time. This may result in save conflicts and difficulty in communicating changes and delegating responsibility, thereby consuming valuable time and requiring continuous effort to deal with.

This co-operation has become increasingly challenging with the global shift from office to remote work. 

Collaboration Engine aims to solve these potential problems by providing built-in features that help users work together seamlessly and without the need for external tools.

How can I implement it?

Collaboration Engine is easy to install: It comes with a free tier and is installable as a <dependency> in the pom.xml of your Vaadin Flow application. The collaborative features are enabled through extended Vaadin components, such as CollaborationBinder. 

Our handy quick start guide walks you through the installation process.

What is the new Chat feature?

The new Chat feature enables live discussion between users working on the same view. You can see who is present, talk to them, and keep track of the conversation history for comments on any recent changes. Messages are always timestamped and show user avatars. Compared to external message applications, conversations remain within the app and its ontext.

You can implement real-time chat to your Vaadin Flow application by using the CollaborationMessageList and CollaborationMessageInput components. They enhance the regular MessageList and MessageInput components by automatically synchronizing the messages for all users connected to the same topic. The example below shows how little code was required to add chat functionality to our example application:

package com.example.application.views.chat;

import com.vaadin.collaborationengine.CollaborationMessageInput;
import com.vaadin.collaborationengine.CollaborationMessageList;
import com.vaadin.collaborationengine.UserInfo;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;

public class Chat extends VerticalLayout {

    public Chat(String userName, String fullName, String userAvatar) {
        setSizeFull();
        String topic = "discuss-about-music";
        UserInfo userInfo = new UserInfo(userName, fullName, userAvatar);
        CollaborationMessageList messages = new CollaborationMessageList(
                userInfo, topic);
        CollaborationMessageInput input = new CollaborationMessageInput(
                messages);
        messages.setWidthFull();
        input.setWidthFull();
        add(messages, input);
        expand(messages);
    }
}

You can try the live chat demo here. View the technical documentation for details. 

The Chat component is currently only available for V20, but it will be ported to V14 in the future. View our 2021 roadmap for details.

Any questions about Collaboration Engine? Join our Discord server to ask questions about CE and other Vaadin products!