实时游戏场

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表主要记录用户的资料，表结构字段如下：

sql建表语句

1create table realtime_user (
2  id uuid default uuid_generate_v4() primary key,
3  name text,
4  x real,
5  y real,
6  message text,
7  online boolean,
8  color text,
9  mobile boolean,
10  last_active timestamp default now()
11);

2.创建realtime_chat表#

在“SQL执行器”/“创建表”，创建realtime_chat表。realtime_chat表主要记录聊天消息数据，表结构字段如下：

sql建表语句

1create table realtime_chat (
2  id uuid default uuid_generate_v4() primary key,
3  name_id uuid references realtime_user on delete cascade,
4  created_at timestamp default now(),
5  message text
6);

3.创建realtime_playbutton表#

在“SQL执行器”/“创建表”，创建realtime_playbutton表。realtime_playbutton表主要记录点击按钮的数据，表结构字段如下：

sql建表语句

1create table realtime_playbutton (
2  name text not null primary key,
3  count integer
4);
5INSERT INTO realtime_playbutton VALUES ('love',0);
6INSERT INTO realtime_playbutton VALUES ('wow',0);
7INSERT INTO realtime_playbutton VALUES ('unique',0);

创建策略

接下来，需要给realtime_user表创建三条策略，分别是允许所有用户查询、插入、修改realtime_user表数据。在“SQL执行器”页面，点击“新查询”按钮，新建一个SQL Query，执行以下操作：

1alter table public.realtime_user enable row level security;
2
3-- 启用对所有用户的查询数据访问
4create policy "Enable access to all users" on public.realtime_user for
5select using (true);
6
7-- 启用对所有用户的插入数据访问
8create policy "Enable insert for all users" on public.realtime_user for
9insert with check (true);
10
11-- 启用对所有用户的修改数据访问
12create policy "Enable update for all users" on public.realtime_user for
13update using (true) with check (true);

给realtime_chat表创建两条策略，分别是允许所有用户查询、插入realtime_chat表数据。

1alter table public.realtime_chat enable row level security;
2
3-- 启用对所有用户的查询数据访问
4create policy "Enable access to all users" on public.realtime_chat for
5select using (true);
6
7-- 启用对所有用户的插入数据访问
8create policy "Enable insert for all users" on public.realtime_chat for
9insert with check (true);

给realtime_playbutton表创建两条策略，分别是允许所有用户查询、插入realtime_playbutton表数据。

1alter table public.realtime_playbutton enable row level security;
2
3-- 启用对所有用户的查询数据访问
4create policy "Enable access to all users" on public.realtime_playbutton for
5select using (true);
6
7-- 启用对所有用户的插入数据访问
8create policy "Enable update for all users" on public.realtime_playbutton for
9update 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分钟未响应，从而判断是否下线。

1create extension if not exists pg_cron;
2grant usage on schema cron to postgres;
3grant all privileges on all tables in schema cron to postgres;
4
5select
6  cron.schedule(
7    'make-inactive-user-offline',
8    '* * * * *', -- every minute
9    $$
10      update public.realtime_user
11        set online = false
12        where online = true and now() - INTERVAL '1 min' > last_active
13    $$
14  );

创建函数

接下来，需要创建一个函数，从而统计用户对聊天室的喜爱程度。

1-- 按钮增量
2create or replace function realtime_playbutton_addon(a text)
3returns void as
4  $$
5  begin
6    update public.realtime_playbutton
7    set count = count + 1 where name = a;
8  end;
9  $$
10language plpgsql;

下载代码

1git clone git@github.com:LucaRao/realtimeChat.git

Node.js (>=14.x <=16.x) 。

安装全局依赖插件

1yarn install

获取 API密钥#

接下来需要创建一个可以访问应用程序数据的客户端，创建一个可以访问应用程序数据的客户端需要接口的地址（URL）和一个数据权限的令牌（ANON_KEY）,我们需要去应用的概览里面去获取这两个参数然后配置到lib/supabase.ts里面去。

src/supabase.ts

1import { createClient } from "@supabase/supabase-js"
2
3export const supabase = createClient(
4  "",
5  ""
6)

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

Anon（公开）密钥是客户端API密钥。它允许“匿名访问”您的数据库，直到用户登录。登录后，密钥将切换到用户自己的登录令牌。这将为数据启用行级安全性。

启动项目

1yarn dev

然后打开浏览器到http://localhost:3000，你应该会看到完整的应用程序。