用 supabase实时数据库实现协作

hotqin888

发布于 2022-12-02 18:47:01

6.6K0

发布于 2022-12-02 18:47:01

为了实现web上的实时效果和多用户协作，传统的技术手段有哪些呢？实时效果，在vue上是可以实现的。而协作效果，就要用websocket等技术进行广播。我理解的实时数据库，是不是结合了这2种功能的？阅读了socket.io，google的firebase在线实时数据库，它功能

Firebase功能

实时数据库 - Firebase支持JSON数据，每次更改后，连接到它的所有用户都会收到实时更新。
身份验证 - 可以使用匿名，密码或不同的社交身份验证。
托管主机 - 应用程序可以通过安全连接部署到Firebase服务器。

//更多请阅读：Firebase简介 -FireBase教程实时数据库就是监听数据更新，然后广播到所有连接的用户。而我们现在已经无法连接google的任何服务了，所以国内的memfiredb是它的替代品，memfiredb使用了开源supabase这个firebase的替代品，但api接口不一样，挺遗憾了。但感觉supabase的接口更加接近sql，supabase使用postgres数据库，它不是一个最新的技术，它在已有的技术基础上，进行组合，实现了实时数据库的功能。有了实时数据库，据说可以比较简单地实现一些功能了。最典型的是聊天室了。

暂时就了解这么多了。

https://firebase.google.cn/docs/reference/js/v8/firebase.database.Reference#onceReference for Reference

https://firebase.google.cn/docs/reference/js/v8/firebase.database.Reference#once Firebase简介 -FireBase教程

下面以supabase为例进行验证。

Reference Documentation | SupabaseReference documentation for the official Supabase client libraries, APIs, and tools.

https://supabase.com/docs/reference

首先在 Supabase

supabase项目里的数据表

再编写页面代码如下：

<html>
<button onclick="insertdata()">insert</button>
</html>
 <!-- 首先引入supabase客户端，这里采用cdn引入 -->
 <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
<script>
// 然后把url和秘钥复制进去可以进行数据库链接
const { createClient } = supabase
// const _supabase = createClient('url', 'anon_key')
// 下面这个是memfiredb的登录信息
// const _supabase = createClient('https://ccuon0a5g6h3ij.baseapi.memfiredb.com', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoiYW5vbiIsImV4cCI6MzIwMjg5Nzg1MiwiaWF0IjoxNjY0OTc3ODUyLCJpc3MiOiJzdXBhYmFzZSJ9.AeqPG73OPjekOxpCak8XBBAqP-wSk57XVQ')

// 下面这个是supabase的登录信息
const _supabase = createClient('https://gsglmaiuplauvkfjalkg.supabase.co', 'iJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImdzZ2xtYWl1cGxhdXZrZmphbGtnIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NjUwOTgxMjQsImV4cCI6MTk4MDY3NDEyNH0.wDlCSjtYZkGj9AhCSyIIfUbzYzOAF9_4hKKe')

// 进行数据库api操作
window.onload =async function(){
  // 查询
  const { data, error } = await _supabase
  .from('userdemo')
  .select(`
    id,
    name
  `)
  console.log('data ', data)

  // realtime
  const mySubscription = _supabase
  .from('userdemo')
  .on('INSERT', payload => {
    console.log('Change received!', payload)
  })
  .subscribe()
}

async function insertdata(){ 
  //插入数据
  const { data, error } = await _supabase
  .from('userdemo')
  .insert({id:7,name:'777'})
  console.log('data', data)
}
</script>

浏览器打开上述文件后，会连接websocket并返回信息：

{"event":"phx_reply","payload":{"response":{"postgres_changes":[{"id":102486372,"schema":"public","table":"userdemo"}]},"status":"ok"},"ref":"38","topic":"realtime:public:userdemo"}

返回查询信息：

[
    {
        "id": 1,
        "name": "qin"
    },
    {
        "id": 5,
        "name": "888"
    },
    {
        "id": 7,
        "name": "777"
    }
]

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2022-11-05，如有侵权请联系 cloudcommunity@tencent.com 删除

https