Install SQLite Cloud JavaScript Client Library via CDN #24

Diwannist · 2024-07-05T13:11:59Z

Diwannist
Jul 5, 2024

Install @sqlitecloud/drivers via CDN links

For example <script src="https://cdn.jsdelivr.net/npm/@sqlitecloud/drivers"></script>

PS - let us connect to SQLite Cloud through the browser (I don't know if this is already here or not)

EDIT: I further checked the SQLite Cloud docs and there is no mention of "cdn" or "content delivery network"

Answered by TizianoT

Jul 5, 2024

Hi, thank you for your question.

To use the driver from the CDN, you can include the following script in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@sqlitecloud/drivers@1.0.178/lib/sqlitecloud.drivers.js"></script>

You can find a working example demonstrating how to use the driver in a browser here: Working Example. In this example, the driver is served locally.

View full answer

TizianoT · 2024-07-05T16:34:36Z

TizianoT
Jul 5, 2024
Collaborator

Hi, thank you for your question.

To use the driver from the CDN, you can include the following script in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@sqlitecloud/drivers@1.0.178/lib/sqlitecloud.drivers.js"></script>

You can find a working example demonstrating how to use the driver in a browser here: Working Example. In this example, the driver is served locally.

1 reply

Diwannist Jul 5, 2024
Author

Hello, thank you for your reply!

I'm getting a 404 error message for the working example:

TizianoT · 2024-07-06T16:40:18Z

TizianoT
Jul 6, 2024
Collaborator

Hi, here is the code of the example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Driver | SQLite Cloud</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="sqlitecloud.drivers.js"></script>
</head>

<body class="p-4">
  <h1>SQLite Cloud Drivers</h1>
  <div class="pb-6 text-sm">
    <a href="https://www.npmjs.com/package/@sqlitecloud/drivers">npm add @sqlitecloud/drivers</a>
  </div>

  <!-- Add the text field and button here -->
  <div class="pb-2">
    <div class="text-xs w-12">databaseUrl</div>
    <input type="text" id="connectionStringInput" placeholder="Type your connection string here"
      value="sqlitecloud://admin:password@host.sqlite.cloud:8860/chinook.sqlite"
      class="border rounded w-full pl-2 pr-2 mb-2" />
    <div class="text-sm w-12">sql:</div>
    <input type="text" id="messageInput" placeholder="Type your SQL query" value="select * from customers limit 3"
      class="border rounded w-full pl-2 pr-2 mb-2" />
  </div>
  <button id="sendButton" class="border rounded w-32 mb-6">query</button>

  <h2 class="pb-4">Results:</h2>
  <ul id="messages" class="pl-4"></ul>

  <script type="module">
    // import { io } from 'https://cdn.socket.io/4.7.4/socket.io.esm.min.js'
    const status = document.getElementById('status')
    const messages = document.getElementById('messages')

    // connection string is stored in local storage so you don't have to type it every time
    let connectionString = localStorage.getItem('connectionString')
    if (!connectionString) {
      connectionString = 'sqlitecloud://admin:password@host.sqlite.cloud:8860/database.db'
      localStorage.setItem('connectionString', connectionString)
    } else connectionStringInput.value = connectionString
    connectionStringInput.addEventListener('change', () => {
      localStorage.setItem('connectionString', connectionStringInput.value)
    })

    const appendMessage = content => {
      const item = document.createElement('li')
      item.classList.add('pb-4')
      item.classList.add('text-sm')
      item.textContent = content
      messages.prepend(item)
    }

    // socket is connected the first time the sql button is clicked and stays connected until the page is refreshed
    var database = null

    sendButton.addEventListener('click', () => {
      if (!database) {
        // connect via websocket to the gateway on the same server
        const connectionConfig = {
          // all lowercase
          gatewayurl: `${window.location.protocol === 'https:' ? 'wss' : 'ws'}://${window.location.hostname}:4000`,
          connectionstring
        }

        database = new window.sqlitecloud.Database(connectionConfig, error => {
          if (error) {
            database = null
            appendMessage(`connection error:  ${error}`)
          } else {
            appendMessage(`connected`)
          }
        })
      }

      const sql = messageInput.value
      const startTime = Date.now()

      // send an async sql request to the server
      database.all(sql, (error, rows) => {
        if (error) {
          console.error(`sql: ${sql}, error: ${error}`, error)
          appendMessage(`sql: ${sql}, error: ${error}`)
        } else {
          console.debug(`sql: ${sql}, (${Date.now() - startTime}ms)`, rows)
          appendMessage(JSON.stringify(rows))
        }

0 replies

Navigation Menu

SQLite Cloud

Install SQLite Cloud JavaScript Client Library via CDN #24

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 2 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

SQLite Cloud

Install SQLite Cloud JavaScript Client Library via CDN #24

Uh oh!

Uh oh!

Diwannist Jul 5, 2024

Replies: 2 comments · 1 reply

Uh oh!

TizianoT Jul 5, 2024 Collaborator

Uh oh!

Diwannist Jul 5, 2024 Author

Uh oh!

TizianoT Jul 6, 2024 Collaborator

Diwannist
Jul 5, 2024

Replies: 2 comments 1 reply

TizianoT
Jul 5, 2024
Collaborator

Diwannist Jul 5, 2024
Author

TizianoT
Jul 6, 2024
Collaborator