使用React+Amplify+AppSync+TypeScript+Recoil构建具有认证功能的聊天应用
我将介绍如何使用React+Amplify+AppSync+TypeScript+Recoil来构建具有身份验证功能的聊天应用程序的方法。
本文中所提到的应用程序架构如下：
我们将使用Amplify Console Static Web Site Hosting来进行前端代码的托管。
使用AWS Appsync来提供GraphQL API，并使用DynamoDB作为数据库。
我们将使用Amazon Cognito进行用户认证。
版本
我使用的环境如下所示。
$ npx create-react-app --version
4.0.3
$ node -v
v14.16.0
$ npm -v
6.14.11
$ amplify -v
4.44.2
如果未安装 Amplify CLI ，请参考官方文档进行安装。
创建应用程序的模板
使用create-react-app来创建应用程序的模板。
$ npx create-react-app chat --template typescript
只要通过运行 `yarn start`，示例应用程序能够启动，就表示成功。
$ cd chat
$ yarn start
接下来，您可以通过运行”amplify init”的命令，向您的项目中添加适用于Amplify的配置。
$ amplify init
? Enter a name for the project chat
? Enter a name for the environment production
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
? What javascript framework are you using react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default ← amplify configureで指定したプロファイル名を指定
应用程序的模板已完成。
实施认证功能
我们将实施认证功能。
后端/基础架构
增强功能，添加认证功能。
$ amplify add auth
? Do you want to use the default authentication and security configuration? Default configuration
? Warning: you will not be able to edit these selections.
? How do you want users to be able to sign in? Username
? Do you want to configure advanced settings? No, I am done.
接下来，使用amplify push将更改同步到云端。
$ amplify push
? Are you sure you want to continue? Yes
后端/基础设施的实现已经完成了。
前端
安装软件包
首先，安装Amplify相关的软件包。
$ yarn add aws-amplify @aws-amplify/ui-react
接下来，安装Material-UI。
$ yarn add @material-ui/core @material-ui/icons
最后，安装Recoil。
$ yarn add recoil
组件的实现
将App.tsx重写为以下方式。
登录界面使用@aws-amplify/ui-react的组件进行创建。
注销通过在handleClick函数内使用aws-amplify的Auth.signOut()来实现。
同时，将登录用户的用户名存储在后面要提到的Recoil的原子(atom)中。
import React, { useState } from "react";
import Amplify, { Auth } from "aws-amplify";
import { AmplifyAuthenticator, AmplifySignUp } from "@aws-amplify/ui-react";
import {
AuthState,
onAuthUIStateChange,
CognitoUserInterface,
} from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import { RecoilRoot } from "recoil";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
Amplify.configure(awsconfig);
const useStyles = makeStyles((theme: Theme) =>
createStyles({
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
toolBar: {
display: "flex",
},
signOut: {
marginLeft: "auto",
display: "flex",
},
})
);
const App = () => {
const classes = useStyles();
const [authState, setAuthState] = useState<AuthState>();
const [user, setUser] = useState<CognitoUserInterface | undefined>();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState as AuthState);
setUser(authData as CognitoUserInterface);
});
}, []);
const handleClick = () => {
Auth.signOut();
};
return authState === AuthState.SignedIn && user ? (
<div>
<RecoilRoot>
<AppBar className={classes.appBar}>
<Toolbar className={classes.toolBar}>
<Typography variant="h6" noWrap>
ChatApp
</Typography>
<div onClick={handleClick} className={classes.signOut}>
<IconButton
aria-label="display more actions"
edge="end"
color="inherit"
>
<ExitToAppIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
</RecoilRoot>
</div>
) : (
<AmplifyAuthenticator>
<AmplifySignUp
slot="sign-up"
formFields={[
{ type: "username" },
{ type: "password" },
{ type: "email" },
]}
/>
</AmplifyAuthenticator>
);
};
export default App;
回弹功能的实现
在src/recoil/ChatState.tsx中创建一个文件，然后按照下面的方式编写：
创建一个表示一条帖子的postState和表示帖子列表的postListState。
此外，我们创建了一个用于获取/设置帖子消息的messageState。
import { atom, selector, DefaultValue, RecoilState } from "recoil";
import produce from "immer";
export interface PostState {
id: string;
message: string;
owner: string;
user: string;
createdAt: string;
}
const defaultValue: PostState = {
id: "",
message: "",
owner: "",
user: "",
createdAt: "",
};
const atomKeyName: string = "postState";
export const postState = atom({
key: atomKeyName,
default: defaultValue,
});
export const messageState: RecoilState<string> = (() => {
const propName: keyof PostState = "message";
return selector<string>({
key: atomKeyName + "/" + propName,
get: ({ get }) => {
return get(postState)[propName];
},
set: ({ set, get }, newValue) => {
const tempValue: string =
newValue instanceof DefaultValue ? defaultValue[propName] : newValue;
const imValue = produce<PostState>(get(postState), (draft) => {
draft[propName] = tempValue;
});
set(postState, imValue);
},
});
})();
const postListDefaultValue: PostState[] = [];
export const postListState = atom({
key: "postListState",
default: postListDefaultValue,
});
以上即为认证功能的实现完毕。
让我们按照下述步骤进行操作确认。
聊天功能的实施
接下来，我们会进行在线聊天的实现。
后端/基础架构
创建GraphQL API
使用amplify并添加API，创建GraphQL API。
$ amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: chat
? Choose the default authorization type for the API Amazon Cognito User Pool
? Do you want to configure advanced settings for the GraphQL API No, I am done.
? Do you have an annotated GraphQL schema? No
? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
? Do you want to edit the schema now? No
编辑GraphQL的模式
通过编辑amplify/backend/api/chat/build/schema.graphql生成的模式来实现。 在获取所有帖子时，使用@key按照创建日期的顺序排序。
type Post
@model
@key(
name: "SortByCreatedAt"
fields: ["owner", "createdAt"]
queryField: "listPostsSortedByCreatedAt"
) {
id: ID!
message: String!
owner: String
user: String
createdAt: AWSDateTime
}
请参阅官方文档了解关于@model和@key的详细说明。
https://docs.amplify.aws/cli/graphql-transformer/model
https://docs.amplify.aws/cli/graphql-transformer/key
GraphQL API 的部署
使用Amplify push将GraphQL API部署到云上。
$ amplify push
? Are you sure you want to continue? Yes
? Do you want to generate code for your newly created GraphQL API Yes
? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.ts
GraphQL endpoint: https://xxxxxxxxx.appsync-api.us-east-1.amazonaws.com/graphql
最後一行的URL是App Sync提供的GraphQL API的URL。
这个URL会自动写入到一个名为src/aws-exports.js的文件中，而且是自动生成的。
前端
组件实现
实现具有聊天功能的Content组件。
创建src/Content.tsx并按下面的代码编写。
通过GraphQL的mutations在点击注册按钮时将数据注册到DynamoDB中。
另外，在第一次调用Content组件时，通过GraphQL的queries获取帖子列表。为了按创建日期和时间顺序获取所有帖子，在owner中放入了固定值chat。
此外，通过调用GraphQL的subscriptions来订阅新帖子，在Content组件第一次调用时。由于还订阅了自己发布的帖子，因此在处理自己发布的帖子时，不需要设置setPost。
import React, { useEffect } from "react";
import { useRecoilState } from "recoil";
import { postListState, messageState, PostState } from "./recoil/ChatState";
import { API, graphqlOperation } from "aws-amplify";
import { GraphQLResult } from "@aws-amplify/api";
import { listPostsSortedByCreatedAt } from "./graphql/queries";
import { createPost } from "./graphql/mutations";
import { onCreatePost } from "./graphql/subscriptions";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Chip from "@material-ui/core/Chip";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import Container from "@material-ui/core/Container";
import { CreatePostMutation, ListPostsSortedByCreatedAtQuery } from "./API";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
container: {
paddingTop: theme.spacing(10),
paddingBottom: theme.spacing(10),
backgroundColor: "white",
},
input: {
display: "flex",
},
myMessage: {
display: "flex",
justifyContent: "flex-start",
},
otherMessage: {
display: "flex",
justifyContent: "flex-end",
},
})
);
interface ContentProps {
userName?: string;
}
const Content = (props: ContentProps) => {
const classes = useStyles();
const [posts, setPosts] = useRecoilState(postListState);
const [message, setMessage] = useRecoilState(messageState);
const handleClick = () => {
postPost();
};
const postPost = async () => {
const post = (await API.graphql(
graphqlOperation(createPost, {
input: { message: message, owner: "chat", user: props.userName },
})
)) as GraphQLResult<CreatePostMutation>;
const postData = post.data?.createPost as PostState;
setPosts([...posts, postData]);
setMessage("");
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setMessage(event.target.value);
};
useEffect(() => {
async function getPosts() {
const res = (await API.graphql(
graphqlOperation(listPostsSortedByCreatedAt, { owner: "chat" })
)) as GraphQLResult<ListPostsSortedByCreatedAtQuery>;
const postData = res?.data?.listPostsSortedByCreatedAt
?.items as PostState[];
setPosts(postData);
}
getPosts();
}, [setPosts]);
useEffect(() => {
// @ts-ignore
const subscription = API.graphql(graphqlOperation(onCreatePost)).subscribe({
next: (eventData: any) => {
const post = eventData.value.data.onCreatePost;
if (post !== undefined && post.user !== props.userName) {
setPosts([...posts, post]);
}
},
});
return () => subscription.unsubscribe();
}, [posts]);
const postList: JSX.Element[] = [];
for (const post of posts) {
if (post.user === props.userName) {
postList.push(
<ListItem key={post.id} className={classes.myMessage}>
<Chip label={post.message}></Chip>
</ListItem>
);
} else {
postList.push(
<ListItem key={post.id} className={classes.otherMessage}>
<Chip label={post.message}></Chip>
</ListItem>
);
}
}
return (
<Container maxWidth="lg" className={classes.container}>
<div className={classes.input}>
<TextField value={message} onChange={handleChange} />
<Button variant="contained" color="secondary" onClick={handleClick}>
登録する
</Button>
</div>
<List>{postList}</List>
</Container>
);
};
export default Content;
在App组件中调用已创建的Content组件。
import React, { useState } from "react";
import Amplify, { Auth } from "aws-amplify";
import { AmplifyAuthenticator, AmplifySignUp } from "@aws-amplify/ui-react";
import {
AuthState,
onAuthUIStateChange,
CognitoUserInterface,
} from "@aws-amplify/ui-components";
import awsconfig from "./aws-exports";
import Content from "./Content";
import { RecoilRoot } from "recoil";
import { createStyles, Theme, makeStyles } from "@material-ui/core/styles";
import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar";
import Typography from "@material-ui/core/Typography";
import IconButton from "@material-ui/core/IconButton";
import ExitToAppIcon from "@material-ui/icons/ExitToApp";
Amplify.configure(awsconfig);
const useStyles = makeStyles((theme: Theme) =>
createStyles({
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
toolBar: {
display: "flex",
},
signOut: {
marginLeft: "auto",
display: "flex",
},
})
);
const App = () => {
const classes = useStyles();
const [authState, setAuthState] = useState<AuthState>();
const [user, setUser] = useState<CognitoUserInterface | undefined>();
React.useEffect(() => {
return onAuthUIStateChange((nextAuthState, authData) => {
setAuthState(nextAuthState as AuthState);
setUser(authData as CognitoUserInterface);
});
}, []);
const handleClick = () => {
Auth.signOut();
};
return authState === AuthState.SignedIn && user ? (
<div>
<RecoilRoot>
<AppBar className={classes.appBar}>
<Toolbar className={classes.toolBar}>
<Typography variant="h6" noWrap>
ChatApp
</Typography>
<div onClick={handleClick} className={classes.signOut}>
<IconButton
aria-label="display more actions"
edge="end"
color="inherit"
>
<ExitToAppIcon />
</IconButton>
</div>
</Toolbar>
</AppBar>
<Content userName={user.username} />
</RecoilRoot>
</div>
) : (
<AmplifyAuthenticator>
<AmplifySignUp
slot="sign-up"
formFields={[
{ type: "username" },
{ type: "password" },
{ type: "email" },
]}
/>
</AmplifyAuthenticator>
);
};
export default App;
以上是聊天功能的实现已经完成。
让我们按照下面的步骤进行操作验证。
前端托管
最后，让我们使用Amplify Console Static Web Site Hosting来托管我们创建的前端代码。
$ amplify hosting add
? Select the plugin module to execute Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
? Choose a type Manual deployment
$ amplify publish
? Are you sure you want to continue? Yes
如果可以访问控制台输出的URL，则表示成功。
以上，本文中实现带有认证功能的聊天应用的创建已经完成。
最后
请执行下面的步骤来删除已创建的环境。
$ amplify delete
? Are you sure you want to continue? This CANNOT be undone. (This will delete all the environments of the project from the cloud and wipe out all the local files created by Amplify CLI) Yes
本文章中创建的带有身份验证功能的聊天应用的完整源代码已在下方链接中公开。
https://github.com/shimi7o/chat
