DEV Community: readwarn

A debounced function call with JavaScript in a vue app

readwarn — Wed, 22 Jun 2022 22:00:05 +0000

Here I want to talk about the concept of debounce, or rather something really similar to it.

So I was faced with the need to limit the number of api calls I make to an endpoint, as the endpoint has a middleware that limits the amount of calls you can make to it. (a call per second for each client, for any api calls more than two per second, it throws an error). So if you also ever need to use this kind of api, this post will be helpful.

The solution is rather simple thanks to the JavaScript setTimeout function. So based on the restriction set by this api, I needed a way to control the frequency of the api calls to be at most one per second.

Do note, I needed to call this api to implement a search functionality. This means that a user of the app will be calling the api per keystrokes (as they type to search). This resulted in the api getting called frequently as an average user type more than one character per second.

The summary of solution to this is “for every api request a user make, check if there was any request made less than a second ago. If there is, “defer” the new api request to a second later, else call the api immediately”.

The solution will be tailored to vuejs app but it can also be used on other stack.

To implement this solution, the following will be needed.

<input type="text" @input="handleSearch" placeholder="search"/>

data() {
  return {
    can_start:true
    search_timeout:null
    can_start_timeout:null,
    delay:1000
}

methods:{
  async search(){
    this.resetCanStart();
    await yourThrottledApi();
    // the api endpoint with request limit of 1 
    // request per second
  },

  deferredSearch() {
    if (this.search_timeout) clearTimeout(this.search_timeout);
    // this delete pending api request, so we don't have more 
    // than one pending request queued

    this.search_timeout = setTimeout(() => this.search(), 
    this.delay);
   // create a pending request which is called after a delay

  },

  handleSearch() {
     this.can_start ? this.search() : this.deferredSearch();
    // this handles the search such that search api request is 
    // called immediately if 'can_start' is true, else the
    // request is delayed for a second

  },

  resetCanStart() {
    this.can_start = false;

    if(this.can_start_timeout)
    clearTimeout(this.can_start_timeout);

    this.can_start_timeout = setTimeout(() => {
       this.can_start = true;
    }, this.delay);

    // this set 'can_start' to false immediately after a request, 
    // and then set it back to true after a delay (1 second) 
    // (i.e it blocks another request from being made by setting 
    // 'can_start' to false, then allows new request only after 1 
    //  second by setting 'can_start' to true
}


}

Implications of the solution

For instance where the api returns the result in less than a second (say T second), consequent api calls made immediately will be forcibly delayed for some moment i.e (1 second - T second).
Some api request won't be made if both of these conditions are true
- the current request is made less then a second after the last request
- another request is made less than a second after the current request

A chat app inspired by whatsapp

readwarn — Sat, 04 Dec 2021 19:43:29 +0000

App link: Chat live-link
Repo link: Chat repo
Stack : MEVN

Hi guys, so yet again, I created a chat app, but this time, the app flow was inspired by WhatsApp.

Yea, this is the second chat-app project I've created, the first being a discord-like app. Here is article I wrote about it.

So this app basically let user sign up with just a unique username (no password needed). After signup, all new users are automatically added to the chat welcome channel. This channel is for new user to introduce themselves and interact with existing users.

Also the app has a DM feature, which allows users to chat privately. To initiate the private chat with a user, all you need to do is send them a friend request, as soon as they accept the request, you can start to chat with them.

I really don't want to explain how the whole app works or how to navigate through it. I just want to be sure the app is intuitive enough for user to understand and use.

I will also love to hear your feedbacks and feature suggestions. Thanks

PS: This app was created in less than a day [Vue.js sure makes everything simple].

Also I am really really open to a full time role/gig as a Vue.js dev. You can reach me on my email: akinyusuf5@gmail.com

My goals for the HNGi8 Internship

readwarn — Sun, 15 Aug 2021 22:06:53 +0000

Here comes another edition of the hng internship [https://zuri.team]. This will be be my second internship in two years, having participated in the last year, hngi7 edition. I've set a goal for myself for the 8-week remote internship.

This article is my submission for the stage one task, stating my objective at the end of the internship.

At the end of the internship, I wish to become a better communicator and improve my team-work ability.

I've been a developer for close to two years, and the hgni7 internship was part of my grooming process. The internship is a key part of my learning process, introducing me to "tech community" and valuable resources. Over the years as a developer, I've come to realize being a good 'coder' isn't always enough to thrive in the tech ecosystem. To become a successful developer, you need to be an excellent communicator, one who can express himself clearly.

As such, I wish to work on my communication skills, and on my social skills in general. I hope to be able to manage a team of developers and deliver a task/project.

Check this figma tutorial, https://trydesignlab.com/figma-101-course/introduction-to-figma/, if you are just getting started as a designer.

To get started and familiar with GIT, check this tutorial, https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners

To get started with Javascript, you can take a look at this tutorial https://www.tutorialspoint.com/javascript/index.htm

A Chat app I made using MEVN stack and socket.io

readwarn — Tue, 30 Mar 2021 18:09:53 +0000

After months of procrastination, I'm finally writing my first article as a developer
So I made a chat app with the MEVN (MongoDB, Express, Vue.js, Node.js) stack and socket.io. The app functionalities are inspired by discord app.

The app features include:

User can login with a username and password or using other social media accounts
Users are automatically added to a welcome channel
Users can create a channel
Users can search and join a channel
Users can leave a channel
Users can edit their profile and change their display picture

Features I intend to add later

Users can browse through and join public channels
Users can directly message members of a channel
A simple profile card of a user is displayed on hovering over his/her username
User can change the theme of the app.

This post will focus on how socket.io is used on the app. Here is the Link to the source code, and the live link.

However, to get a clear understanding of this post, I'll explain few key terms.

The channel schema

const mongoose=require('mongoose');
const Schema=mongoose.Schema;
const channelSchema=new Schema({
    name:String,
    description:String,
    members:[
        {
            type:mongoose.Schema.Types.ObjectId,
            ref:"User"
        }
    ],
    messages:[{
        type:mongoose.Schema.Types.ObjectId,
        ref:"Message"
    }]
})

module.exports=mongoose.model('Channel',channelSchema);

When a user sends message to a channel, the channel is updated by pushing the new message to the channel's messages array.

Channel: This represents the channel being currently viewed by a user

Channels: This represents the array of channels a user belongs to.

Updated Channel: This is a channel object updated with latest messages sent by members. i.e. new messages are already pushed to its messages array properties.

SOCKET.IO

The socket.io was used to allow for real-time bidirectional data flow between the client and the server. i.e. the client can emit event, along with some data, while the server listens to this event and handles them accordingly. This means that data can be exchanged between the client and the server without having to refresh the page.

Socket.io on the server

The socket.io is installed as shown

npm install socket.io

The socket io connection is then set up with express server as shown.

const express=require('express');
const socket = require('socket.io');
const app=express();
const server = app.listen(process.env.PORT || 3000,function(){
  console.log("running");
});

const io = socket(server,{
  cors: {
    origin: "https://calm-meadow-71961.herokuapp.com",
    methods: ["GET","PUT", "POST"],
  }
});

On the server side, the socket listens to three kinds of event emitted from the client side.

RegisterAll: This event is emitted whenever a client connects to the socket.io connection. The user's channels array is sent along with the event. This event is handled by subscribing the client to each channel's ID in the channels array i.e. the client joins an array of channel's ID room.

socket.on('registerAll',channels=>{
      channels.forEach(channel => {
         socket.join(channel._id);
      });
});

Register: This event is emitted when a user joins a new channel. The new channel object is sent along with the event. This event is handled by subscribing the client to the new channel's ID i.e. the client joins the new room.

 socket.on('register',channel=>{
       socket.join(channel._id);
})

messageSent: This event is emitted along with updatedChannel object when,
- Message is sent to a channel;
- User leaves a channel;
- User joins a channel;
- User creates a new channel. This event is handled by emitting the messageRecieved event along with the updatedChannel object to all clients that belong to the channel's ID room.

 socket.on('messageSent',(channel)=>{
       socket.to(channel._id).emit('messageReceived',channel);
    })

Note: The messageSent and the Register events are both emitted from the client when a user joins a channel or creates a new channel

Socket.io on the client

Socket.io is installed on the client side

npm install socket.io-client;

It is then imported and initialized with the express server url

<script>
import io from 'socket.io-client';
data(){
  return {
   disconnected:false,
   channels:[],
   channel:{},
   socket:io("https://whispering-everglades42925.herokuapp.com"),
  }
}
<script/>

On the client side, the client handles three events emitted from the server side.

connect: This is a reserved event emitted when a client connects to the socket.io connection. The event is handled by emitting the 'regsiterAll' event along with the user's channels [the array of channels the user belongs to] and also setting the disconnected variable to false.

this.socket.on("connect", () => {
     if(this.channels.length>0){
          this.registerChannels(this.channels);
          this.disconnected=false;
     }
});

disconnect: This is a reserved event emitted when a client is disconnected from the socket.io connection. This event is handled by setting the disconnected variable to true.

this.socket.on("disconnect", (reason) => {
      this.disconnected=true;
});

Hence the paragraph, "disconnected", is displayed whenever the client is disconnected from the socket connection
<p class="disconnected" v-if="disconnected">disconnected</p>

messageRecieved: This event is handled by replacing a channel in the array of channels with the updated channel sent with the event.

 this.socket.on('messageReceived',(channel)=>{
       this.updateChannel(channel);
});`

The updateChannel method is defined as shown below.

funtion updateChannel(updatedChannel){
             if(updatedChannel._id===this.channel._id){
                 this.channel=updatedChannel;
             }
             this.channels = this.channels.map(channel => (channel._id === updatedChannel._id) ? updatedChannel : channel)
        }

The function takes the updatedChannel argument passed with the messageReceived event, sets the currently viewed channel
to the updated channel if it is the same as the updatedChannel, then replace the outdated channel in the user's channels with the updatedChannel

There goes my first post, Thanks for reading.