应用实战|微信小程序开发示例--多人聊天互动空间

news2025/7/17 0:06:25

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维),很大地降低开发者的使用门槛。

本示例是一个可以实现多人互动的角色扮演聊天室的微信小程序(web版传送门:Web开发示例–多人聊天互动空间),小程序后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:
其中使用到的MemFire Cloud功能包括:

  • 云数据库:存储聊天室小程序数据表的信息。
  • 即时API:创建数据表时会自动生成 API。
  • 云存储:存储用户发布帖子中的图片。
  • Realtime:轻松构建任何类型的实时应用程序

在这里插入图片描述

创建应用

目的:通过创建的一个MemFire Cloud应用来获得数据库、云存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。

登录MemFire Cloud, 在“我的应用”页面创建一个新应用

在这里插入图片描述

创建数据表

创建messages表

建表操作如下:

在这里插入图片描述

在“表编辑器”页面,点击“新建表”,创建messages表。messages表主要记录用户发送的每一条信息,表结构字段如下:

名称类型描述
idbigint主键,自动为列分配一个连续的唯一编号,唯一标识ID
usernamevarchar用户名
bgColorvarchar头像背景颜色
created_attimetamptz创建时间
texttext消息

sql建表语句

CREATE TABLE messages (
  id bigint GENERATED BY DEFAULT AS IDENTITY PRIMARY KEY,
  username VARCHAR NOT NULL,
  bgColor VARCHAR NOT NULL,
  text TEXT NOT NULL,
  timestamp timestamp default now() NOT NULL
);

创建策略

接下来,需要给messages表创建两条策略,分别是允许所有用户可以查询和插入messages表数据,在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:

alter table public.messages enable row level security;

-- 启用对所有用户的查询数据访问
create policy "Enable access to all users" on public.messages for
select using (true);

-- 启用对所有用户的插入数据访问
create policy "Enable insert for all users" on public.messages for
insert with check (true);

启用Realtime

常用的启用Realtime功能有两种方式:

①在表编辑器页面,创建数据表时,勾选“启用Realtime”,即可启用;

② 在“数据库->Replication”页面,启用Realtime,可以选择Realtime监听数据表的‘插入’、‘更新’、‘删除’、‘截断’操作,可以根据业务自身需求勾选,这里我们需要启用全部操作。点击‘1张表’按钮后,进入数据表列表,点击message表的开关按钮,启用Realtime功能。

在这里插入图片描述

创建bucket

1.新建images存储桶

点击‘存储’图标菜单,点击‘创建新bucket’,创建images存储桶

在这里插入图片描述

2.创建策略

接下来,给images存储桶创建一个策略,允许所有的用户在聊天中发送图片。

-- Secure the bucket
CREATE POLICY "允许任何用户发送图片1ffg0oo_0" ON storage.objects FOR INSERT TO public WITH CHECK (bucket_id = 'images' );

注册小程序

以上是我们在MemFire Cloud上配置的全部步骤,接下来是在微信开发者工具上操作了。

「如果您还未注册过小程序,请参考官方步骤注册小程序(只需要通过您的邮箱注册一个小程序获得一个appid,然后下载一个微信开发工具即可)」

用微信开发者工具点击导入项目

选择目录是下载好的小程序项目的目录,AppID为您在微信公众平台注册小程序获得的专属appid。

在这里插入图片描述

构建npm

在右侧详情里面的本地设置把“使用npm模块”和“不校验合法域名”勾上。

在这里插入图片描述

打开终端,在项目根目录下执行如下命令 (小程序需要的MemFire Cloud的微信小程序SDK已经存在package.json里,可以直接安装全局依赖)。

npm init
npm install

在这里插入图片描述

点击开发者工具中的菜单栏:工具 /构建 npm

这一步npm就构建完成了,我们需要的依赖也已经下载好了,根目录下会多出两个文件,如下图。

在这里插入图片描述

获取 API密钥

接下来需要创建一个可以访问应用程序数据的客户端,小程序使用了MemFire Cloud 微信小程序SDK包,使用他生态里提供的功能(登录、注册、增删改查等)去进行交互。创建一个可以访问微信小程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的首页去获取这两个参数然后配置到lib/supabase.js里面去。

lib/supabase.js

import { createClient } from 'supabase-wechat-stable-v2'
const url = ""
const key = ""

export const supabase = createClient(url, key)

回到MemFire Cloud首页,在应用/首页页面,获取服务地址以及token信息,只需要从首页中获取URL接口地址和anon的密钥。

在这里插入图片描述
「Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。」

编译小程序

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[Web]——限流

限流概念:什么是限流呢?限流是限制到达系统的并发请求数量,保证系统能够正常响应部分用户请求,而对于超过限制的流量,则通过拒绝服务的方式保证整体系统的可用性。限流的分类:根据作用范围可以分为单机限流和分布式限流…

Delphi 实现HTML邮件发送

在我们的邮箱里,经常收到HTML格式的邮件。每注册一个网站的时候,总会收到一些他们发来的邮件,打开一后发现和一个网页一样,有图片、链接、文字,甚至有的还有声音和视频和交互。那我们想知道我们怎么才可以给朋友发送这…

【FLY】Java知识点总结

目录认识Java概念图名词解释历史版本基础知识编程规范关键字数据类型运算符数组Stringequals与流程控制引用数据结构常用数据结构HashMapLinkedHashMapWeakHashMapIdentityHashMapEnumMapTreeMapCopyOnWriteArrayList面向对象类反射注解IO异常线程EffectiveJava8JVM运行时数据区…

MXNet的机器翻译实践《编码器-解码器(seq2seq)和注意力机制》

机器翻译就是将一种语言翻译成另外一种语言,输入和输出的长度都是不定长的,所以这里会主要介绍两种应用,编码器-解码器以及注意力机制。编码器是用来分析输入序列,解码器用来生成输出序列。其中在训练时,我们会使用一些…

centos7安装教程

1.点击文件–新建虚拟机 2.根据图片一直下一步或者做一些改动 3. 点击自定义硬件,点击浏览选中下载好的ISO文件 4.配置完成后启动虚拟机 5.选择语言,中英文都可,按需求选择 6.进行设置目标位置,配置分区 7.选择网络和主机名 8.配置…

.net6 web api使用EF Core,根据model类自动生成表

1.安装EF Core和mysql数据库的nuget包 Microsoft.EntityFrameworkCore Pomelo.EntityFrameworkCore.MySql 2.创建models文件夹,在文件夹下创建实体类 public class Users{public int Id { get; set; }[Column(TypeName "varchar(200)"), Required]publ…

Streaming systems 第三章中文

Chapter 3. Watermarks GIthub链接,欢迎志同道合的小伙伴一起翻译 到目前为止,我们一直从pipeline设计者或数据科学家的角度来研究流处理。第二章介绍了水印,对事件时间处理中发生的位置和处理时间中结果何时输出的基本问题做了一部分回答。…

制造企业数字化工厂建设步骤的建议

随着工业4.0、中国制造2025的深度推进,越来越多的制造企业开始迈入智能制造的领域,那数字工厂要从何入手呢? 数字工厂规划的核心,也正是信息域和物理域这两个维度,那就从这两个维度来进行分析,看如何进行数…

MySQL架构篇

一、进阶学习环境说明 1.1 MySQL服务器环境 Linux虚拟机:CentOS 7 MySQL:MySQL5.7.30 在Linux服务器中安装MySQL: ps.如果有自己的云服务器,可忽略前两步,直接进行第三步 1.2 服务器日志文件说明 MySQL是通过文件系统对…

论文投稿指南——中文核心期刊推荐(经济管理)

【前言】 🚀 想发论文怎么办?手把手教你论文如何投稿!那么,首先要搞懂投稿目标——论文期刊 🎄 在期刊论文的分布中,存在一种普遍现象:即对于某一特定的学科或专业来说,少数期刊所含…

什么蓝牙耳机好用戴着舒适?佩戴舒适音质好的无线蓝牙耳机

戴耳机时间长会导致耳朵痛,时间长了对我们的听力还有影响。一款佩戴舒适的耳机更贴合耳朵的设计,能够带来更加优质的聆听体验,下面甄选出了几款佩戴比较舒适的耳机推荐,音质还非常出众。 一、南卡小音舱蓝牙耳机 单耳重量&#x…

Protobuf 使用和原理

文章目录1. protobuf 简介1.1. 发展背景1.2. 优缺点1.2.1. 优点1.2.2. 缺点2. 使用2.1. 消息类型2.1.1. 字段限制2.1.2. 数据类型2.1.3. 分配字段编号2.1.4. 保留字段2.1.5. 默认字段规则2.1.6. 枚举2.2. Protobuf 工作流程2.2.1 编译proto文件2.3. 使用建议3. 原理3.1. 编码格…

抓包工具fiddler详细使用教程

各位做测试的同学想必对抓包工具fiddler并不陌生,但是很多同学可能没有总结过它的用法,下面我总结了fiddler一些常用的用法。 Web端抓包配置 打开Fiddler,Tools -> Fiddler Options -> HTTPS 配置完后记得要重启Fiddler 选中Decrpt …

第2章 线程安全与共享资源竞争

第2章 线程安全与共享资源竞争 2.1 synchronized同步介绍 synchronized要解决的是共享资源冲突的问题。当共享资源被任务使用时,要对资源提前加锁。所有任务都采用抢占模式,即某个任务会抢先对共享资源加上第一把锁。如果这是一个排他锁,…

汇编指令学习(LOOP)

一、xor异或操作,相同为0,不同为1xor eax,eaxeax异或eax,相同为0,并把结果存放到eax,简单说该语句就是想eax寄存器清零。二、ECX,计数器mov ecx,0x3将ecx寄存器设置为3三、DEC减一操作dec ecxecx寄存器的值…

扬帆优配|昔日白马股濒临退市,却6天5涨停!ST股突然集体爆发

尽管再度重申“公司股票将被停止上市”,但3月8日早间,*ST辅仁股价仍是在开盘后快速封住涨停板。这已是该公司近6个买卖日来,第5次呈现涨停。 无独有偶,8日早间ST东瀛也在此前多次涨停后,再度呈现近4%的涨幅。而就在7日…

图像的读取与保存

图像是由一个个像素点组成,像素点就是颜色点,而颜色最简单的方式就是用RGB或RGBA表示图像保存图像将像素信息按照 一定格式,一定顺序(即编码) 存在硬盘上的 二进制文件 中保存图像需要以下必要信息:1. 文件…

ChatGPT的N种用法(持续更新中。。。)

目录前言一、语法更正二、文本翻译三、语言转换3-1、Python-->JAVA四、代码解释-1五、代码解释-2六、修复代码错误六、作为百科全书七、信息提取七、好友聊天八、创意生成器8-1、VR和密室结合8-2、再结合AR九、采访问题9-1、采访问题清单9-2、采访问题清单并给出相应答案十、…

优思学院|六西格玛管理的核心理念是什么?

六西格玛管理是一种基于数据分析的质量管理方法,旨在通过降低过程的变异性来达到质量稳定和优化的目的。该方法以希腊字母“σ”为名,代表标准差,是衡量过程变异性的重要指标。 六西格玛管理的核心理念是“以客户为中心、以数据为基础、追求…

【JAVA程序设计】【C00114】基于SSM+微信小程序的食堂订餐点餐管理系统——有文档

基于微信小程序的食堂订餐点餐管理系统项目简介项目获取开发环境项目技术运行截图项目简介 基于ssm框架管理前端使用vue,用户使用微信小程序的食堂订餐点餐小程序共分为三个角色:系统管理员、商家、用户 管理员角色包含以下功能: 首页展示、…