React 聊天引擎加载

Question

我使用 React 聊天引擎库创建小型聊天应用程序。这是用户界面图像

但是即使我提供正确的凭据，聊天也不会加载。它给出了 GET https://api.chatengine.io/chats/latest/25/ 403。代码方面没有任何错误。我使用 Firebase 身份验证来获取记录的用户详细信息。使用身份验证上下文设置用户详细信息。这些过程工作正常。我对这个问题不太了解。

    import React,{useRef,useEffect,useState} from "react";
    import { useHistory } from "react-router-dom";
    import {ChatEngine} from 'react-chat-engine';
    import { auth } from "../firebase";

    import {useAuth} from '../contexts/AuthContext';
    import axios from "axios";

    const Chats = () => {

        const history = useHistory();
        const {user}= useAuth();
        const[loading,setLoading]=useState(true);

        const getFile =async (url) =>{
            const response = await fetch(url);
            const data =await response.blob();

            return new File([data],"userPhoto.jpg",{type:"image/jpeg"})
        }
        
      useEffect(()=>{
        if(!user){
            history.push('/')
            return;
        }
        axios.get('https://api.chatengine.io/users/me',{
            headers:{
                "project-id":"8dc9fa0e-7ed4-40ec-a003-a7c76a11e7f7",
                "user-name":user.email,
                "user-secret":user.uid
            }
        })
        .then(()=>{
           setLoading(false);
        })
        .catch(()=>{
            let formdata=new FormData();
            formdata.append('email',user.email);
            formdata.append('username',user.email);
            formdata.append('secret',user.uid);

            getFile(user.photoURL)
            .then((avatar)=>{
                formdata.append('avatar',avatar,avatar.name)

                axios.post('https://api.chatengine.io/users/',
                formdata,
                {headers:{"private-key":"1445fb04-f7c9-42d2-b63b-3019a881d3a3"}}
                ).then(()=>setLoading(false))
                .catch(error => console.log(error))
            })
        })
      },[user,history])

        const LogoutHandler =async()=>{
           await auth.signOut();
            history.push('/');
        }

        if(!user || loading) return 'Loading ...';

      return (
        <div className="chat-page">
          <div className="nav-bar">
            <div className="logo-tab">UEassyMessage</div>
            <div className="logout-tab" onClick={LogoutHandler}>Logout</div>
          </div>
        <ChatEngine
            height="calc(100vh-66px)"
            projectID= '8dc9fa0e-7ed4-40ec-a003-a7c76a11e7f7'
            userName={user.email}
            userScret={user.uid}
        />
        </div>
      );
    };

    export default Chats;

任何人都可以了解这个问题吗？

Answer 1

不确定您是否仍然遇到此问题，但在

ChatEngine

属性中，它应该是

userSecret

而不是 userScret。我遇到了同样的问题，因为我用小写的 d 写了

projectID

。

Answer 2

我认为你的

projectID={}

道具中有一个空格，这可能有问题。确保将其拿走并重试。

Answer 3

1. 删除项目 ID 中的空格并将 ID 大写

axios.get("https://api.chatengine.io/users/me", {
    headers: {
        projectID: "8dc9fa0e-7ed4-40ec-a003-a7c76a11e7f7",
        "user-name": user.email,
        "user-secret": user.uid,
    },
});

2. 如果这不起作用，请将私钥添加到您的“axios.get”

axios.get("https://api.chatengine.io/users/me", {
    headers: {
        projectID: "8dc9fa0e-7ed4-40ec-a003-a7c76a11e7f7",
        "user-name": user.email,
        "user-secret": user.uid,
        "private-key": "*******",
    },
});

Answer 4

不应将电子邮件称为用户名，而应称为显示名称

  axios

.get("https://api.chatengine.io/users/me", { 标题：{ “项目ID”：“21f3532f-a326-4684-8412-874f86333062”， “用户名”：user.displayName， “用户秘密”：user.uid，

},

}）

<ChatEngine
        height="calc(100vh - 66px)"
        projectID="21f3532f-a326-4684-8412-874f86333062"
        userName={user.displayName}
        userSecret={user.uid}
      />