SSR Compatibility

Set up the CometChat JavaScript SDK with Next.js, NuxtJS, Ionic, and other server-side rendering frameworks.

The CometChat SDK requires browser APIs (window, WebSocket) and cannot run on the server. For SSR frameworks, initialize the SDK only on the client side.

Next.js

Import the SDK dynamically in useEffect (functional components) or componentDidMount (class components).

Functional Component

import React from "react";
import Chat from "./Chat";

export default function Home() {
  let [libraryImported, setLibraryImported] = React.useState(false);

  React.useEffect(() => {
    window.CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
    setLibraryImported(true);
  }, []);

  return libraryImported ? <Chat /> : <p>Loading....</p>;
}

Class Component

import React from 'react';
import Chat from './Chat';

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      libraryImported: false
    };
  }

  componentDidMount() {
    window.CometChat = require("@cometchat/chat-sdk-javascript").CometChat;
    this.setState({ libraryImported: true });
  }

  render() {
    return this.state.libraryImported ? <Chat /> : <p>Loading....</p>;
  }
}

Chat.js

import React, { Component } from "react";
import { COMETCHAT_CONSTANTS } from "./CONSTS";

export default class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: undefined,
    };
  }

  componentDidMount() {
    this.init();
  }

  init() {
    CometChat.init(
      COMETCHAT_CONSTANTS.APP_ID,
      new CometChat.AppSettingsBuilder()
        .setRegion(COMETCHAT_CONSTANTS.REGION)
        .subscribePresenceForAllUsers()
        .build()
    ).then(
      () => {
        this.login();
      },
      (error) => {
        console.log("Init failed with exception:", error);
      }
    );
  }

  login() {
    let UID = "UID";
    CometChat.login(UID, COMETCHAT_CONSTANTS.AUTH_KEY).then(
      (user) => {
        this.setState({ user });
      },
      (error) => {
        console.log("Login failed with exception:", error);
      }
    );
  }

  render() {
    return this.state.user ? (
      <div>User logged in</div>
    ) : (
      <div>User not logged in</div>
    );
  }
}

CONSTS.js

export const COMETCHAT_CONSTANTS = {
  APP_ID: "APP_ID",
  REGION: "REGION",
  AUTH_KEY: "AUTH_KEY",
};

NuxtJS

Import the SDK dynamically in the mounted lifecycle hook.

index.vue

<template>
  <div v-if="libraryImported">
    <chat/>
  </div>
  <div v-else>Loading....</div>
</template>

<script>
export default {
  name: "Index",
  components: {
    'chat': () => import('./chat')
  },
  data() {
    return {
      libraryImported: false
    }
  },
  mounted() {
    window.CometChat = require('@cometchat/chat-sdk-javascript').CometChat;
    this.libraryImported = true;
  }
}
</script>

chat.vue

<template>
  <div v-if="user">User logged in</div>
  <div v-else>User not logged in</div>
</template>

<script>
import CONSTS from './CONSTS';

export default {
  name: "chat",
  data() {
    return {
      user: null
    }
  },
  mounted() {
    CometChat.init(
      CONSTS.APP_ID,
      new CometChat.AppSettingsBuilder()
        .setRegion(CONSTS.REGION)
        .subscribePresenceForAllUsers()
        .build()
    ).then(
      () => {
        let UID = "UID";
        CometChat.login(UID, CONSTS.AUTH_KEY).then(
          user => {
            this.user = user;
          },
          error => {
            console.log("Login failed with exception:", error);
          }
        );
      },
      error => {
        console.log("error in init", error);
      }
    );
  }
}
</script>

CONSTS.js

module.exports = {
  APP_ID: "APP_ID",
  REGION: "REGION",
  AUTH_KEY: "AUTH_KEY",
};

Ionic/Cordova

For Ionic and Cordova applications, use the JavaScript SDK directly. Import and initialize in your root component:

import { Component, OnInit } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  
  ngOnInit() {
    this.initCometChat();
  }

  initCometChat() {
    const appID = 'APP_ID';
    const region = 'APP_REGION';
    
    const appSetting = new CometChat.AppSettingsBuilder()
      .subscribePresenceForAllUsers()
      .setRegion(region)
      .autoEstablishSocketConnection(true)
      .build();

    CometChat.init(appID, appSetting).then(
      () => {
        console.log('CometChat initialized successfully');
      },
      (error) => {
        console.log('CometChat initialization failed:', error);
      }
    );
  }
}

The dedicated Ionic Cordova SDK has been deprecated. For new Ionic/Cordova applications, use the JavaScript SDK as shown above. Existing users can refer to the legacy documentation.

---

Next Steps

Authentication

Log in users with Auth Key or Auth Token

Send Messages

Send your first message