lukeocodes / infinite-scrolling-pagination

Infinite Scrolling in Nexmo Chat

Table of Contents

• Getting Started
  • Prerequisites
    • Node & NPM
    • Nexmo Account
    • Nexmo CLI
  • Run the Application
    • Basic Installation
    • Create Nexmo Application
    • Create Nexmo Conversation
    • Create Your User
    • Add User To Conversation
    • Generate User Token
    • Configure The Application
• Code of Conduct
• Contributing
• License

Getting Started

Prerequisites

Node & NPM

This application was developed using Node.js 13.1 and NPM 6.12. Check you have stable or long-term support versions of Node.js installed, at least.

node --version

npm --version

If you don't have Node.js or NPM, or you have older versions, head over to nodejs.org and install the correct version if you don't have it.

Nexmo Account

Sign up for a free Nexmo account.

Nexmo CLI

To set up your application, you'll need to install the Nexmo CLI. Install it using NPM in terminal.

npm install -g nexmo-cli@beta

Now, configure the CLI using your API key and secret, found on your Nexmo account dashboard.

nexmo setup <your_api_key> <your_api_secret>

Run the Application

The application you're starting with is a chat application built using Bootstrap and the Nexmo JavaScript Client SDK. It's configurable through editing static files, but launched using Express.js, a lightweight Node.js based http server.

Basic Installation

Clone the demo application straight from GitHub.

git clone https://github.com/nexmo-community/infinite-scrolling-pagination.git

Once cloned, change into the new demo application directory.

cd infinite-scrolling-pagination

Install the npm dependencies.

npm install

Configure the application port using an environment file. Copy the example file:

cp .env.example .env

Now, edit the environment file .env and set the port to 3000 (or whichever port you require).

# app config
PORT=3000

To start the application in the standard way, run:

npm start

To start the application, but with nodemon instead, run:

npm run dev

Create Nexmo Application

nexmo app:create "Nexmo RTC Chat" --capabilities=rtc --rtc-event-url=http://example.com --keyfile=private.key
# Application created: 4556dbae-bf...f6e33350d8
# Credentials written to .nexmo-app
# Private Key saved to: private.key

Create Nexmo Conversation

nexmo conversation:create display_name="Infinite Scrolling"
# Conversation created: CON-a57b0...11e57f56d

Create Your User

nexmo user:create name=<USER_NAME> display_name=<DISPLAY_NAME>
# User created: USR-6eaa4...e36b8a47f

Add User To Conversation

nexmo member:add <CONVERSATION_ID> action=join channel='{"type":"app"}' user_id=<USER_ID>
# Member added: MEM-df772...1ad7fa06

Generate User Token

nexmo jwt:generate ./private.key sub=<USER_NAME> exp=$(($(date +%s)+86400)) acl='{"paths":{"/*/users/**":{},"/*/conversations/**":{},"/*/sessions/**":{},"/*/devices/**":{},"/*/image/**":{},"/*/media/**":{},"/*/applications/**":{},"/*/push/**":{},"/*/knocking/**":{}}}' application_id=<APPLICATION_ID>
# eyJhbGciOi...XVCJ9.eyJpYXQiOjE1NzM5M...In0.qn7J6...efWBpemaCDC7HtqA

Configure The Application

Edit the views/layout.hbs file and find the JavaScript shown here.

    <script>
      var userName = '';
      var displayName = '';
      var conversationId = '';
      var clientToken = '';
    </script>

Edit the config with the values you've generated in the commands above.

    <script>
      var userName = '[e-mail]';
      var displayName = 'Luke Oliff';
      var conversationId = 'CON-123...y6346';
      var clientToken = 'eyJhbG9.eyJzdWIiO.Sfl5c';
    </script>

Now, you can start the application again and start chatting... with yourself... because no one else can log in.

npm start

Code of Conduct

In the interest of fostering an open and welcoming environment, we strive to make participation in our project and our community a harassment-free experience for everyone. Please check out our Code of Conduct in full.

Contributing

We ❤️ contributions from everyone! Check out the Contributing Guidelines for more information.

License

This project is subject to the MIT License