如何将客户端数据存储在 SignalR 实时应用程序中？

Question

假设我有一个聊天应用程序。当用户登录时，我想保存他们的 ID。通常在普通的网络应用程序中，我会将其保存在 javascript 的 localStorage 中。但是，如果我在聊天应用程序中使用此方法，当多个用户使用我的应用程序时，localStorage 中的数据将相互覆盖。例如，如果名为 01 的用户登录，然后通过 localStorage.setItem("userId") 保存其 Id。之后，另一个 ID 为 11 的用户登录，并保存了他们的 ID。现在，与键“userId”关联的数据将变为11。

我是否可以存储与每个用户相对应的数据？我能想到的唯一方法是将其存储在服务器端，当用户登录时，我将有一个方法将客户端的connectionId存储在一个由userId命名的组中，并且一个字典的键是connectionId，值是userData：

        public async Task Login(int userId)
        {
            var userIdStr = userId.ToString();
            await Groups.AddToGroupAsync(Context.ConnectionId, userIdStr);
            _tempDb.connection[Context.ConnectionId] = userIdStr;
        }

        public async Task GetUserInfo()
        {
            if( _tempDb.connection.TryGetValue(Context.ConnectionId, out string userId))
            {
                await 
          Clients.Client(Context.ConnectionId).SendAsync("GetUserInfo", userId.ToString());
            }else
            {
                Console.WriteLine("ConnectionId doesnt exist");
            }
        }

但这意味着每次我需要有关用户的信息时，我都必须调用此方法。有没有更好的方法来存档？

Answer 1

我们可以使用

localStorage

/

IndexDB

来获取数据。在您的聊天场景中，我更喜欢将 JSON 对象（包含您想要存储的任何信息）存储在值中，并将时间戳作为键。

这是示例代码

function saveMessage(userId, connectionId, nickname, content) {
    const timestamp = new Date().toISOString(); 
    const key = `message_${userId}_${timestamp}`;
    const message = {
        connectionId: connectionId,
        nickname: nickname,
        content: content,
        timestamp: timestamp
    };
    localStorage.setItem(key, JSON.stringify(message));
}

function loadMessages(userId) {
    const keys = Object.keys(localStorage).filter(key => key.startsWith(`message_${userId}_`));
    keys.sort(); // sort by time

    const messages = keys.map(key => JSON.parse(localStorage.getItem(key)));
    return messages;
}

我们将数据存储在本地的同时，也可以考虑将数据存储到后端数据库，重新加载聊天消息时会优先加载本地内容，这样会减轻服务器的压力。