react-apollo graphQL及时通讯/聊天客服

Posted 2021-04-25 前端开发手册

实现思路
apollo是一个非常棒的库结合graphql使用非常便捷巧妙，有着良好的编程快感，不觉让人沉浸在其中，以下是实现及时通讯的思路
使用：aws-appsync react-apollo
首先全局全局包裹，也需要全局监听，实时的消息接收

const client = new AWSAppSyncClient({
  url,
  region,
  auth
})

<ApolloProvider client={client}>
    <App/>
</ApolloProvider>

先实现简单的聊天室，即两者都在同一页面，没有一方处于离线状态下
以2.58版为例（新版差别不大）
用graphql包裹组建开启一个查询

export default graphql(...)(componentName)

graphql的第一个参数是一个查询方法:GetMessages,查询当前聊天室中的消息列表，
options是相关的配置返回一个对象，属性variables是查询需要的参数，fetchPolicy是数据存储方式：缓存和网络

graphql(GetMessages, {
 options: (props) => {
 const { conversationId } = props;
 return {
 variables: {
 conversationId,
 },
 fetchPolicy: "cache-and-network",
 };
 }

查询的返回值props会成为被包裹组建的props，查询的props有一个subscribeToMore属性可以监听subscription类型的方法的触发也就是监听/订阅

// 设置返回给被包裹组件的props
props: (props: any) => {
    // 从组件原有的props中结构订阅需要的参数，如果需要的话
    const { conversationId } = props.ownProps;
    return {
    // 返回给被包裹组件的props
    // 设置messages属性值是查询的结果如果没有则返回一个空数组
      messages: props.data.queryMessagesByConversation?.items ?? [],
      // 重点订阅属性设置 params是在组件中可选的传餐 subscribeToNewPosts属性，是一个方法，传给被包裹组建，要实现订阅需要在被包裹组建内调用它，执行订阅
      subscribeToNewPosts: (params: any) => {
      // subscribeToMore是订阅属性执行订阅是的操作，单独提出来展示，有点乱
        props.data.subscribeToMore({})
    }
}

subscribeToNewPosts设置

    // subscribeToMore属性从props上取得
    props.data.subscribeToMore({
 document: SubscribeMessage,// 要订阅的方法，即哪个方法执行了在处理
 variables: { conversationId },// 订阅需要的参数，参数可以从params和props中取得
 updateQuery: ( prev:,curr） =>{ // 重点，处理查询的结果，有旧的查询结果，和订阅新发来的数据，组合他们返回你需要的数据返回给被包裹组件
 const {// 数据结构，onCreateMessage是订阅的数据
 subscriptionData: {
 data: { onCreateMessage },
 },
 } = curr;
 return {
 ...prev,...curr// 组合需要的数据结构，这个会是被包裹组件的message属性
 };

 }

然后被包裹组件内可以得到上面props返回的数据messages和subscribeToNewPosts，在组建内出发subscribeToNewPosts即可执行订阅

const componentName = {
messages,
subscribeToNewPosts
} => {
    useEffect(() => {
        subscribeToNewPosts()// 执行订阅这里传参，params里可以接收，需要的话
    })

    return (
    // 使用传来的messages数据，这个数据当订阅执行时，会出发设置的updataQuery会按照你的组合改变新的数据，就是说当对方给你发消息时就会出发创建消息的订阅，你这边能接收到新发的消息，把新消息加入到传给被包裹组件就可以实现实时消息接收/发送
    {messages.map(message => <Text key={message.id}>{message}</Text>)}
    )
}

一般即时通讯双方需要有一个房间号，在创建消息和执行订阅等操作需要传入此项，我这是由后端生成，相当于给两个通讯的人一个小数据库，凭借这个钥匙双发可对数据进行操作，双方都可监听这个数据库的变化，每当这个数据库中创建了一条新消息，两边都可以收到，并且展示到界面上来，就完成了即时通讯，这只是双方都在这个聊天室中的情况，还有一方离线，如何新消息弹窗提醒，以及新的聊天室创建了，另一方执行监听等等，不过都不难，都差不多，大体是把，新消息创建的监听设置全局这样，用户进入app有新消息发来订阅就执行，能看到新消息，就可以执行相关操作了，新的聊天室创建也是，监听聊天室的创建，同样是全局的，这块因为没有经验的前辈指导，自己摸索了很长时间，网上搜索相关饿资料也没有找到合适的，于是，把我这点经验记录下，如果是也是使用react-native，graphQL，apollo，aws相关技术，希望能够帮助到你，自己摸索太累了，告辞，有不明白的，或者哪里有问题，再或者你有一些建议，请一定要告诉我！