Deep Dive: WebSocket Communication in Oorian

WebSocket provides full-duplex communication between browser and server. It's Oorian's most powerful communication mode, ideal for applications that need instant, bidirectional updates. This article explores WebSocket in depth.

When to Use WebSocket

WebSocket is the right choice when:

• Both client and server send frequent messages
• Latency is critical (chat, gaming, trading)
• You need true real-time collaboration
• Server and client updates happen independently

Setting Up a WebSocket Page

@Page(value = "/chat", communication = Communication.WEBSOCKET)
public class ChatPage extends HtmlPage
{
    private Div messageArea;
    private TextInput messageInput;
    private static List<ChatPage> activeUsers = new CopyOnWriteArrayList<>();

    @Override
    protected void createBody(Body body)
    {
        messageArea = new Div();
        messageArea.setHeight("400px");
        messageArea.setOverflow(Overflow.AUTO);
        body.addElement(messageArea);

        messageInput = new TextInput();
        messageInput.setPlaceholder("Type a message...");
        messageInput.registerListener(this, InputCompleteEvent.class);
        body.addElement(messageInput);

        // Track this user
        activeUsers.add(this);
    }

    @Override
    public void onEvent(InputCompleteEvent event)
    {
        String message = messageInput.getValue();
        if (!message.isEmpty())
        {
            broadcastMessage(getCurrentUser(), message);
            messageInput.setValue("");
        }
    }

    private void broadcastMessage(String user, String message)
    {
        for (ChatPage page : activeUsers)
        {
            page.displayMessage(user, message);
        }
    }

    private void displayMessage(String user, String message)
    {
        Div msg = new Div();
        msg.setText(user + ": " + message);
        messageArea.addElement(msg);
        // Auto-scroll
        messageArea.scrollToBottom();
    }
}

Understanding the Connection Lifecycle

Oorian manages WebSocket connections automatically:

1. Page Load: HTTP request creates the page
2. Upgrade: Connection upgrades to WebSocket
3. Active: Bidirectional messaging enabled
4. Close: Connection cleaned up on navigation/close

Server Push with WebSocket

public void pushNotification(String message)
{
    Div notification = new Div();
    notification.setText(message);
    notification.setBackgroundColor("#10b981");
    notification.setColor("#ffffff");
    notificationArea.addElement(notification);
    // Changes are pushed immediately via WebSocket
}

Handling Connection Events

@Override
protected void onWebSocketOpen()
{
    activeUsers.add(this);
    broadcastUserJoined(getCurrentUser());
}

@Override
protected void onWebSocketClose()
{
    activeUsers.remove(this);
    broadcastUserLeft(getCurrentUser());
}

Performance Considerations

Connection Overhead

Each WebSocket connection uses a persistent TCP connection. For high-traffic applications, consider:

• Connection limits on your server
• Session affinity if load balancing
• Heartbeat intervals for connection health

Message Size

Oorian sends JSON deltas rather than full page state. Only changed elements are transmitted, keeping message sizes small.

Scaling WebSocket Applications

For multi-server deployments:

• Use sticky sessions or session affinity
• Implement a pub/sub system (Redis, message queue) for cross-server communication
• Consider connection distribution based on capacity

When Not to Use WebSocket

WebSocket adds complexity. Use simpler modes when appropriate:

• AJAX: For simple request-response interactions
• SSE: When only the server pushes updates

Conclusion

WebSocket enables truly real-time applications in Oorian. Use it when you need instant, bidirectional communication. For simpler needs, AJAX or SSE may be more appropriate choices.