MENU:   HOME  ·  SERVER  ·  APPLICATION  ·  CONSOLE


Vimeo Video Tutorials ( HD )      Twitter Follow Updates @socketbug_dev      Support Support & Feature Requests


Socketbug Logo

License Socketbug is licensed under the LGPL v3 license.

Socketbug Application Installation Video

Vimeo Watch our Video Tutorial on How to do a Socketbug Application Installation

Then you can follow along below ;)

Installing Socketbug - The Application

If you have not already setup your Socketbug Server, you should DO THIS FIRST.

With the Socketbug Server up and running, it’s time to connect your Mobile Web Application.

To do this you will need to use the Socketbug Client Side code. This can be on the same machine that has your server running on it, but it certainly does not have to be.

The purpose of the Client Application code is for your Mobile Web Applications to have a place to connect to a central location that will handle communication with the Socketbug Server… which may very well be located on a completely different server. How you set this up is entirely up to you.

#1 Setting up the Socketbug Client Application

To connect your Application to Socketbug, you will need public access to the client folder contained in the Socketbug Repository.

This can be achieved by Hosting the Client Application Code on Your:

  1. Local Development Machine

  2. Central Server

  3. Content Distribution Network ( CDN )

The code that needs to be copied over from the Socketbug Repository is located in the ./client/application/ folder.

If you do not already have a copy of the Socketbug code, you can download the code to a folder of your choice.

If you are running a local server, like Apache, you may want to stick Socketbug in your local servers Document Root.

The Document Root is what is shown when you go to http://localhost/ on your machine. So it might be nice to setup Socketbug in http://localhost/socketbug/ .

If you do not know where your Document Root is, here are a few common locations for some popular Programs:

XAMPP:

MAMP:

So let’s go ahead an assume you need to download Socketbug, and that you want to stick it in your Document Root. Also, just for this example, let’s say your Document Root is /var/www/html, as that is pretty common on some servers.

Now, let’s download Socketbug:

cd /var/www/html
git clone https://github.com/manifestinteractive/socketbug.git

A new folder was created in your Document Root called socketbug and you should be able to access the folder http://localhost/socketbug/ . If you have directory listing turned off, you can got to the example folder to verify you downloaded Socketbug to the correct folder:

http://localhost/socketbug/client/example

#2 Connect Your Application to Socketbug

To connect your application to Socketbug, you will need to copy the following code into the HTML of your Application directly before the closing body tag </body>. The FULL EXAMPLE contains the entire code you will need with all possible variables that can be set. The MINIMUM REQUIRED EXAMPLE contains the entire code you will need with everything that is required to be set for Socketbug to run.

Note: For this example, we are still assuming your Socketbug Client code is located at http://localhost/socketbug/ . You will need to update this if it is not your actual location.

You only need to copy one of these examples:

FULL EXAMPLE:

<script type="text/javascript">
var _sbs = _sbs || {

    'version': '0.2.0',
    'host': 'http://localhost',
    'port': 8080,
    'group_id': '4704808A-80A9-6DD3-341F-E18A3F00563A',
    'group_name': 'Socketbug Demo Group',
    'application_id': '5E3E8FB6-86CF-6BF8-B4C4-6B2497BC388C',
    'application_name': 'Socketbug Demo Application',
    'debug_level': 4,
    'helpers': [],
    'libraries': [],
    'plugins': [],
    'connect_callback': socketbug_connect_callback,
    'disconnect_callback': socketbug_disconnect_callback,
    'message_callback': socketbug_message_callback

};
</script>
<script type="text/javascript" src="http://localhost/socketbug/client/application/sb.js" async></script>

MINIMUM REQUIRED EXAMPLE:

<script type="text/javascript">
var _sbs = _sbs || {

    'version': '0.2.0',
    'host': 'http://localhost',
    'port': 8080,
    'group_id': '4704808A-80A9-6DD3-341F-E18A3F00563A',
    'group_name': 'Socketbug Demo Group',
    'application_id': '5E3E8FB6-86CF-6BF8-B4C4-6B2497BC388C',
    'application_name': 'Socketbug Demo Application',
    'debug_level': 4

};
</script>
<script type="text/javascript" src="http://localhost/socketbug/client/application/sb.js" async></script>

Before you try to connect, you will need to update some of the variables. Here is an explanation of what each of them are, and what they do in Socketbug. The ones labeled as REQUIRED are just that. Socketbug will fail if these are not set. The ones labeled OPTIONAL can be left out entirely with no issues.

There are only two more items that need you attention. The last line that loads the Javascript file has to Paths that need to be set correctly. Here is what you are looking for:

<script type="text/javascript" src="http://localhost/socketbug/client/application/sb.js" async></script>

That parts that need your attention are:

Can I See an Example?

We have set up an example Application that contains the Javascript Code you will need to connect to any Socketbug Client. You can find the example in the ./client/example/ folder. Just open the index.html file and look at the source code for a thorough example of how to set everything up.

You can access the example from your web browser after downloading the code ( as instructed above ) by going to:

http://localhost/socketbug/client/example

#3 Run Your Application

OK, now that you have setup your Application with the Socketbug Javascript, you are ready to connect.

If you have set a _sbs.connect_callback callback handler in your javascript, you will be able to capture when Socketbug made a successful connection.

Another way to tell you are connected is to access the Socketbug Server running in a Terminal window and you should see a “Handshake” being made when your device connects.

So Now What?!?

That that your application code is up and running, you can use the Socketbug Console to communicate with it. You will be able to do some pretty cool stuff, like:

Ideally, you can setup your application to just use try/catch blocks in your Javascript to capture any Javascript errors.

Socketbug is already setup to Capture ALL debug events.

So if you are already using things like …

… you will be pleased to know that these messages will automatically be sent to Socketbug.

So now you just need to Install the Socketbug Console.