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

article/2025/8/25 19:58:17

“超能力”数据库~拿来即用,应用开发人员再也不用为撰写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://chatgpt.dhexx.cn/article/7tv508KT.shtml

相关文章

微信小程序实现websocket及单人聊天功能

一、什么是websocket: WebSocket是HTML5下一种新的协议(websocket协议本质上是一个基于tcp的协议)它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的Websocket是一个持久化的协议 二、websoc…

uni-app+websocket实现语音聊天小程序

uni-appwebsocket 开发语音聊天咨询小程序

微信小程序中百分百实现聊天界面

众所周知,全网来看,微信的聊天界面看着就是舒服,那能否在微信小程序中实现该功能,同时可以实现输入文本和语音功能,而且在输入文本时,键盘可以弹起。话不多说,上界面看看。 wxml实现如下: <view> <scroll-view scroll-y scroll-into-view={{toView}} style=h…

图灵聊天机器人小程序

历时半年整理出了十多万字的学习笔记&#xff0c;目前依旧在更新 欢迎点赞和支持&#xff5e;&#x1f973;&#x1f973;&#x1f973; 博客 项目描述&#xff1a; 根据图灵API向聊天机器人发送聊天信息&#xff0c;并渲染返回的数据。具有清空聊天记录的按钮。本来是想上线…

微信小程序-模仿绘制聊天界面

参考文章 1、小程序模仿微信聊天界面 2、微信小程序实现仿微信聊天界面(各种细节处理) 3、微信小程序之页面中关于聊天框三角形的制作和使用 4、仿微信聊天记录时间显示 5、微信小程序-同时获取麦克风、相机权限、获取多个权限 6、【uni-app】模仿微信实现简易发送/取发语音功…

微信聊天小程序——(二、账号的注册与登录)

具体效果&#xff1a; 目录 二、账号的注册与登录 步骤一、获取用户信息 步骤二、用户输入账号密码&#xff08;在注册页面中&#xff09; 步骤三、将获取到的值放到我们的数据库中&#xff08;在注册页面中&#xff09; 步骤四、登录的页面逻辑 步骤五、登录页面的实现 …

微信聊天小程序——(三、获取好友列表)

三、获取好友列表 步骤一、展示所有好友的推荐列表&#xff08;friends页面&#xff09; 具体效果&#xff1a; 实现思路&#xff1a; 我们有我们的用户数据库表即&#xff1a;uers循环我们的数据库用户表&#xff0c;达到所有的用户信息&#xff0c;即&#xff1a;userLi…

微信聊天小程序——(五、添加好友)

五、添加好友 步骤一、通过搜索添加好友 具体效果&#xff1a; 思路&#xff1a; 本质上来讲&#xff0c;就是通过输入框得到好友账号信息&#xff0c;之后再数据库中查询&#xff0c;最后返回并渲染查询结果。首先&#xff0c;得到输入框的值&#xff0c;并传递到我们的页面…

支付宝小程序平台的IM聊天插件

文章目录 前言一、用户端1.基本展示2.难处理的点二、另一用户端1.前端websocket的整合2.手机息屏websocket断线问题2.websocket服务端配置3.后端整合websocket作为服务端&#xff0c;传输消息给前端 总结 前言 最近工作需求来了个项目&#xff0c;前景为在支付宝平台上发布一个…

使用 Python 编写一个聊天小程序

欢迎关注 “小白玩转Python”&#xff0c;发现更多 “有趣” 本篇文章分享如何用相当简洁的 Python 代码制作一个简单的聊天应用程序。更重要的是&#xff0c;我已经实现了没有任何第三方依赖的代码&#xff01; 首先&#xff0c;我创建了一个聊天服务器&#xff0c;通过它可以…

小米手机解BL锁教程

1.找到设置&#xff0c;找到我的设备 2.点击全部参数&#xff0c;多点几下miui版本&#xff0c;直到弹出开发者模式提醒。 3.返回&#xff0c;找到更多设置 4.找到开发者选项 5.找到设备定状态 6.绑定账号和设备&#xff0c;关机&#xff0c;按开键加音量减&#xff0c;进去fas…

安卓搞机玩机-什么是“锁 ” BL锁 屏幕锁 账号锁 设备锁等分析

相信把玩安卓机型的友友们都大概了解机型的锁是什么概念。但有些友友可能还分不清楚具体锁的概念。今天这个帖子由浅入深的带你了解安卓机型中各种“锁”的概念.这类话题比较敏感。只是大概带你分清楚锁的分类和基本对应的解锁方式. 一.屏幕锁【 图案锁 指纹锁 数字锁 人…

万能小米手机解锁,刷机,默认破解BL锁

写在第一条:下载之前请注意 本软件不支持最新机型,只支持4代和4代以前的机型,请注意 早就想给自己的小米手机刷机了&#xff0c;奈何一直没有门&#xff0c;最后还在求助了万能的淘宝&#xff0c;刚刚在淘宝花了 30大洋买的刷机工具&#xff0c;刷机成功之后&#xff0c;才反…

xiaomi 小米 红米redmi 秒解锁BL锁,不用等,在线秒解锁BL工具介绍

xiaomi 小米 红米redmi 秒解锁BL锁,不用等&#xff0c;在线秒解锁BL Xlaomi Redmi K40 Gaming Xlaomt Poco F3 GT Gaming Xaoml Poco X3 GT Xaoml Redmi Note9 5G Xlaomi Redml Note 10 Pro 5G Xlaoml Redmi Note 10 5G Xlaoml Redml Note 10T 5G Xlaoml Poco M3 Pro 5G Xaoml…

小米手机解BL锁、线刷详细教程,适用于小米全系列手机

[教程] 小米手机解BL锁、线刷详细教程&#xff0c;适用于小米全系列手机 这几天看到论坛里很多人在问怎么线刷&#xff0c;下面我就做个详细的线教程大家看一下高手别喷我哈 此教程只适合刷官方MIUI包 进入正题。 第一步&#xff1a;解BL锁 1.浏览器打开申请解锁小米手机点击立…

android@解bl锁@twrp的刷入和使用问题

文章目录 解bl锁步骤 附:MIUI线刷工具待线刷设备扫面和检查使用方式线刷工具卡住的关闭方法 第三方recoverytwrp解密datadata decrypt清除data后用twrp中刷入文件刷入面具 如何找到合适的TWRP rec ref 解bl锁 不是所有android设备都支持解锁下面是以最为典型的MIUI android设备…

02_Lock锁

首先看一下JUC的重磅武器——锁&#xff08;Lock&#xff09; 相比同步锁&#xff0c;JUC包中的Lock锁的功能更加强大&#xff0c;它提供了各种各样的锁&#xff08;公平锁&#xff0c;非公平锁&#xff0c;共享锁&#xff0c;独占锁……&#xff09;&#xff0c;所以使用起来…

红米note10 pro机型解除“账号锁”的一些操作案例 mtk机型强解bl锁

前言。操作解除锁类案例只限于自己的机型&#xff0c; 因手机号长期不用或者忘记密码导致账号锁出现的问题 机型哦 我经常在csdn网站分享一些玩机中的实测资源和玩机常识。遇到很多玩机的友友&#xff0c;其中我分享的一个资源&#xff0c;这个粉丝朋友下载后在网吧操作不了。…

穷举法解华为bl锁

穷举法解华为bl锁 python3代码测试截图 灵感来自于&#xff1a;https://blog.csdn.net/qq_40169767/article/details/90481748 但是我不懂shell脚本&#xff0c;那个脚本又运行不了&#xff0c;所以我用python写了一个&#xff0c; 穷举要0.05s*9999999999999999/60*60*24*3651…

玩机搞机---关于安卓机型工厂固件 刷机 端口解密 解bl锁 写串 nv损坏 等相关常识

*******工程机和工厂固件方面的常识 可能很多玩机友友对什么是工厂固件比较陌生。那么今天的话题就围绕这个和大家讨论下。其实一般厂家的流程都是在一部机型推放市场之前&#xff0c;需要经过预研企划、研发设计、全面测试等诸多环节。在这一整个改善的全过程中&#xff0c;厂…