Skip to content

Setup and initialization

A basic understanding of JavaScript, HTML and CSS are needed to follow this tutorial.

Set up a dataBridges account and app

Before we jump right into setting up an application with dataBridges, you’ll need to create a dataBridges account and app, if you don’t already have one:

  1. Sign up for a dataBridges account.

  2. Create a new app by selecting Apps and clicking Create New button.

  3. You can retrieve your app credentials from the App Keys tab.

HTML Skeleton

First thing to do is to create an HTML file with the application name. We will also be adding dataBridges dependencies and other required dependencies in this skeleton. Add below code to the HTML file.

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <meta http-equiv='X-UA-Compatible' content='IE=edge'>
        <title>dataBridges Browser Client</title>
        <meta name='viewport' content='width=device-width, initial-scale=1'>
        <style>
            html, body {
                height: 98%;
                font-family: "Raleway", Arial, Helvetica, sans-serif;
            } 
            #loggerdiv {
                font-size: 0.755rem;
                font-family: 'Courier', sans-serif;
                height: 100%;
                width: 100%;
                border: thin solid rgb(216, 215, 215);
                overflow: scroll;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
                background-color: #000;
                color: #79de4a;
            }
        </style>
    </head>
    <body>
        <label>Log Board</label>
        <div id="loggerdiv"></div>

        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/databridges.sio.lib.min.js" integrity="sha384-M7evb/lzD8eSwiyBjZID0EhnKjDlCt/Ijep4JaEFEBGiQPqDYwaF+SOyliAJUWzv" crossorigin="anonymous"></script>
        <script language="javascript">
            // Common logit function for showing all logs in a div.
            const logit = (data) => {
                let prnStr = '';
                for (let i = 0; i < data.length; i++) {
                    prnStr = prnStr + '&#09;' + data[i];
                }
                $('#loggerdiv').append(prnStr + '<br />');
            }

            $(document).ready(function () {

            });

        </script>
    </body>
</html>