Skip to content

Commit 6f56887

Browse files
author
Oleksandr Shvetsov
committed
Added README and LICENSE information
0 parents  commit 6f56887

File tree

2 files changed

+154
-0
lines changed

2 files changed

+154
-0
lines changed

LICENSE.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
For license information, please visit: https://quickblox.com/terms-of-use/

README.md

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
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

Comments
 (0)