> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mastermindcms.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Built-in client

> Use /msm2.bundle.js and the MSM2.App client in the browser

Use this approach when you want a ready-to-use browser client that already knows how to:

* connect to WebSocket/STOMP (`/ws` with SockJS fallback to `/sock`)
* subscribe to the default topics (`/topic/msm/*` and `/user/topic/msm/*`)
* publish SSR render and JSON requests

## Setup

Include the bundle and initialize the app:

```html theme={null}
<script src="/msm2.bundle.js"></script>
<script>
  const MSM2App = new MSM2.App();
</script>
```

If you initialize the client from an ES module, you can export the instance:

```js theme={null}
export const MSM2App = new MSM2.App();
```

`MSM2.App` opens the WebSocket connection automatically and registers default listeners for HTML and JSON responses.

### Initialize with `msm-framework-js`

When the library is loaded as a separate browser script, create the client after it has loaded. Pass the WebSocket endpoint of your application:

```html theme={null}
<script src="https://cdn.jsdelivr.net/npm/msm-framework-js@0.0.7/index.js"></script>
<script>
  const MSM2App = new MSM2.App("wss://music.mastermindcms.com");
</script>
```

Replace `wss://music.mastermindcms.com` with your application's WebSocket URL. In a bundler, you can add `msm-framework-js` as a dependency and use the same `new MSM2.App(...)` call.

## Calling APIs

After initialization, `MSM2App` exposes convenience methods for the two WebSocket request styles:

* render (SSR): `renderPage`, `renderElement`, `invokeAndRender`, `updateBeanAndRender`, `addToRepositoryAndRender`, `saveToRepositoryAndRender`, `removeFromRepositoryAndRender`, `addDocumentAndRender`, `removeDocumentAndRender`
* JSON: `invoke`, `invokeAndGetJson$`, `updateBeanAndGetJson$`, repository calls, and database document calls

### Example: SSR render

```js theme={null}
// Re-render the current page
MSM2App.renderPage();
```

### Example: call a backend service and get JSON

```js theme={null}
MSM2App
  .invokeAndGetJson$("someServiceImpl", "PROTOTYPE", "someMethod", [{ query: {} }], null, "USER")
  .subscribe((res) => {
    console.log(res.result);
  });
```

### Example: custom topic subscription

If your backend publishes custom events under `/topic/**`, you can register an additional listener:

```js theme={null}
MSM2App.registerJsonWebSocket("jobs", (res) => {
  console.log("jobs event", res);
});
```

## Notes

* For JSON calls, use `actionId` correlation if you are building your own request messages. When using `invokeAndGetJson$` and similar helpers, the client generates `actionId` automatically.
* Authorization can be done via session/remember-me cookies or via JWT, depending on your configuration.