How to achieve user attention in Redis

Redis implements cross-correlation function

In implementing social network functions, achieving mutual attention is essential. Here, we will use Redis to implement this function, and the front-end uses the Vue framework to implement it.

Functional requirements

We need to implement the following functions:

1. Users can follow other users
2. Users can unfollow other users
3. Users can view the people they follow and who are following
4. On the user's homepage, the number of followers and the number of followers can be displayed

Redis storage structure design

We use RedissetData structures to store people who are followed by users and those who are followed.

Specifically, each user has onefollowingandfollowersAttributes, respectively represent the person the user is following and who is being followed.

Then use it in RedissetTypes to store these attention information. In set, we store the id of each attention object to facilitate subsequent queries.

Backend implementation

Add to follow

We need to use APIs to enable users to add and unfollow.

Here is the API code to add attention:

// Add following('/followers/:id', async (req, res) => {
  try {
    const followerId = ;
    const followingId = ;

    // Get the user being followed and the user who is following the user    const following = await (followingId);
    const follower = await (followerId);

    // Add a follower object    await (`user:${followerId}:following`, followingId);
    await (`user:${followingId}:followers`, followerId);

    ({ message: `You are now following ${}` });
  } catch (error) {
    ();
    (500).send('Server Error');
  }
});

In this code, we useMethod adds the id of the object of interest to set.

Unfollow

Next is the unfollowing API code:

// Unfollow('/followers/:id', async (req, res) => {
 try {
    const followerId = ;
    const followingId = ;

    // Get unfollowed users and unfollowed users    const following = await (followingId);
    const follower = await (followerId);

    // Delete the following object    await (`user:${followerId}:following`, followingId);
    await (`user:${followingId}:followers`, followerId);

    ({ message: `You have unfollowed ${}` });
  } catch (error) {
    ();
    (500).send('Server Error');
  }
});

This code is similar to the one you add attention, but usesMethod to remove the id of the object of interest from the set.

View the following

Finally, we need to implement the API for viewing objects of concern. This API needs to obtain the sets that are followed and are followed separately, and then convert the id to the user object.

// Get attention and fans('/followers', async (req, res) => {
  try {
    const userId = ;

    // Get attention and be followed set    const [following, followers] = await ([
      (`user:${userId}:following`),
      (`user:${userId}:followers`),
    ]);

    // Convert id to user object    const followingUsers = await (
      ((id) => (id))
    );
    const followerUsers = await (
      ((id) => (id))
    );

    ({ following: followingUsers, followers: followerUsers });
  } catch (error) {
    ();
    (500).send('Server Error');
  }
});

Front-end implementation

In the front end, we use the Vue framework to implement it. The following features are required:

1. Users can add and unfollow actions by clicking the button
2. The user's homepage can display the number of followers and the number of followers

Add and unfollow actions

In Vue, we can use@clickListen to user click events and send API requests in the method to add and unfollow.

Here is a code example:

<!-- Add to follow -->
<button @click="followUser(user._id)" v-if="!isFollowing(user._id)">focus on</button>

<!-- 取消focus on -->
<button @click="unfollowUser(user._id)" v-else>取消focus on</button>

methods: {
  // Add following  async followUser(id) {
    await (`/api/followers/${id}`);
    // Update the attention status    [id] = true;
  },
  // Unfollow  async unfollowUser(id) {
    await (`/api/followers/${id}`);
    // Update the attention status    [id] = false;
  },
  // Determine whether to pay attention  isFollowing(id) {
    return [id];
  }
}

In this code, we useisFollowingUsersObjects to store all users' attention status.

Show the number of attention and attention

In order to display the number of attention and attention on the user's homepage, we need to add the corresponding API in the backend and call the data to display it in the frontend.

Here are the relevant codes:

// Get attention and number of fans('/followers/count', async (req, res) => {
  try {
    const userId = ;

    // Get attention and number of attention    const [followingCount, followerCount] = await ([
      (`user:${userId}:following`),
      (`user:${userId}:followers`),
    ]);

    ({ followingCount, followerCount });
  } catch (error) {
    ();
    (500).send('Server Error');
  }
});

<!-- Show the number of attention and attention -->
<div>
  <p>focus on {{followingCount}}</p>
  <p>被focus on {{followerCount}}</p>
</div>

In this code, we useMethod to get the number of sets.

Summarize

The above is all about using Redis to implement the cross-concern function. By using RedissetData structures to store attention objects, convenient and efficiently adding and unattention operations. At the same time, the Vue framework is used in the front-end to implement interactive follow and unfollow buttons, and the number of followers and being followed is displayed on the user's homepage.

These are just personal experience. I hope you can give you a reference and I hope you can support me more.