|
| 1 | +# QuickBlox React Native SDK |
| 2 | + |
| 3 | +## Quic Start |
| 4 | +This guide demonstarates how to connect quickblox-react-native-sdk to your project and start development. |
| 5 | + |
| 6 | +### Create a new app in the Admin Panel |
| 7 | +Quickblox application includes everything that brings messaging right into your application - chat, video calling, users, push notifications, etc. To create a QuickBlox application, follow the steps below: |
| 8 | + |
| 9 | +1. Register a new account. Type in your email and password to sign in. You can also sign in with your Google or Github accounts. |
| 10 | +2. Create the app clicking **New app** button. |
| 11 | +3. Configure the app. Type in the information about your organization into corresponding fields and click **Add** button. |
| 12 | +4. Go to the screen with credentials. Locate **Credentials** groupbox and copy your **Application ID**, **Authorization Key**, and **Authorization Secret**. These data are needed to run your application on QuickBlox server. |
| 13 | + |
| 14 | +### Install React Native SDK into your app |
| 15 | +To connect QuickBlox to your app just add it into your `package.json` in the root directory of the project and enter the following code snippet: |
| 16 | + |
| 17 | +`npm install quickblox-react-native-sdk` |
| 18 | + |
| 19 | +iOS and Android have different dependencies systems. For that reason, you need to install dependencies in your iOS project. Just locate **ios/** folder in the root directory of the project and enter the following code snippet. |
| 20 | + |
| 21 | +`pod install` |
| 22 | + |
| 23 | +### Send your first message |
| 24 | +#### Initialize QuickBlox SDK |
| 25 | + |
| 26 | +Initialize the framework with your application credentials. Pass `appId`, `authKey`, `authSecret`, `accountKey` to the `QB.settings.init` method using the code snippet below. As a result, your application details are stored in the server database and can be subsequently identified on the server. |
| 27 | + |
| 28 | +```javascript |
| 29 | +const appSettings = { |
| 30 | + appId: '', |
| 31 | + authKey: '', |
| 32 | + authSecret: '', |
| 33 | + accountKey: '', |
| 34 | + apiEndpoint: '', // optional |
| 35 | + chatEndpoint: '' // optional |
| 36 | +}; |
| 37 | + |
| 38 | +QB.settings |
| 39 | + .init(appSettings) |
| 40 | + .then(function () { |
| 41 | + // SDK initialized successfully |
| 42 | + }) |
| 43 | + .catch(function (e) { |
| 44 | + // Some error occured, look at the exception message for more details |
| 45 | + }); |
| 46 | +``` |
| 47 | + |
| 48 | +#### Authorize user |
| 49 | + |
| 50 | +In order to use the abilities of QuickBlox SDK, you need to authorize your app on the server, log in to your account and create a session. To get it all done call `QB.auth.login` method and pass `login` and `password` parameters to it using the code snippet below. |
| 51 | + |
| 52 | +```javascript |
| 53 | +QB.auth |
| 54 | + .login({ |
| 55 | + login: 'yourlogin', |
| 56 | + password: 'yourpassword' |
| 57 | + }) |
| 58 | + .then(function (info) { |
| 59 | + // signed in successfully, handle info as necessary |
| 60 | + // info.user - user information |
| 61 | + // info.session - current session |
| 62 | + }) |
| 63 | + .catch(function (e) { |
| 64 | + // handle error |
| 65 | + }); |
| 66 | +``` |
| 67 | + |
| 68 | +**Note!** |
| 69 | +You must initialize SDK before calling any methods through the SDK except for the method initializing your QuickBlox instance. If you attempt to call a method without connecting, the error is returned. |
| 70 | + |
| 71 | +#### Connect to chat |
| 72 | + |
| 73 | +To connect to chat server, use the code snippet below: |
| 74 | + |
| 75 | +```javascript |
| 76 | +QB.chat |
| 77 | + .connect({ |
| 78 | + userId: 12345, |
| 79 | + password: 'passw0rd!' |
| 80 | + }) |
| 81 | + .then(function () { |
| 82 | + // connected successfully |
| 83 | + }) |
| 84 | + .catch(function (e) { |
| 85 | + // some error occurred |
| 86 | + }); |
| 87 | +``` |
| 88 | + |
| 89 | +#### Create dialog |
| 90 | + |
| 91 | +QuickBlox provides three types of dialogs: **1-1 dialog**, **group dialog**, and **public dialog**. Learn more about dialogs [here](/docs/react-native-messaging#section--dialogs-). |
| 92 | + |
| 93 | +Let’s create **1-1 dialog**. Call `QB.chat.createDialog` method and pass `QB.chat.DIALOG_TYPE.CHAT` parameter as a dialog type to it. `QB.chat.DIALOG_TYPE.CHAT` parameter allows specifying that two occupants are going to participate in the dialog. |
| 94 | + |
| 95 | +```javascript |
| 96 | +QB.chat |
| 97 | + .createDialog({ |
| 98 | + type: QB.chat.DIALOG_TYPE.CHAT, |
| 99 | + occupantsIds: [12345] |
| 100 | + }) |
| 101 | + .then(function (dialog) { |
| 102 | + // handle as necessary, i.e. |
| 103 | + // subscribe to chat events, typing events, etc. |
| 104 | + }) |
| 105 | + .catch(function (e) { |
| 106 | + // handle error |
| 107 | + }); |
| 108 | +``` |
| 109 | + |
| 110 | +#### Subscribe to receive messages |
| 111 | + |
| 112 | +QuickBlox provides message event handler allowing to notify client apps of events that happen on the chat. Thus, when a dialog has been created, a user can subscribe to receive notifications about new incoming messages. To subscribe to message events call `QB.chat.subscribeMessageEvents` method and pass `dialogId` parameter to it using the following code snippet. The `QB.chat.subscribeMessageEvents` method tells SDK to send events about new messages. |
| 113 | + |
| 114 | +```javascript |
| 115 | +QB.chat |
| 116 | + .subscribeMessageEvents({ dialogId: 'dsfsd934329hjhkda98793j2' }) |
| 117 | + .then(function () { }) |
| 118 | + .catch(function (e) { /* handle error */ }); |
| 119 | +``` |
| 120 | + |
| 121 | +To receive new messages, assign event handler using the code snippet below: |
| 122 | + |
| 123 | +```javascript |
| 124 | +const emitter = Platform.select({ |
| 125 | + android: DeviceEventEmitter, |
| 126 | + ios: new NativeEventEmitter(QB.chat) |
| 127 | +}) |
| 128 | +emitter.addListener(QB.chat.EVENT_TYPE.MESSAGE.RECEIVED_NEW_MESSAGE, event => { |
| 129 | + const { type, payload } = event |
| 130 | + // type - type of the event (string) |
| 131 | + // payload - new message (object) |
| 132 | +}) |
| 133 | +``` |
| 134 | + |
| 135 | +#### Send message |
| 136 | + |
| 137 | +When a dialog is created, a user can send a message. To create and send your first message, call `QB.chat.sendMessage` method and specify the `dialogId` and `body` parameters to it. Pass `saveToHistory` parameter if you want this message to be saved in chat history that is stored forever. |
| 138 | + |
| 139 | +```javascript |
| 140 | +const message = { |
| 141 | + dialogId: 'dsfsd934329hjhkda98793j2', |
| 142 | + body: 'Hey there!', |
| 143 | + saveToHistory: true |
| 144 | +}; |
| 145 | + |
| 146 | +QB.chat |
| 147 | + .sendMessage(message) |
| 148 | + .then(function () { /* send successfully */ }) |
| 149 | + .catch(function (e) { /* handle error */ }) |
| 150 | +``` |
| 151 | + |
| 152 | +## LICENSE |
| 153 | +For license information, please visit: https://quickblox.com/terms-of-use/ |
0 commit comments