Chat app built with Vaadin 20.

readme.md

Add the @Push annotation to your Application.java to enable the server to push other user's actions to the browsers instantly

ChatView.java

package com.example.application.views.chat;

import com.example.application.views.main.MainView;

import com.vaadin.collaborationengine.CollaborationAvatarGroup;
import com.vaadin.collaborationengine.CollaborationMessageInput;
import com.vaadin.collaborationengine.CollaborationMessageList;
import com.vaadin.collaborationengine.UserInfo;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.PageTitle;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.router.RouteAlias;

@CssImport("./views/chat/chat-view.css")
@Route(value = "chat", layout = MainView.class)
@RouteAlias(value = "", layout = MainView.class)
@PageTitle("Chat")
public class ChatView extends HorizontalLayout {

    private UserInfo userInfo;

    public ChatView() {
        addClassName("chat-view");
        Component enterLayout = createEnterLayout();
        add(enterLayout);
        setSizeFull();
    }

    public Component createEnterLayout() {
        VerticalLayout enterLayout = new VerticalLayout();
        TextField name = new TextField("Your name");
        Button sayHello = new Button("Enter chat");
        sayHello.addClickListener(e -> {
            String userFullName = name.getValue();
            String userName = userFullName.replaceAll("\\s+", "").toLowerCase();
            userInfo = new UserInfo(userName, userFullName);
            Component chatLayout = createChatLayout();

            ChatView.this.replace(enterLayout, chatLayout);
        });
        enterLayout.add(name, sayHello);
        return enterLayout;
    }

    public Component createChatLayout() {
        VerticalLayout layout = new VerticalLayout();
        CollaborationAvatarGroup avatars = new CollaborationAvatarGroup(
                userInfo, "chat");

        CollaborationMessageList list = new CollaborationMessageList(userInfo,
                "chat");
        CollaborationMessageInput input = new CollaborationMessageInput(
                userInfo, "chat");

        list.setSizeFull();
        input.setWidthFull();
        layout.add(avatars, list, input);
        layout.expand(list);
        layout.setSizeFull();
        return layout;
    }

}