使用 Supabase 的 Realtime + Storage 非常方便呢

文章目录

  • (一)Supabase
  • (二)Realtime(消息)
    • (2.1)Python 消息订阅
    • (2.2)JavaScript 消息订阅
  • (三)Storage(存储)
    • (3.1)Python 存储操作
    • (3.2)JavaScript 存储操作

(一)Supabase

在《用 Next.js 和 Supabase 进行“全栈”开发的入门》中,我搭(抄)建(袭)了一个类似论坛雏形的东西。
后端用了Supabase,但例子中仅限于数据库CRUD(增删改查)的操作。
如果用Supabase只是Postgres用数据库,那么就称不上BaaS了吧😄
因为万恶的简称会重复,网上搜BaaS会出来:羊叫声区块链即服务蔚来汽车租电模式绑定为服务……所以……

概念:

  • 💡BaaS = Backend as a Service,就是一种云服务,旨在为移动和 Web 应用提供后端云服务,包括云端数据/文件存储、账户管理、消息推送等等……

打开Supabase的仪表板,除了已经用到的数据库和认证以外,还有3个主要内容:

  • Realtime
  • Storage
  • Edge Functions

(二)Realtime(消息)

简单说Supabase的Realtime就是实时的消息推送。
当我们把一张表的Realtime选项开启后,这张表数据的增删改操作,都会产生消息,并且推送到每个订阅了这个频道消息的客户端上。

⚠️ 注意: Realtime是基于WebSocket。不能保证每条消息都送到,所以你的应用如果有严格的要求,就不能完全依靠Realtime的推送,比如也使用长轮询Long Polling

图)表开启Realtime:
在这里插入图片描述

图)设置RealTime涉及的操作。
在这里插入图片描述

调试时我们可以在Supabase仪表板中作为客户端,订阅一个Realtime的频道。
实际使用时,我们需要用到Supabase社区项目来连接和使用消息订阅,如下。

(2.1)Python 消息订阅

见:🔗Supabase社区项目

from realtime.connection import SocketSUPABASE_ID = "你的ID"
API_KEY = "你的匿名Key或系统Key"def callback1(payload):print("Callback 1: ", payload)if __name__ == "__main__":URL = f"wss://{SUPABASE_ID}.supabase.co/realtime/v1/websocket?apikey={API_KEY}&vsn=1.0.0"s = Socket(URL)s.connect()channel_1 = s.set_channel("realtime:*")channel_1.join().on("UPDATE", callback1)s.listen()

(2.2)JavaScript 消息订阅

见:🔗Supabase社区项目

import { RealtimeClient } from '@supabase/realtime-js'const client = new RealtimeClient(REALTIME_URL, {params: {apikey: API_KEY},
})const channel = client.channel('test-channel', {})channel.subscribe((status, err) => {if (status === 'SUBSCRIBED') {console.log('Connected!')}if (status === 'CHANNEL_ERROR') {console.log(`There was an error subscribing to channel: ${err.message}`)}if (status === 'TIMED_OUT') {console.log('Realtime server did not respond in time.')}if (status === 'CLOSED') {console.log('Realtime channel was unexpectedly closed.')}
})

(三)Storage(存储)

简单说Supabase提供的文件存储是桶buckets,可以当成一个盘符,一个挂载的设备。
在一个bucket里面,可以创建目录和文件。

⚠️ 注意:公开的桶 public bucket ,仅表示它有一个可用于下载文件的公有 URL。
所有其他关于存储桶或文件的操作,都要求您满足该存储桶上的存储策略(权限)。
另请注意,您应该对所有其他操作使用正常路径,而不是包含“public”的公共 URL 路径。

怪不得找不到桶……

(3.1)Python 存储操作

见:🔗Supabase社区项目

初始化客户端

import os
from supabase import create_client, Clienturl: str = os.environ.get("SUPABASE_URL")
key: str = os.environ.get("SUPABASE_KEY")
supabase: Client = create_client(url, key)

下载文件

bucket_name: str = "photos"
data = supabase.storage.from_(bucket_name).download("photo1.png")

上传文件

bucket_name: str = "photos"
new_file = getUserFile()
data = supabase.storage.from_(bucket_name).upload("/user1/profile.png", new_file)

删除文件

bucket_name: str = "photos"
data = supabase.storage.from_(bucket_name).remove(["old_photo.png", "image5.jpg"])

列举全部文件

bucket_name: str = "charts"
data = supabase.storage.from_(bucket_name).list()

移动/重命名文件

bucket_name: str = "charts"
old_file_path: str = "generic/graph1.png"
new_file_path: str = "important/revenue.png"
data = supabase.storage.from_(bucket_name).move(old_file_path, new_file_path)

(3.2)JavaScript 存储操作

见:🔗Supabase项目

下载文件

const { data, error } = await supabase.storage.from('avatars').download('folder/avatar1.png')

上传文件

const avatarFile = event.target.files[0]
const { data, error } = await supabase.storage.from('avatars').upload('public/avatar1.png', avatarFile, {cacheControl: '3600',upsert: false})

删除文件

const { data, error } = await supabase.storage.from('avatars').remove(['folder/avatar1.png'])

列举全部文件

const { data, error } = await supabase.storage.from('avatars').list('folder', {limit: 100,offset: 0,sortBy: { column: 'name', order: 'asc' },})

获得文件公开URL

const { data } = supabase.storage.from('public-bucket').getPublicUrl('folder/avatar1.png')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/333978.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CI/CD:持续集成/持续部署

1. 安装docker、docker-compose # 安装Docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo sed -i sdownload.docker.commirrors.aliyun.com/docker-ce /…

『ZJUBCA Weekly Feed 07』MEV | AO超并行计算机 | Eigen layer AVS生态

一文读懂MEV:区块链的黑暗森林法则 01 💡TL;DR 这篇文章介绍了区块链中的最大可提取价值(MEV)概念,MEV 让矿工和验证者通过抢先交易、尾随交易和三明治攻击等手段获利,但也导致网络拥堵和交易费用增加。为了…

c++(四)

c(四) 运算符重载可重载的运算符不可重载的运算符运算符重载的格式运算符重载的方式友元函数进行运算符重载成员函数进行运算符重载 模板定义的格式函数模板类模板 标准模板库vector向量容器STL中的listmap向量容器 运算符重载 运算符相似,运…

Android刮刮卡自定义控件

效果图 刮刮卡自定义控件 import android.content.Context; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.Path; import android.graphics.PorterDuff; import …

Linux--进程间通信(1)(匿名管道)

目录 1.了解进程通信 1.1进程为什么要通信 1.2 进程如何通信 1.3进程间通信的方式 2.管道 2.1管道的初步理解 2.2站在文件描述符的角度-进一步理解管道 2.3 管道的系统调用接口(匿名管道) 2.3.1介绍接口函数: 2.3.2编写一个管道的代…

AI Agent教育行业落地案例

【AI赋能教育】揭秘Duolingo背后的AI Agent,让学习更高效、更有趣! ©作者|Blaze 来源|神州问学 引言 随着科技的迅猛发展,人工智能技术已经逐步渗透到我们生活的各个方面。而随着AI技术的广泛应用,教育培训正引领着一场新的…

微软语音使用小计

简介 使用微软语音可以实现语音转文字和文字转语音。测试了下,使用还是挺方便的。 使用微软语音有两种方式。一种是使用命令行的形式,另一种是调用SDK的方式。 适合使用语音 CLI 的情况: 想在极少设置且无需编写代码的情况下试验语音服务…

Vulnhub靶机 whowantsobeking :1 打靶 渗透详细过程(萌新)

Vulnhub靶机搭建配置 先搭建vulnhub靶机:https://www.vulnhub.com/entry/who-wants-to-be-king-1,610/ 下载镜像之后whowantsobeking.ova后,用VMware Workstation Pro打开依次点击文件-打开,选择我们刚才下载的ova文件打开,修改…

JavaWeb开发 2.Web开发 Web前端开发 ①介绍

内心一旦平静,外界便鸦雀无声 —— 24.5.27 一、初识Web前端 网页有哪些部分组成? 文字、图片、音频、视频、超链接 ...网页,背后的本质是什么? 前端代码前端的代码是如何转换成用户眼中的网页的? 通过浏览器转化(解析和渲染)成用户看…

表空间[MAIN]处于脱机状态

达梦数据库还原后&#xff0c;访问数据库报错&#xff1a;表空间[MAIN]处于脱机状态 解决方法&#xff1a; 1&#xff1a;检查备份文件 DMRMAN 中使用 CHECK 命令对备份集进行校验&#xff0c;校验备份集是否存在及合法。 ##语法&#xff1a;CHECK BACKUPSET <备份集目录…

小识MFC,一套设计优雅与不优雅并存的类库----小话MFC(2)

Q1&#xff1a; CPoint继承于POINT&#xff0c;这样有什么好处&#xff1f; A&#xff1a; 继承的一个最基本的好处当然就是减少代码量。CPoint和POINT内部数据一样&#xff0c;只是一个提供了更多的方法来操作对象。 typedef struct tagPOINT {LONG x;LONG y; } POINT, *P…

小程序大能量:盲盒平台搭建与营销策略

一、引言 在移动互联网的浪潮下&#xff0c;小程序以其轻量级、即用即走的特点&#xff0c;成为了商家与消费者沟通的新桥梁。盲盒经济作为近年来兴起的消费趋势&#xff0c;结合小程序平台&#xff0c;不仅为用户带来了全新的购物体验&#xff0c;也为商家带来了更多的商业机…

【管理咨询宝藏115】某大型电力集团5年战略发展报告终稿

本报告首发于公号“管理咨询宝藏”&#xff0c;如需阅读完整版报告内容&#xff0c;请查阅公号“管理咨询宝藏”。 【管理咨询宝藏115】某大型电力集团5年战略发展报告终稿 【格式】PDF版本 【关键词】战略规划、大型国企、战略报告 【核心观点】 - 战略领导人敏锐的直觉和城…

【乐吾乐3D可视化组态编辑器】模型类型与属性

编辑器地址&#xff1a;3D可视化组态 - 乐吾乐Le5le 本章主要为您介绍模型的属性功能。 一个模型至少会包含一个节点&#xff08;Node&#xff09;&#xff0c;从节点类型上可以分为转换节点&#xff08;TransformNode&#xff09;、网格&#xff08;Mesh&#xff09;、实例网…

5.27作业

定义自己的命名空间my_sapce&#xff0c;在my_sapce中定义string类型的变量s1&#xff0c;再定义一个函数完成对字符串的逆置。 #include <iostream> #include <string.h>using namespace std; namespace my_space {string s1;void RevString(string &s1); } v…

OrangePi AIpro 开箱初体验及语音识别样例

OrangePi AIpro 开箱初体验及语音识别样例 一、 前言 首先非常感谢官方大大给予这次机会&#xff0c;让我有幸参加此次活动。 OrangePi AIpro联合华为精心打造&#xff0c;采用昇腾AI技术路线&#xff0c;具体为4核64位处理器AI处理器&#xff0c;集成图形处理器&#xff0c;…

【JavaScript】P3 JavaScipt 注释方法、结束符、输入输出

小结&#xff1a; Js 注释&#xff1a; 单行注释&#xff1a;//多行注释&#xff1a;/* */ Js 结束符&#xff1a; 分号; 可以加也可以不加 Js 输入输出&#xff1a; 输入&#xff1a;prompt()输出&#xff1a;document.write() 在页面中打印&#xff0c;console.log() 在控制…

浅谈金融行业数据安全分类分级

数据安全管理是一项从上而下的、多方配合开展的工作。在进行数据安全管理组织架构建设时&#xff0c;需要从上而下建设&#xff1b;从而全面推动数据安全管理工作的执行和落地&#xff1b;以保证数据安全的合法合规、并长效推动业务的发展和稳定运行。 金融行业机构应设立数据…

【Sql Server】随机查询一条表记录,并重重温回顾下存储过程的封装和使用

大家好&#xff0c;我是全栈小5&#xff0c;欢迎来到《小5讲堂》。 这是《Sql Server》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 前言随机查询语…

自定义CSS属性(@property)解决自定义CSS变量无法实现过渡效果的问题

且看下面的代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>demot</title&g…