From 20f88adde650a533dd02b1b71702895dc09bdeb0 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:06:29 +0900 Subject: [PATCH 01/21] Update README.md --- README.md | 316 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 316 insertions(+) diff --git a/README.md b/README.md index 35086a8..b1b1f14 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,321 @@ +# [Sendbird](https://sendbird.com) Chat SDK for JavaScript + +![Platform](https://img.shields.io/badge/platform-JAVASCRIPT-orange.svg) +![Languages](https://img.shields.io/badge/language-JAVASCRIPT-orange.svg) [![npm](https://img.shields.io/npm/v/sendbird.svg?style=popout&colorB=red)](https://www.npmjs.com/package/sendbird) +## Table of contents + + 1. [Introduction](#introduction) + 1. [Before getting started](#before-getting-started) + 1. [Getting started](#getting-started) + 1. [Send your first message](#send-your-first-message) + +
+ +## Introduction + +Through the Chat SDK for Javascript, you can efficiently integrate real-time chat into your client app. On the client-side implementation, you can initialize, configure and build the chat with minimal effort. On the server-side, Sendbird ensures reliable infra-management services for your chat within the app. This **read.me** provides the Chat SDK’s structure, supplementary features, and the installation steps. + +### How it works + +It is simple to implement chat in your client app with the Chat SDK: a user logs in, sees a list of channels, selects or creates an [open channel](https://sendbird.com/docs/chat/v3/javascript/guides/open-channel#2-create-a-channel) or a [group channel](https://sendbird.com/docs/chat/v3/javascript/guides/group-channel#2-create-a-channel), and, through the use of the [channel event handlers](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler), sends messages to the channel, while also receiving them from other users within the channel. + +### More about Sendbird Chat SDK for JavaScript + +Find out more about Sendbird Chat for JavaScript on [Chat SDK for JavaScript doc](https://sendbird.com/docs/chat/v3/javascript/getting-started/about-chat-sdk). + +
+ +## Before getting started + +This section shows you the prerequisites you need to know for using Sendbird Calls for iOS sample app. + +### Supported browsers + +| Browser | Supported versions | +| :---: | :--- | +| Internet Explorer | 10 or higher | +| Edge | 13 or higher | +| Chrome | 16 or higher | +| Firefox | 11 or higher | +| Safari | 7 or higher | +| Opera | 12.1 or higher | +| iOS Safari | 7 or higher | +| Android Browswer | 4.4 (Kitkat) or higher | + +### More about additional features of Sendbird the the Chat SDK + +Your application provides two add-ons, which are detailed as follows. + +- [Sendbird UIKit for JavaScript](https://sendbird.com/docs/uikit/v1/javascript/getting-started/about-uikit): a development kit with a user interface that enables an easy and fast integration of standard chat features into new or existing client apps. +- [Sendbird SyncManager for JavaScript](https://sendbird.com/docs/syncmanager/v1/javascript/getting-started/about-syncmanager): the Chat SDK add-on that optimizes the user caching experience by interlinking the synchronization of the local data storage with the chat data in Sendbird server through an event-driven structure. + +
+ +## Getting started + +### Try the sample app + +The fastest way to test the Chat SDK is to build your chat app on top of our sample app. To create a project for the sample app, download the app from our GitHub repository. The link is down below. + +- https://github.com/sendbird/Sendbird-JavaScript + +> Note: Make sure to input your application ID into the sample app. Go to the Create a Sendbird application from your dashboard section to learn more. + +You can also download the sample using a git command: + +```bash +$ git clone https://github.com/sendbird/SendBird-JavaScript +``` + +### Different sample projects + +For JavaScript, Sendbird supports a variety of sample projects. Their installation procedures are detailed as below: + +#### Run the web sample projects + +There are three web sample projects: [basic sample](https://github.com/sendbird/SendBird-JavaScript/tree/master/web-basic-sample), [live chat sample](https://github.com/sendbird/SendBird-JavaScript/tree/master/web-live-chat), and [widget sample](https://github.com/sendbird/SendBird-JavaScript/tree/master/web-widget). To run the sample projects, do the following to use `NodeJS` for your local server: + +1. Download and install `NodeJS` if your system doesn't have it yet. +2. Open a terminal and move to the project path. +```bash +$ cd web-basic-sample +``` +3. Install packages that are used in the sample project. +```bash +$ npm install +``` +4. Run the sample project. +```bash +$ npm start +``` + +#### Run the React Native sample project + +Our [React Native sample project](https://github.com/sendbird/SendBird-JavaScript/tree/master/react-native-redux-sample) is built on the [Redux](https://redux.js.org/) pattern of [React Native](https://reactnative.dev/). To run the sample, do the following: + +1. Download and install [`NodeJS`](https://nodejs.org/en/) if your system doesn't have it yet. +2. Setup the [React Native environment](https://reactnative.dev/docs/environment-setup) in your system. +3. Open a terminal and enter the commands below in your project path. +```bash +$ cd react-native-redux-sample/ReactNativeWithSendBird +$ npm install +``` +4. Run the sample app by entering the commands below. +```bash +$ react-native run-ios +$ react-native run-android +``` + +Before entering the two commands above, you should run the simulator from the [Android Studio](https://developer.android.com/studio/) in advance. The command for iOS works without further action. + + +### Here are the steps to install Chat SDK + +#### Step 1: Create a Sendbird application from your dashboard + +A Sendbird application comprises everything required in a chat service including users, message, and channels. To create an application: + +1. Go to the [Sendbird Dashboard](https://dashboard.sendbird.com/auth/signup) and enter your email and password, and create a new account. You can also sign up with a Google account. +2. When prompted by the setup wizard, enter your organization information to manage Sendbird applications. +3. Lastly, when your dashboard home appears after completing setup, click Create App at the top-right corner. + +Regardless of the platform, only one Sendbird application can be integrated per app; however, the application supports communication across allSendbird’s provided platforms without any additional setup. Sendbird currently supports iOS, Android, web, .NET, and Unity client apps. + +> Note: All the data is limited to the scope of a single application, thus the users in different Sendbird applications are unable to chat with each other. + +#### Step 2: Install the Chat SDK + +If you’re familiar with using external libraries or SDKs, installing the Chat SDK is simple.You can install the Chat SDK with package manager npm or Bower by entering the command below on the command line. + +- **Npm** + +> Note: To use npm to install the Chat SDK, Node.js must be first installed on your system. + +```bash +$ npm install sendbird (request to npm server) +``` + +Install via `Npm` and import like below in your `TypeScript` file. + +```bash +import * as SendBird from "sendbird"; +var sb = new SendBird({ appId: "APP_ID" }); +// do something... +``` + +If you have trouble importing Sendbird, please check your `tsconfig.json` file and change the value of `allowSyntheticDefaultImports` to true in `compilerOptions`. + +- **Bower** + +```bash +$ bower install sendbird +``` + +Or download the latest Chat SDK for JavaScript from the following link if you do not want to use package manager + +- https://github.com/sendbird/Sendbird-SDK-JavaScript + +> Note: You should also add axios library into the script tag before the Sendbird library inclusion since v3.0.127. You can host the library or utilize the CDN as the library refers to it. The following serves as examples. + +```javascript + + +``` + +
+ +## Send your first message + +### Authentication + +To use the features of the Chat SDK in your client app, a `Sendbird` instance must be initiated in each client app before user authentication with Sendbird server. These instances communicate and interact with the server based on an authenticated user account, allowing for the client app to use the Chat SDK features. + +### Step 1: Initialize the the the Chat SDK + +You need to initialize a `Sendbird` instance before authentication. Initialization binds the Chat SDK to Javascript’s context which allows the Chat SDK to respond to connection and state changes and also enables client apps to use the Chat SDK features. + +To initialize a `Sendbird` instance, pass the `App_ID` of your Sendbird application in the dashboard as an argument to a parameter in the `new Sendbird()` method. As the `new SendBird()` can only be a single instance, call it only a single time across your Javascript client app. Typically, initialization is implemented in the user login screen. + +> Note: It is recommended to initialize the Chat SDK at the top of your Javascript file. + +```javascript +var sb = new SendBird({appId: APP_ID}); +``` + +### Step 2: Connect to Sendbird server + +After initialization by use of `new SendBird()`, your client app must always be connected to Sendbird server before calling any methods. If you attempt to call a method without connecting, an [`ERR_CONNECTION_REQUIRED (800101)`](https://sendbird.com/docs/chat/v3/android/guides/error-codes) error would return. + +Connect a user to Sendbird server either through a unique user ID or in combination with an access token. Sendbird prefers the latter method, as it ensures privacy with the user. The former is useful during the developmental phase or if your service doesn't require additional security. + +#### A. User ID + +Connect a user to Sendbird server using their unique **user ID**. By default, Sendbird server can authenticate a user by a unique user ID. Upon request for a connection, the server queries the database to check for a match. Any untaken user ID is automatically registered as a new user to the Sendbird system, while an existing ID is allowed to log indirectly. The ID must be unique within a Sendbird application, such as a hashed email address or phone number in your service. + +```javascript +sb.connect(USER_ID, function(user, error) { + if (error) { + return; + } +}); +``` + +#### B. A combination of user ID and access token ID + +Sendbird prefers that you pass the APP ID through the use of a token, as it ensures privacy for the users. Create a user along with their access token, or issue an access token for an existing user. Once an access token is issued, a user is required to provide the access token in the `sb.connect()` method which is used for logging in. + +1. Using the Chat Platform API, create a Sendbird user account with the information submitted when a user signs up your service. +2. Save the user ID along with the issued access token to your persistent storage which is securely managed. +3. When the user attempts to log in to the Sendbird application, load the user ID and access token from the storage, and then pass them to the `sb.connect()` method. +4. Periodically replacing the user's access token is recommended to protect the account. + +```javascript +sb.connect(USER_ID, ACCESS_TOKEN, function(user, error) {}); +``` + +#### Tips for user account security + +From **Settings** > **Application** > **Security** > **Access token permission** setting in your dashboard, you can prevent users without an access token from logging in to your Sendbird application or restrict their access to **read** and **write** messages. + +For security reasons, you can also use a session token when a user logs in to Sendbird server instead of an access token. Go to the [Access token vs. Session token](https://sendbird.com/docs/chat/v3/platform-api/guides/user#2-create-a-user-3-access-token-vs-session-token) section from the [Chat Platform API](https://sendbird.com/docs/chat/v3/platform-api/getting-started/prepare-to-use-api) guide to learn more. + +### Step 3: Create a new open channel + +Create an [open channel](https://sendbird.com/docs/chat/v3/javascript/guides/open-channel#2-create-a-channel). Once created, all users in your Sendbird application can easily participate in the channel. You also can create a [group channel](https://sendbird.com/docs/chat/v3/javascript/guides/group-channel#2-create-a-channel) by [inviting users](https://sendbird.com/docs/chat/v3/javascript/guides/group-channel#2-invite-users-as-members) as new members to the channel. + +> Note: All the methods in the following steps are asynchronous, excluding the `new SendBird()`. As a result, your client app must receive success callbacks from Sendbird server to proceed to the next step. A good way to do this is the nesting of methods: Go to [Step 4: Enter the channel](#step-4-enter-the-channel) to learn more about how you can nest the `openChannel.enter()` in the `OpenChannel.getChannel()` method. + +```javascript +sb.OpenChannel.createChannel(function(openChannel, error) { + if (error) { + return; + } +}); +``` + +### Step 4: Enter the channel + +Enter the channel to send and receive messages. + +```javascript +sb.OpenChannel.getChannel(CHANNEL_URL, function(openChannel, error) { + if (error) { + return; + } + + openChannel.enter(function(response, error) { + if (error) { + return; + } + }) +}); +``` + +### Step 5: Send a message to the channel + +Finally, send a message to the channel. There are three types: a user message, which is a plain text, a file message, which is a binary file, such as an image or PDF, and an admin message, which is a plain text sent through the dashboard or Chat Platform API + +```javascript +openChannel.sendUserMessage(MESSAGE, DATA, CUSTOM_TYPE, function(message, error) { + if (error) { + return; + } +}); +``` + +
+ +## Appendix + +Sendbird wants customers to be confident that Chat SDK will be useful, work well, and fit within their needs. Thus, we have compiled a couple of optional guidelines. Take a few minutes to read and apply them at your convenience. + +### XSS prevention + +XSS (Cross-site scripting) is a type of computer security vulnerability. XSS helps attackers inject client-side scripts into web pages viewed by other users. Users can send any type of string data without restriction through Chat SDKs. Make sure that you check the safety of received data from other users before rendering it into your DOM. + +> Note: For more about the XSS prevention, visit the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) page. + +### Use functions of Sendbird objects with Immutable-js + +If you are using the [Immutable-js](https://immutable-js.github.io/immutable-js/) in your web app, instead of the `Immutable.Map()`, call the `Immutable.fromJS()` which converts deeply nested objects to an `Immutable Map`. +So you can call the functions of Sendbird objects because the `fromJS()` method returns internal objects. But if you use a `Map` function, you can't call any functions of a Sendbird object. + +```javascript +var userIds = ['John', 'Harry']; + +sb.GroupChannel.createChannelWithUserIds(userIds, false, NAME, COVER_URL, DATA, function(groupChannel, error) { + if (error) { + return; + } + + var immutableObject = Immutable.fromJS(groupChannel); + console.log(immutableObject); +}); +``` + +### Parameter ordering in callbacks + +In a callback, the `error` parameter is passed last in order by default. For example, the `connect()` method below returns parameters in **(user, error)** order. + +```javascript +sb.connect(USER_ID, function(user, error) {}); +``` + +You can configure your Sendbird application to change the order by calling the `sb.setErrorFirstCallback(true)`. Once **true** is set, all callbacks pass the error as the first parameter. + +```javascript +sb.setErrorFirstCallback(true); +sb.connect(USER_ID, function(error, user) {}); +``` + +The `sb.setErrorFirstCallback(false)` returns callbacks to their original parameter ordering, with errors last. + +> Note: Go to the [Event handler](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler) page to learn more about the usages of the Chat SDK's handlers and callbacks. + + + # Sendbird JavaScript SDK [Sendbird](https://sendbird.com) provides the chat API and SDK for your app enabling real-time communication among your users. From cb022d825de230cd64134593c70e187c5cc6683a Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:08:19 +0900 Subject: [PATCH 02/21] Update README.md --- README.md | 62 +++---------------------------------------------------- 1 file changed, 3 insertions(+), 59 deletions(-) diff --git a/README.md b/README.md index b1b1f14..51a354a 100644 --- a/README.md +++ b/README.md @@ -314,61 +314,9 @@ The `sb.setErrorFirstCallback(false)` returns callbacks to their original parame > Note: Go to the [Event handler](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler) page to learn more about the usages of the Chat SDK's handlers and callbacks. +## Changelogs - -# Sendbird JavaScript SDK - -[Sendbird](https://sendbird.com) provides the chat API and SDK for your app enabling real-time communication among your users. - -# Getting Started - -[bower](http://bower.io) package for [Sendbird](https://sendbird.com) JavaScript SDK - - bower install sendbird - -[npm](https://www.npmjs.com/package/sendbird) module for [Sendbird](https://sendbird.com) JavaScript SDK - - npm install sendbird --save - -[Download](https://github.com/sendbird/Sendbird-SDK-JavaScript) for [Sendbird](https://sendbird.com) JavaScript SDK if you wish to use it without a package manager. - -> NOTICE! You should also add [axios](https://github.com/axios/axios) library into the `script` tag before the Sendbird library inclusion since `v3.0.127`. You can host the library by your own, or utilize the CDN as the library refers to it. The below is an example. - -```html - - -``` - -# TypeScript - -Install via NPM and import like below in your TypeScript file: - -```javascript -import * as SendBird from "sendbird"; -var sb = new SendBird({ appId: "APP_ID" }); -// do something... -``` - -If you have trouble importing `Sendbird`, please check your `tsconfig.json` file and change the value of `"allowSyntheticDefaultImports"` to `true` in `compilerOptions`. - -# [Sample](https://github.com/sendbird/Sendbird-JavaScript) - -- [Basic Sample](https://sample.sendbird.com/basic) using [Sendbird SDK](https://github.com/sendbird/Sendbird-SDK-JavaScript). [download](https://github.com/sendbird/Sendbird-JavaScript/tree/master/web-sample) -- [Widget Sample](https://sample.sendbird.com/widget) using [Sendbird SDK](https://github.com/sendbird/Sendbird-SDK-JavaScript). [download](https://github.com/sendbird/Sendbird-JavaScript/tree/master/web-widget) -- [LiveChat Sample](https://sample.sendbird.com/livechat) using [Sendbird SDK](https://github.com/sendbird/Sendbird-SDK-JavaScript). [download](https://github.com/sendbird/Sendbird-JavaScript/tree/master/web-live-chat) - -## SyncManager - -`SyncManager` is a support add-on for [Sendbird SDK](https://github.com/sendbird/Sendbird-SDK-JavaScript). Major benefits of `SyncManager` are, - -- Local cache integrated: store channel/message data in local storage for fast view loading. -- Event-driven data handling: subscribe channel/message event like `insert`, `update`, `remove` at a single spot in order to apply data event to view. - -Check out [Basic Sample with SyncManager](https://github.com/sendbird/Sendbird-JavaScript/tree/master/web-basic-sample-syncmanager) which is similar to [Basic Sample](https://sample.sendbird.com/basic) but `SyncManager` integrated. For more information about `SyncManager`, please refer to [SyncManager README](https://github.com/sendbird/sendbird-syncmanager-javascript/blob/master/README.md). - -# [Documentation](https://docs.sendbird.com/javascript) - -## v3.0.138(OCT 30, 2020) +### v3.0.138(OCT 30, 2020) If you want to check the record of other version, go to [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md). @@ -377,8 +325,4 @@ If you want to check the record of other version, go to [Change Log](https://git - Set `size` in `FileMessage` automatically. - Improved stability. -## [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md) - -## License - -[Sendbird License](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/LICENSE.md) +### [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md) From b6c7b5a7d7e3320bfbedb49b737b13d96d0a1e06 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:09:15 +0900 Subject: [PATCH 03/21] Update README.md --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 51a354a..35ae8e7 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ 1. [Before getting started](#before-getting-started) 1. [Getting started](#getting-started) 1. [Send your first message](#send-your-first-message) + 1. [Changelogs](#send-your-first-message) +
@@ -314,6 +316,8 @@ The `sb.setErrorFirstCallback(false)` returns callbacks to their original parame > Note: Go to the [Event handler](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler) page to learn more about the usages of the Chat SDK's handlers and callbacks. +
+ ## Changelogs ### v3.0.138(OCT 30, 2020) @@ -325,4 +329,4 @@ If you want to check the record of other version, go to [Change Log](https://git - Set `size` in `FileMessage` automatically. - Improved stability. -### [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md) +### [More changelogs](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md) From ca0bb4cf22528b82b0fede8eb68a7232fce3d438 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:09:56 +0900 Subject: [PATCH 04/21] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 35ae8e7..df97e2f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,8 @@ 1. [Before getting started](#before-getting-started) 1. [Getting started](#getting-started) 1. [Send your first message](#send-your-first-message) - 1. [Changelogs](#send-your-first-message) + 1. [Appendix](#appendix) + 1. [Changelogs](#changelogs)
From 7b0284bdeba25e33631fb9c1ffdeffed5d69e8d2 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:11:25 +0900 Subject: [PATCH 05/21] Update README.md --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index df97e2f..e8cd5e9 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,6 @@ 1. [Appendix](#appendix) 1. [Changelogs](#changelogs) -
## Introduction From d99712d5f456bb1d1c11c8e9b349d31b22647703 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:13:35 +0900 Subject: [PATCH 06/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index e8cd5e9..23faee4 100644 --- a/README.md +++ b/README.md @@ -325,7 +325,7 @@ The `sb.setErrorFirstCallback(false)` returns callbacks to their original parame If you want to check the record of other version, go to [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md). - Added `getAllowFriendDiscovery()` and `setAllowFriendDiscovery()` in `SendBird`. - - If it's set to `false`, `uploadFriendDiscoveries()` called by others does not add the user as a friend. + - If it's set to **false**, `uploadFriendDiscoveries()` called by others does not add the user as a friend. - Set `size` in `FileMessage` automatically. - Improved stability. From 8fc5ade2e07deea5983963d6d171f0f133230273 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:27:21 +0900 Subject: [PATCH 07/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 23faee4..49730fb 100644 --- a/README.md +++ b/README.md @@ -121,7 +121,7 @@ A Sendbird application comprises everything required in a chat service including 1. Go to the [Sendbird Dashboard](https://dashboard.sendbird.com/auth/signup) and enter your email and password, and create a new account. You can also sign up with a Google account. 2. When prompted by the setup wizard, enter your organization information to manage Sendbird applications. -3. Lastly, when your dashboard home appears after completing setup, click Create App at the top-right corner. +3. Lastly, when your dashboard home appears after completing setup, click **Create +** at the top-right corner. Regardless of the platform, only one Sendbird application can be integrated per app; however, the application supports communication across allSendbird’s provided platforms without any additional setup. Sendbird currently supports iOS, Android, web, .NET, and Unity client apps. From 0d39105880eb5c655ccdf8a67ddc2fc9c700dfb4 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:34:00 +0900 Subject: [PATCH 08/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 49730fb..76f104f 100644 --- a/README.md +++ b/README.md @@ -172,11 +172,11 @@ Or download the latest Chat SDK for JavaScript from the following link if you do ### Authentication -To use the features of the Chat SDK in your client app, a `Sendbird` instance must be initiated in each client app before user authentication with Sendbird server. These instances communicate and interact with the server based on an authenticated user account, allowing for the client app to use the Chat SDK features. +To use the features of the Chat SDK in your client app, a `sb` instance must be initiated in each client app before user authentication with Sendbird server. These instances communicate and interact with the server based on an authenticated user account, allowing for the client app to use the Chat SDK features. ### Step 1: Initialize the the the Chat SDK -You need to initialize a `Sendbird` instance before authentication. Initialization binds the Chat SDK to Javascript’s context which allows the Chat SDK to respond to connection and state changes and also enables client apps to use the Chat SDK features. +You need to initialize a `sb` instance before authentication. Initialization binds the Chat SDK to Javascript’s context which allows the Chat SDK to respond to connection and state changes and also enables client apps to use the Chat SDK features. To initialize a `Sendbird` instance, pass the `App_ID` of your Sendbird application in the dashboard as an argument to a parameter in the `new Sendbird()` method. As the `new SendBird()` can only be a single instance, call it only a single time across your Javascript client app. Typically, initialization is implemented in the user login screen. From 6f9d3a0d96e77ad819b0f97c71bd4183a85a9b78 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 17 Nov 2020 11:55:57 +0900 Subject: [PATCH 09/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 76f104f..220457c 100644 --- a/README.md +++ b/README.md @@ -257,7 +257,7 @@ sb.OpenChannel.getChannel(CHANNEL_URL, function(openChannel, error) { ### Step 5: Send a message to the channel -Finally, send a message to the channel. There are three types: a user message, which is a plain text, a file message, which is a binary file, such as an image or PDF, and an admin message, which is a plain text sent through the dashboard or Chat Platform API +Finally, send a message to the channel. There are [three types](https://sendbird.com/docs/chat/v3/platform-api/guides/messages#-3-resource-representation): a user message, which is a plain text, a file message, which is a binary file, such as an image or PDF, and an admin message, which is a plain text sent through the [dashboard](https://dashboard.sendbird.com/auth/signin) or [Chat Platform API](https://sendbird.com/docs/chat/v3/platform-api/guides/messages#2-send-a-message). ```javascript openChannel.sendUserMessage(MESSAGE, DATA, CUSTOM_TYPE, function(message, error) { From 93800099c38f4e1f465a1f06b6932746935f3a0a Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:29:38 +0900 Subject: [PATCH 10/21] Update README.md --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 220457c..01d36b2 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Find out more about Sendbird Chat for JavaScript on [Chat SDK for JavaScript doc ## Before getting started -This section shows you the prerequisites you need to know for using Sendbird Calls for iOS sample app. +This section shows you the prerequisites you need to check for using Sendbird Chat SDK for JavaScript. ### Supported browsers @@ -57,6 +57,8 @@ Your application provides two add-ons, which are detailed as follows. ## Getting started +This section gives you information you need to get started with Sendbird Chat SDK for JavaScript. + ### Try the sample app The fastest way to test the Chat SDK is to build your chat app on top of our sample app. To create a project for the sample app, download the app from our GitHub repository. The link is down below. From b5520e917854895707c72cf762b89f207b358b54 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:33:02 +0900 Subject: [PATCH 11/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 01d36b2..eceea65 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ This section shows you the prerequisites you need to check for using Sendbird Ch ### More about additional features of Sendbird the the Chat SDK -Your application provides two add-ons, which are detailed as follows. +Try building your Sendbird application with these two add-ons: - [Sendbird UIKit for JavaScript](https://sendbird.com/docs/uikit/v1/javascript/getting-started/about-uikit): a development kit with a user interface that enables an easy and fast integration of standard chat features into new or existing client apps. - [Sendbird SyncManager for JavaScript](https://sendbird.com/docs/syncmanager/v1/javascript/getting-started/about-syncmanager): the Chat SDK add-on that optimizes the user caching experience by interlinking the synchronization of the local data storage with the chat data in Sendbird server through an event-driven structure. From 06c20f4c6b4b8f4edca65d0ee9b77dbd9c938ade Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:35:13 +0900 Subject: [PATCH 12/21] Update README.md --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index eceea65..ae66fc0 100644 --- a/README.md +++ b/README.md @@ -65,8 +65,6 @@ The fastest way to test the Chat SDK is to build your chat app on top of our sam - https://github.com/sendbird/Sendbird-JavaScript -> Note: Make sure to input your application ID into the sample app. Go to the Create a Sendbird application from your dashboard section to learn more. - You can also download the sample using a git command: ```bash From d4cb6545377775b86ca756c61c63b3511db53953 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:35:53 +0900 Subject: [PATCH 13/21] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ae66fc0..b62db1c 100644 --- a/README.md +++ b/README.md @@ -112,9 +112,10 @@ $ react-native run-android Before entering the two commands above, you should run the simulator from the [Android Studio](https://developer.android.com/studio/) in advance. The command for iOS works without further action. - ### Here are the steps to install Chat SDK +Follow the simple steps below to build the Chat SDK into your client app. + #### Step 1: Create a Sendbird application from your dashboard A Sendbird application comprises everything required in a chat service including users, message, and channels. To create an application: From 982985c5309b5cba84612e1397490d876705acef Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:38:38 +0900 Subject: [PATCH 14/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index b62db1c..859f529 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ 1. [Introduction](#introduction) 1. [Before getting started](#before-getting-started) 1. [Getting started](#getting-started) - 1. [Send your first message](#send-your-first-message) + 1. [Sending your first message](#sending-your-first-message) 1. [Appendix](#appendix) 1. [Changelogs](#changelogs) @@ -169,7 +169,7 @@ Or download the latest Chat SDK for JavaScript from the following link if you do
-## Send your first message +## Sending your first message ### Authentication From eade52294abdc0932461608246d4d37c08365334 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:38:55 +0900 Subject: [PATCH 15/21] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 859f529..9152ca7 100644 --- a/README.md +++ b/README.md @@ -171,6 +171,8 @@ Or download the latest Chat SDK for JavaScript from the following link if you do ## Sending your first message +Follow the step-by-step instructions below to authenticate and send your first message. + ### Authentication To use the features of the Chat SDK in your client app, a `sb` instance must be initiated in each client app before user authentication with Sendbird server. These instances communicate and interact with the server based on an authenticated user account, allowing for the client app to use the Chat SDK features. From dd1b5ce348e336e61f52306a36c4eeb9f1e686cf Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:44:46 +0900 Subject: [PATCH 16/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9152ca7..2e35fde 100644 --- a/README.md +++ b/README.md @@ -177,7 +177,7 @@ Follow the step-by-step instructions below to authenticate and send your first m To use the features of the Chat SDK in your client app, a `sb` instance must be initiated in each client app before user authentication with Sendbird server. These instances communicate and interact with the server based on an authenticated user account, allowing for the client app to use the Chat SDK features. -### Step 1: Initialize the the the Chat SDK +### Step 1: Initialize the Chat SDK You need to initialize a `sb` instance before authentication. Initialization binds the Chat SDK to Javascript’s context which allows the Chat SDK to respond to connection and state changes and also enables client apps to use the Chat SDK features. From 7f033d472872a6d3b0dfd2e92294602f4f63bab4 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Fri, 20 Nov 2020 13:50:30 +0900 Subject: [PATCH 17/21] Update README.md --- README.md | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 2e35fde..0f53f92 100644 --- a/README.md +++ b/README.md @@ -17,7 +17,7 @@ ## Introduction -Through the Chat SDK for Javascript, you can efficiently integrate real-time chat into your client app. On the client-side implementation, you can initialize, configure and build the chat with minimal effort. On the server-side, Sendbird ensures reliable infra-management services for your chat within the app. This **read.me** provides the Chat SDK’s structure, supplementary features, and the installation steps. +Through Sendbird Chat SDK for Javascript, you can efficiently integrate real-time chat into your client app. On the client-side implementation, you can initialize, configure and build the chat with minimal effort. On the server-side, Sendbird ensures reliable infra-management services for your chat within the app. This **read.me** provides the Chat SDK’s structure, supplementary features, and the installation steps. ### How it works @@ -160,7 +160,7 @@ Or download the latest Chat SDK for JavaScript from the following link if you do - https://github.com/sendbird/Sendbird-SDK-JavaScript -> Note: You should also add axios library into the script tag before the Sendbird library inclusion since v3.0.127. You can host the library or utilize the CDN as the library refers to it. The following serves as examples. +> **Note**: You should also add `axios` library into the @@ -183,7 +183,7 @@ You need to initialize a `sb` instance before authentication. Initialization bin To initialize a `Sendbird` instance, pass the `App_ID` of your Sendbird application in the dashboard as an argument to a parameter in the `new Sendbird()` method. As the `new SendBird()` can only be a single instance, call it only a single time across your Javascript client app. Typically, initialization is implemented in the user login screen. -> Note: It is recommended to initialize the Chat SDK at the top of your Javascript file. +> **Note**: It is recommended to initialize the Chat SDK at the top of your Javascript file. ```javascript var sb = new SendBird({appId: APP_ID}); @@ -220,7 +220,7 @@ Sendbird prefers that you pass the APP ID through the use of a token, as it ensu sb.connect(USER_ID, ACCESS_TOKEN, function(user, error) {}); ``` -#### Tips for user account security +#### - Tips for user account security From **Settings** > **Application** > **Security** > **Access token permission** setting in your dashboard, you can prevent users without an access token from logging in to your Sendbird application or restrict their access to **read** and **write** messages. @@ -280,7 +280,7 @@ Sendbird wants customers to be confident that Chat SDK will be useful, work well XSS (Cross-site scripting) is a type of computer security vulnerability. XSS helps attackers inject client-side scripts into web pages viewed by other users. Users can send any type of string data without restriction through Chat SDKs. Make sure that you check the safety of received data from other users before rendering it into your DOM. -> Note: For more about the XSS prevention, visit the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) page. +> **Note**: For more about the XSS prevention, visit the [OWASP's XSS Prevention Cheat Sheet](https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html) page. ### Use functions of Sendbird objects with Immutable-js @@ -317,7 +317,7 @@ sb.connect(USER_ID, function(error, user) {}); The `sb.setErrorFirstCallback(false)` returns callbacks to their original parameter ordering, with errors last. -> Note: Go to the [Event handler](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler) page to learn more about the usages of the Chat SDK's handlers and callbacks. +> **Note**: Go to the [Event handler](https://sendbird.com/docs/chat/v3/javascript/guides/event-handler) page to learn more about the usages of the Chat SDK's handlers and callbacks.
@@ -325,11 +325,9 @@ The `sb.setErrorFirstCallback(false)` returns callbacks to their original parame ### v3.0.138(OCT 30, 2020) -If you want to check the record of other version, go to [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md). +If you want to check the record of other versions, go to [Change Log](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md). - Added `getAllowFriendDiscovery()` and `setAllowFriendDiscovery()` in `SendBird`. - If it's set to **false**, `uploadFriendDiscoveries()` called by others does not add the user as a friend. - Set `size` in `FileMessage` automatically. - Improved stability. - -### [More changelogs](https://github.com/sendbird/Sendbird-SDK-JavaScript/blob/master/CHANGELOG.md) From b6bd2552cca7078e5d05fee7049b01044101547a Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 24 Nov 2020 17:33:42 +0900 Subject: [PATCH 18/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0f53f92..bdc9397 100644 --- a/README.md +++ b/README.md @@ -31,7 +31,7 @@ Find out more about Sendbird Chat for JavaScript on [Chat SDK for JavaScript doc ## Before getting started -This section shows you the prerequisites you need to check for using Sendbird Chat SDK for JavaScript. +This section shows you the prerequisites you need to check for using Sendbird Chat SDK for JavaScript. If you have any comments or questions regarding bugs and feature requests, visit [Sendbird community](https://community.sendbird.com). ### Supported browsers From 438f93376bd3112c0bc9b2e4097d55e1a4830946 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 24 Nov 2020 18:11:50 +0900 Subject: [PATCH 19/21] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index bdc9397..5ccf721 100644 --- a/README.md +++ b/README.md @@ -71,6 +71,8 @@ You can also download the sample using a git command: $ git clone https://github.com/sendbird/SendBird-JavaScript ``` +> **Note**: Find out more about Sendbird SDK for JavaScript samples on https://sample.sendbird.com + ### Different sample projects For JavaScript, Sendbird supports a variety of sample projects. Their installation procedures are detailed as below: From ed502d669425884f71dd7577f8b80c92a3ee0b2d Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 24 Nov 2020 18:14:02 +0900 Subject: [PATCH 20/21] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 5ccf721..3146fc8 100644 --- a/README.md +++ b/README.md @@ -152,10 +152,10 @@ var sb = new SendBird({ appId: "APP_ID" }); If you have trouble importing Sendbird, please check your `tsconfig.json` file and change the value of `allowSyntheticDefaultImports` to true in `compilerOptions`. -- **Bower** +- **Yarn** ```bash -$ bower install sendbird +$ yarn add sendbird ``` Or download the latest Chat SDK for JavaScript from the following link if you do not want to use package manager From 921731beab2e014818a1b8176f29416b71176689 Mon Sep 17 00:00:00 2001 From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com> Date: Tue, 24 Nov 2020 18:14:58 +0900 Subject: [PATCH 21/21] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3146fc8..9f9faa5 100644 --- a/README.md +++ b/README.md @@ -132,7 +132,7 @@ Regardless of the platform, only one Sendbird application can be integrated per #### Step 2: Install the Chat SDK -If you’re familiar with using external libraries or SDKs, installing the Chat SDK is simple.You can install the Chat SDK with package manager npm or Bower by entering the command below on the command line. +If you’re familiar with using external libraries or SDKs, installing the Chat SDK is simple.You can install the Chat SDK with package manager `npm` or `yarn` by entering the command below on the command line. - **Npm**