Write your First mesibo Enabled Application - Javascript
Estimated reading time: 4 minutes- Basic Concepts
- Real-Time Messaging
- Anatomy
- First App
- Android
- iOS
- Javascript
- C++
- Python
- Group Messaging
- Reading Messages
- Sync Messages
- Sending Media & Files
- Push Notification
- Voice & Video Calls
- Conferencing
- UI Modules
In this part, we will create a simple real-time app for the Web (Javascript).
Prerequisites
You MUST go through the following prerequisites before you read further.
- Read the First App Guide.
- Knowledge of Javascript
First Web (Javascript) App
Now let’s quickly start coding:
Add mesibo API for javascript in your code:
<script type="text/javascript" src="https://api.mesibo.com/mesibo.js"></script>
Initializing Mesibo
Before you send and receive real-time messages and calls, you need to initialize Mesibo. The initialization involves the following steps:
- Set your user credentials for authentication: access token using
setCredentials
and app ID usingsetAppName
- Set up Mesibo to invoke your listener class using
setListener
- Set up database to store sent and received messages using
setDatabase
(Optional) - Start Mesibo
Now, initialize mesibo like shown below
var demo_user_token = 'xxxxxxxxxxxxxxxxxxxx';
/* App ID used to create a user token. */
var demo_appid = 'web';
var api = new Mesibo();
api.setListener(new MesiboListener());
api.setAppName(demo_app_id);
api.setCredentials(demo_user_token);
api.setDatabase("mesibo");
api.start();
Implement MesiboListener to receive messages and status in real-time.
function MesiboListener() {
}
MesiboListener.prototype.Mesibo_OnConnectionStatus = function(status, value) {
console.log("TestNotify.prototype.Mesibo_OnConnectionStatus: " + status);
}
MesiboListener.prototype.Mesibo_OnMessageStatus = function(m) {
console.log("TestNotify.prototype.Mesibo_OnMessageStatus: from "
+ m.peer + " status: " + m.status);
}
MesiboListener.prototype.Mesibo_OnMessage = function(m, data) {
console.log("TestNotify.prototype.Mesibo_OnMessage: from " + m.peer);
}
That’s it - you are now ready to receive your first real-time message.
Testing your first application
- Compile and Run Application.
Mesibo_onConnectionStatus
should cycle through various status information. Finally, you should receivestatus=1
which indicates that your app is successfully connected to the mesibo real-time server and ready to send and receive real-time messages.- Since we do not have any other users right now, we will use mesibo console to send a test message. In a later section, we will learn how to send messages from the app itself.
- Go to Console ->Application->Users. You should see the user you have created.
- Go to user details by clicking the
Edit
button. Scroll down, you will see a section toMessage User
- Enter 1000 (or anything) in the
From
field, checkCreate This User
checkbox, type message and click onSend
.
- You will instantly receive this message in your mobile app in
Mesibo_onMessage
listener.
Sending Messages
In the previous section, we have used mesibo console to send a message. Now we will quickly learn how to send messages from the app itself. To send messages, we will use sendMessage
real-time API for which we will need destination user, message-id, and the message itself.
Invoke the following function anywhere from your code to send a text message. In a later section, we will learn how to send rich messages.
function sendTextMessage(to, message) {
var p = {};
p.peer = to;
p.flag = MESIBO_FLAG_DEFAULT;
var id = parseInt(Math.random()*10000);
api.sendMessage(p, id, message);
}
That’s it! Try it out by creating two instances of the app and send messages to each other by using the above function.
Download Sample Application
You can download the following sample applications to learn more:
First Mesibo Application - C/C++ >>
mesibo, android, ios