聊天室：一对一聊天

上节实现了聊天界面，但是聊天室不是通过 UI 操作创建的，是我们之前通过接口创建的。

这节就来实现下进入聊天的入口。

也就是这两个：

点击聊天按钮的时候，要创建聊天室，或者查找已有的聊天室，然后带着 id 跳到聊天页面：

聊天页面选中 id 对应的聊天室。

给聊天按钮加一个点击事件，点击的时候传入对应用户的 id：

<a href="#" onClick={() => {
    goToChat(record.id)
}}>聊天</a>

1
2
3

goToChat 能拿到两个用户的 id，自然就能查到对应的聊天室：

现在没这个接口，我们加一下：

@Get('findChatroom')
async findChatroom(@Query('userId1') userId1: string, @Query('userId2') userId2: string) {
    if(!userId1 || !userId2) {
      throw new BadRequestException('用户 id 不能为空');
    }
    return this.chatroomService.queryOneToOneChatroom(+userId1, +userId2);
}

1
2
3
4
5
6
7

在 service 实现这个方法：

async queryOneToOneChatroom(userId1: number, userId2: number) {
    const chatrooms = await this.prismaService.userChatroom.findMany({
        where: {
            userId: userId1
        }
    })
    const chatrooms2 = await this.prismaService.userChatroom.findMany({
        where: {
            userId: userId2
        }
    })

    let res;
    for(let i = 0; i < chatrooms.length; i++) {
        const chatroom = await this.prismaService.chatroom.findFirst({
            where: {
                id: chatrooms[i].chatroomId
            }
        })
        if(chatroom.type === true) {
            continue;
        }

        const found = chatrooms2.find(item2 => item2.chatroomId === chatroom.id)
        if(found) {
            res = found.chatroomId
            break;
        }
    }

    return res
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

因为我们没用外键关联，实现起来麻烦一些。

先查询 userId1 的所有 chatrooms，再查询 userId2 的所有 chatrooms2。

然后再查询 chatrooms 和 chatroom2 的交集，返回第一个 chatroomId

过程中要过滤掉类型为群聊的聊天室。

这就是两个 user 都在的 1-1 聊天室。

测试下：

现在只有这两个用户在一个聊天室。

结果是对的：

然后在前端调用下：

export async function findChatroom(userId1: number, userId2: number) {
    return axiosInstance.get(`/chatroom/findChatroom`, {
        params: {
            userId1,
            userId2
        }
    });
}

export async function createOneToOne(friendId: number,) {
    return axiosInstance.get(`/chatroom/create-one-to-one`, {
        params: {
            friendId,
        }
    });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在 interfaces 调用下查找聊天室和创建一对一聊天室的接口。

之前 create-one-to-one 接口没有返回聊天室 id，我们返回下：

在组件里调用下：

const navigate = useNavigate();

async function goToChat(friendId: number) {
    const userId = getUserInfo().id;
    try{
        const res = await findChatroom(userId, friendId);

        if(res.data) {
            navigate('/chat', {
                state: {
                    chatroomId: res.data
                }
            });
        } else {
            const res2 = await createOneToOne(friendId);
            navigate('/chat', {
                state: {
                    chatroomId: res2.data
                }
            });
        }
    } catch(e: any){
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在 Chat 组件里取出 state 里的数据：

如果 state 里有 chatroomId，就选中对应的聊天室。

并且选中的聊天室加上 selected 的 className。

const location = useLocation();

useEffect(() => {
    setChatroomId(location.state?.chatroomId);
}, [location.state?.chatroomId]);

1
2
3
4
5

className={`chat-room-item ${item.id === roomId ? 'selected' : ''}`}

测试下：

没啥问题，和小强聊过天，会选中已有的聊天室。

和小红没有聊过天，会创建一个新聊天室然后选中。

只不过现在聊天室名字不大好。

一对一聊天室的名字之前是随机生成的，我们在查询聊天室列表的时候改一下：

if(chatrooms[i].type === false) {
    const user = await this.prismaService.user.findUnique({
        where: {
            id: userIds.filter(item => item.userId !== userId)[0].userId
        }
    })
    chatrooms[i].name = user.nickName
}