“超能力”数据库~拿来即用,应用开发人员再也不用为撰写API而发愁。MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器、自动生成API、SQL编辑器、备份恢复、托管运维),很大地降低开发者的使用门槛。
Realtime 游戏场是一个可以多人互动,鼠标位置共享并且可以实时聊天的小应用。应用的前端采用vue3框架,应用后端服务使用了MemFire Cloud,其中使用到的MemFire Cloud功能包括:
- 云数据库:存储小程序数据表的信息。
- 用户验证:小程序使用MemFire Cloud提供的用户认证的API接口,快速完成用户注册登录操作。
- 即时API:创建数据表时会自动生成 API。
- 云数据库:存储小程序数据表的信息。
- Realtime:轻松构建任何类型的实时应用程序。
创建应用
目的:通过创建的一个MemFire Cloud应用来获得数据库、云存储等一系列资源,并将获得该应用专属的API访问链接和访问密钥,用户可以轻松的调用API接口与以上资源进行交互。
登录MemFire Cloud, 在“我的应用”页面创建一个新应用
创建数据表
点击进入应用详情页面,在“表编辑器”页面可视化建表。
1.创建realtime_user表
在“SQL执行器”/“创建表”,创建realtime_user表。realtime_user表主要记录用户的资料,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | uuid | 主键,唯一标识ID |
name | text | 用户名 |
x | real1 | 用户光标的横坐标 |
y | real | 用户光标的纵坐标 |
message | text | 用户发送的消息 |
online | boolean | 用户是否在线 |
color | text | 用户头像颜色 |
mobile | boolean | 是否手机在线 |
last_active | timestamp | 最后在线时间 |
sql建表语句
create table realtime_user (
id uuid default uuid_generate_v4() primary key,
name text,
x real,
y real,
message text,
online boolean,
color text,
mobile boolean,
last_active timestamp default now()
);
2.创建realtime_chat表
在“SQL执行器”/“创建表”,创建realtime_chat表。realtime_chat表主要记录聊天消息数据,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
id | uuid | 主键,唯一标识ID |
name_id | uuid | 用户id,关联realtime_user的id |
created_at | timeatamptz | 创建时间 |
message | text | 聊天信息 |
sql建表语句
create table realtime_chat (
id uuid default uuid_generate_v4() primary key,
name_id uuid references realtime_user on delete cascade,
created_at timestamp default now(),
message text
);
3.创建realtime_playbutton表
在“SQL执行器”/“创建表”,创建realtime_playbutton表。realtime_playbutton表主要记录点击按钮的数据,表结构字段如下:
名称 | 类型 | 描述 |
---|---|---|
name | text | 按钮名称,唯一,不为空 |
count | int8 | 点击按钮次数 |
sql建表语句
create table realtime_playbutton (
name text not null primary key,
count integer
);
INSERT INTO realtime_playbutton VALUES ('love',0);
INSERT INTO realtime_playbutton VALUES ('wow',0);
INSERT INTO realtime_playbutton VALUES ('unique',0);
创建策略
接下来,需要给realtime_user表创建三条策略,分别是允许所有用户查询、插入、修改realtime_user表数据。在“SQL执行器”页面,点击“新查询”按钮,新建一个SQL Query,执行以下操作:
alter table public.realtime_user enable row level security;
-- 启用对所有用户的查询数据访问
create policy "Enable access to all users" on public.realtime_user for
select using (true);
-- 启用对所有用户的插入数据访问
create policy "Enable insert for all users" on public.realtime_user for
insert with check (true);
-- 启用对所有用户的修改数据访问
create policy "Enable update for all users" on public.realtime_user for
update using (true) with check (true);
给realtime_chat表创建两条策略,分别是允许所有用户查询、插入realtime_chat表数据。
alter table public.realtime_chat enable row level security;
-- 启用对所有用户的查询数据访问
create policy "Enable access to all users" on public.realtime_chat for
select using (true);
-- 启用对所有用户的插入数据访问
create policy "Enable insert for all users" on public.realtime_chat for
insert with check (true);
给realtime_playbutton表创建两条策略,分别是允许所有用户查询、插入realtime_playbutton表数据。
alter table public.realtime_playbutton enable row level security;
-- 启用对所有用户的查询数据访问
create policy "Enable access to all users" on public.realtime_playbutton for
select using (true);
-- 启用对所有用户的插入数据访问
create policy "Enable update for all users" on public.realtime_playbutton for
update using (true) with check (true);
启用Realtime
1.Realtime是什么?
Realtime是MemFire Cloud推出的服务,可以通过侦听、广播和共享来自其他客户端/数据库的更改,来创建多人互动应用。主要特性包括:
- 侦听数据库变更:侦听数据库插入、更新、删除以及其他变更操作;
- 保存:在各客户之间一致地存储和同步在线用户状态;
- 广播:以低延时将任务消息数据发送到订阅同一频道的任何客户端;
2.为什么要启用Realtime?
本项目是一个可以多人互动、实时聊天的应用程序,传统的实时聊天应用程序需要后端将客户端发来的信息用服务器发送给聊天室中其他用户,但是只要启用Realtime的功能,Realtime就可以充当后端的角色了,他可以监听客户端对数据库的‘插入’、‘更新’、‘删除’等操作,从而在监听的函数中获取最新信息返回给客户端。
在“数据库->Replication”页面,启用Realtime,可以选择Realtime监听数据表的‘插入’、‘更新’、‘删除’、‘截断’操作,可以根据业务自身需求勾选,这里我们需要启用全部操作。点击‘1张表’按钮后,进入数据表列表,点击realtime_user、realtime_chat、realtime_playbutton表的开关按钮,启用Realtime功能。
开启扩展
接下来,需要创建一个cron定时任务,每隔一段时间判断用户是否超过1分钟未响应,从而判断是否下线。
create extension if not exists pg_cron;
grant usage on schema cron to postgres;
grant all privileges on all tables in schema cron to postgres;
select
cron.schedule(
'make-inactive-user-offline',
'* * * * *', -- every minute
$$
update public.realtime_user
set online = false
where online = true and now() - INTERVAL '1 min' > last_active
$$
);
创建函数
接下来,需要创建一个函数,从而统计用户对聊天室的喜爱程度。
-- 按钮增量
create or replace function realtime_playbutton_addon(a text)
returns void as
$$
begin
update public.realtime_playbutton
set count = count + 1 where name = a;
end;
$$
language plpgsql;
下载代码
git clone git@github.com:LucaRao/realtimeChat.git
「Node.js (>=14.x <=16.x) 。」
安装全局依赖插件
yarn install
获取 API密钥
接下来需要创建一个可以访问应用程序数据的客户端,创建一个可以访问应用程序数据的客户端需要接口的地址(URL)和一个数据权限的令牌(ANON_KEY),我们需要去应用的概览里面去获取这两个参数然后配置到lib/supabase.ts里面去。
src/supabase.ts
import { createClient } from "@supabase/supabase-js"
export const supabase = createClient(
"",
""
)
回到MemFire Cloud首页,在应用/首页页面,获取服务地址以及token信息,只需要从首页中获取URL接口地址和anon的密钥。
「Anon(公开)密钥是客户端API密钥。它允许“匿名访问”您的数据库,直到用户登录。登录后,密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。」
启动项目
yarn dev
然后打开浏览器到http://localhost:3000,你应该会看到完整的应用程序。