Category: javascript

I have an img tag. The image inserted has different parts:
I want to be able to color each white part alone.
I tried using this function:

function getPixels(img)
{
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
    originalPixels = ctx.getImageData(0, 0, img.width, img.height);
    currentPixels = ctx.getImageData(0, 0, img.width, img.height);

    img.onload = null;
}

function hexToRGB(hex)
{
  console.log(hex)
    var long = parseInt(hex.replace(/^#/, ""), 16);
    return {
        R: (long >>> 16) & 0xff,
        G: (long >>> 8) & 0xff,
        B: long & 0xff
    };
}

function changeColor(a,b,c)
{
    if(!originalPixels) return; // Check if image has loaded
    var newColor = {R: eval(a), G: eval(b), B: eval(c)};

    for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
    {
        if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
        {
          console.log(currentPixels.data[I + 3])
           if ((currentPixels.data[I]!=0 && currentPixels.data[I+1]!=0 && currentPixels.data[I+2]!=0)) {
            currentPixels.data[I] = newColor.R;
            currentPixels.data[I + 1] = newColor.G;
            currentPixels.data[I + 2] = newColor.B;
           }
        }
    }
    console.log(newColor)
    ctx.putImageData(currentPixels, 0, 0);
    mug.src = canvas.toDataURL("image/png");
}

function valueToHex(c) {

  var hex1 = c.toString(16);

  return hex1


}

But this is the output:

I had the idea to make a condition in which i can detect all the white pixels color them and stop when a black pixel is detected, so it doesn’t go out of line, and then i can color each white part of the image of a different color. But i didn’t know how to do it as i’m really new to the pixel field.
Could you help me please?

So I had 2 approaches:

1. Get presigned urls and load it. In this case, I could not find how to play them in a row in the same player. I tested with mediasource and hls.js. I could not get anywhere with the former and the latter seems to expect a m3u8 playlist which i don’t have because the list of media is dynamic
2. Get the bytes from minio and load it with mediasource and sourceBuffer. In this case, unfortunately, I get “Uncaught DOMException: The quota has been exceeded.” error. I guess because it loads too much data

Using the 2nd approach, I got this code.

I have a websocket, from which I can request the list of files I need to get. Once I have it I get all files as bytes (Blob) and add it in the sourceBuffer. Seems to be too much though…

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<video id="player" controls>
</video>

<script>
    $(document).ready(function () {
        axios({
            url: 'http://localhost/api/foo/963806d50d1f4090b3f5c9a6db59fd8f',
            method: 'get',
            headers: {
                'content-type': 'application/json',
                "Authorization": "Bearer " + "XXX"
            }
        }).then(function (response) {
            var ip_cameras = response.data.ip_cameras.split(",");
            ip_cameras.forEach(function (element, index) {
                if (index == 0) {
                    var stream_name = element;
                    const videoElement = document.getElementById('player');
                    // Create a new MediaSource object
                    const mediaSource = new MediaSource();
                    // Set the source of the video element to the MediaSource object
                    videoElement.src = URL.createObjectURL(mediaSource);

                    var list_videos;
                    // IMPORTANT STARTS HERE
                    // Wait for the MediaSource to become ready
                    mediaSource.addEventListener('sourceopen', function () {
                        // Create a new SourceBuffer
                        const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640028');
                        sourceBuffer.mode = "sequence"
                        // sourceBuffer.timestampOffset = 20;

                        // Connect to the WebSocket endpoint
                        ws = new WebSocket('ws://localhost/api/robots/ip_camera_ws_minio?camera=' + stream_name + "&start=" + "2022-12-07T20:15:22.000Z" + "&end=" + "2023-01-07T21:15:22.000Z" + "&robot_name=" + "david-pc" + "&robot_id=" + "963806d50d1f4090b3f5c9a6db59fd8f");

                        // Append video segments to the SourceBuffer as they are received over the WebSocket connection
                        let sum = 0;
                        var mediaDataQueue = []

                        ws.onmessage = function (event) {
                            if (event.data instanceof Blob) {
                                const fileReader = new FileReader();
                                fileReader.onload = function () {
                                    mediaDataQueue.push(fileReader.result);
                                    if (sourceBuffer.updating === false && mediaDataQueue.length > 0) {
                                        // Check if the SourceBuffer is not in the process of updating and there is data in the queue
                                        let data = mediaDataQueue.shift();
                                        // Append the data to the SourceBuffer
                                        sourceBuffer.appendBuffer(data);
                                    }
                                };
                                fileReader.readAsArrayBuffer(event.data);
                            }
                            else if (event.type === "message" && JSON.parse(event.data).type == "metadata") {
                                list_videos = JSON.parse(event.data).data
                                ws.send('{"cmd": "GET_VIDEO", "remote_path": "' + JSON.parse(list_videos[0]).remote_path + '"}');
                                // console.log("count vides:" + list_videos.length)
                                for (let i = 0; i < list_videos.length; i++) {
                                    let obj = JSON.parse(list_videos[i]);
                                    sum += obj.duration;
                                    ws.send('{"cmd": "GET_VIDEO", "remote_path": "' + JSON.parse(list_videos[i]).remote_path + '"}');
                                    mediaSource.duration = sum;
                                }
                            }
                        };
                        ws.onopen = function () {
                            ws.send('{"cmd": "GET_METADATA"}');
                        }

                    })
                }
            });
        });
    })
</script>

I suppose I need to load the video progressively, not all at once but I can’t find how to do that…I also have no constraint using a 3rd party library.

Thanks!

I am using next js, next auth and a custom backend (flask), where I am using API Endpoint secured with jwt token.
In the next js frontend I want to access this jwt token with the useSession hook to make requests to this API Endpoints. With the CredentialsProvider everything works fine. I was able to register and login a user and can get access the jwt token. When I am using useSession with credentials login, I have the data in the following format, which is what i want (token.sub is my jwt access token) :

{
    "data": {
        "session": {
            "user": {},
            "expires": "2023-02-06T21:35:50.296Z"
        },
        "token": {
            "sub": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmcmVzaCI6ZmFsc2UsImlhdCI6MTY3MzEyNzM1MCwianRpIjoiZDJmODIwZjAtOGYxOS00Y2Q5LTk0Yxxxxxxx",
            "iat": 1673127350,
            "exp": 1675719350,
            "jti": "53b9fcaa-3aa9-4567-9381-341231144e72"
        }
    },
    "status": "authenticated"
}

however when I use the google login I am getting this format:
All I want is to get the jwt access token from my backend.

{
    "data": {
        "session": {
            "user": {
                "name": "google name",
                "email": "google email",
                "image": "google pic"
            },
            "expires": "2023-02-06T21:24:09.905Z"
        },
        "token": {
            "name": "google user name",
            "email": "google email",
            "picture": "google pic",
            "sub": "115092xxxxxxx",
            "iat": 16731xxxx,
            "exp": 1675xxxx6,
            "jti": "1fc246fa-xxxxxx"
        }
    },
    "status": "authenticated"
}

This is the code for next-auth. To get the access with google login I added the signIn callback and add there the request to my backend to get the jwt access token.

import NextAuth, { NextAuthOptions } from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import GoogleProvider from "next-auth/providers/google"
import API from "../../../API";
import axiosHandler from "../../../axios-handler";


const authOptions = {
  session: {
    strategy: "jwt",
  },
  providers: [
    CredentialsProvider({
      type: "credentials",
      credentials: {},
      authorize: async (credentials, req) => {
        const loginResponse = await axiosHandler.post(credentials.isRegister? API.REGISTER :API.LOGIN, credentials)
        if(loginResponse.data){
          return {
            id: loginResponse.data.token,
            token: loginResponse.data.token,            
          }
        }
        return null
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    })
  
  ],
  pages: {
    signIn: "/auth/signin",
  },
  callbacks: {
    async session({ session, user, token }) {
      return {session, user, token}
    },

    async jwt({ token, user, account, profile, isNewUser }) {
      return token
    },
    async signIn({user, account}){
      if(account?.provider ==="google"){
        const googleAuthData = {
          name: user.name,
          email: user.email,
          image: user.image,
          authProvider: 'google',
          password: ''
      }
      const loginResponse = await axiosHandler.post(API.LOGIN, 
        {
          name: googleAuthData.name, 
          email: googleAuthData.email, 
          secretKey:"xxx"})
      if(loginResponse.data){
        return {
          ...user,
          id: loginResponse.data.token,
          token: loginResponse.data.token
        }
      }
      }
      return user
      
    }
  },
};

export default NextAuth(authOptions);

I have two Svelte components, a Parent and a Child. The Parent has an item. The Child has a button. When you click the Child button, the click handler should toggle a boolean in the Parent’s item.

I expected the Child to be re-rendered because I passed it a new value. I want the text label on the button to toggle between “open” and “close”.

What actually happens is nothing.

<script>
// Parent.svelte

import Child from "./Child.svelte";

let item = {id: 1, open: false};

function onToggle(e) {
    item = {...item, open: !(item.open)};
    console.log("onToggle:", item);
}
console.log("Parent:", item);
</script>

<Child
  open={console.log("Child prop:", item) && item.open}
  onToggle={onToggle} />

<script>
export let open = false;
export let onToggle = null;

let buttonLabel = "open";
if (open) {
    buttonLabel = "close";
}

console.log(`Child: open=${open}; buttonLabel=${buttonLabel}`);
</script>

<button on:click={onToggle}>{buttonLabel}</button>

After clicking the button a few times this is what I see. It seems like item.open is being toggled, but Child isn’t being re-rendered with the new value.

"Parent:" { id: 1 ,open: false }
"Child prop:" { id: 1 ,open: false }
"Child: open=false; buttonLabel=open"
"onToggle:" { id: 1 ,open: true }
"Child prop:" { id: 1 ,open: true }
"onToggle:" { id: 1 ,open: false }
"Child prop:" { id: 1 ,open: false }

Good day. I hope you can help me. I have a code that searches in a google sheet cell a value entered in an input. I would like to see the possibility of that value being looked up in a range of cells in a google sheet (instead of a single cell). And check if the data captured in the input matches any of the values in the range of cells of the google sheet. I can’t find how to identify the individual value entered in the input, but I have seen that if I enter in the input all the values in the range of the Google sheet and they are separated by a comma (example: Peter,George,Sophie,Neil, Carl), the code runs fine. The point is that only one value should be captured in the input field.
How do I enter a single value in the input field and it can be searched and chek in the range of values of the google sheet only using javascript?
Thank you all again for your time and help.

HTML

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
</head>
<br>
NAME:<br>
<input type="text" id="name">

<script>
    function checkUser(user_name) {
        if (document.getElementById("name").value == user_name) {
            alert("correct");
        }
        else {
            alert("incorrect");
        }
    }

    function runCheck() {
        google.script.run.withSuccessHandler(checkUser).fetchUserValues1()
    }
</script>

<input type='button' value='VALIDATE' onclick="runCheck()">

</html>

GS

function doGet() {
  var template = HtmlService.createTemplateFromFile("page1")
  return template.evaluate().setSandboxMode(HtmlService.SandboxMode.IFRAME);
  return HtmlService.createHtmlOutputFromFile('page1');
}

function fetchUserValues1(){
    var ss = SpreadsheetApp.openByUrl("Google Sheet URL"); 
     var sheetNames = ss.getSheetByName("Sheet 1"); 
  var user_name  =  sheetNames .getRange("A2:A5").getValues();
    return user_name;
}

Today i faced this problem: i was trying to create a chessboard app (with Electron) using the chess.js modules and the problems showed quickly… I need to use in my render.js file all methods/features that chess.js offers, such as chess.move(), chess.fen() and so on… But after setting sandbox: false (in webPreferences) and writing this in my preload script (preload.js):

const { contextBridge, ipcRenderer} = require('electron')
contextBridge.exposeInMainWorld(
    'electron',
    {
        //other code

        
        getChess : () => {
            const {Chess} = require('chess.js');
            return chess = new Chess;
        }
    }
)

i am unable to use any the methods (to make things more clearer, i am enable to use the “chess” istance of Chess in my render script, i can log this, and it will show the obj (as expected))
this is my render script (render.js):

//get Chess through preload.js
const chess = window.electron.getChess();

//✅ Working (showing the chess obj)

console.log(chess)


//❌ Not Working   (example  Uncaught TypeError: chess.move is not a function)
     
chess.move('e42')
chess.inCheck()
chess.isAttacked()
chess.load()
chess.clear()
chess.board()
chess.fen()
chess.png() 
//. . .

Probably is something stupid to ask, but it seems to me hard to get through.
chess.js have a lot of methods .fen, .move, .load … i need a way to include all to my render.
I don’t wanna set nodeIntegration: true due to security reason.

idk if it will help but here is my main.js file :

const { app, BrowserWindow, Menu, ipcMain} = require('electron')
const path = require('path')
const ipc = ipcMain
Menu.setApplicationMenu(false)

const createWindow = () => {
    const win = new BrowserWindow({
        width : 1500,
        height : 900,
        resizable: false,
        titleBarStyle: 'hidden',
        frame: false,
        webPreferences: {
            nodeIntegration: false, // is default value after Electron v5
            contextIsolation: true, // protect against prototype pollution
            enableRemoteModule: false, // turn off remote
            devTools: false,
            sandbox: false,
            preload: path.join(__dirname, 'preload.js'),
        }
    })
    //win.webContents.openDevTools()
    win.loadFile("src/index.html");
    ipc.on('closeAPP', () => {
        win.close()
    })
    ipc.on('minimizeAPP', () => {
        win.minimize()
    })
    ipc.on('maximizeAPP', () => {
        win.maximize()
    })
    
}

app.whenReady().then( () => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})


app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

There is a way to use all the methods ?

I am encountering strange behavior when setting the clipboard in JavaScript and pasting in excel. When I copy and paste directly into excel I get this first format where the cell is expanded vertically and the content is wrapped however when I paste into a text editor first, copy the exact thing that was pasted, and then paste into excel, I get the second format where it either cuts off the part that overflows the cell or expands into empty cells. What determines the format of pasted text in excel? is there a way I can force achieve the second format straight from the copied text from JS?

I am not sure if this will help in solving the problem but I copying the data from a table generated with the Handsontable library using a custom function to overwrite the copy data with the beforeCopy hook.

Nothing looks different in the copied text that I can tell, Here are the two different strings that result in different formatted outputs:

This is a test of copying and pasting text from JavaScript.

This is a test of copying and pasting text from JavaScript.

They look identical to me so I am not sure where the format difference is coming from.

Thanks.

Recently I started having Issues with the Google Tag Manager.
I can’t track it to a Tag or a Trigger (activated and deactivated individually to check).

The error started occurring this week (no updates were made to the system or template). I noticed when testing the implementation of a new Tag in GTM. That shortly worked but then this error message started showing in the console. Removing the new Tag didn’t change the situation and since the code worked for a while (some 30minutes) I don’t expect a direct relationship between the new tag and the error.

All I have is the console in the frontend that shows the following error message:
Uncaught TypeError: Wb.set is not a function
The error stems from this file:
https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX

Wb is started as a Map just a few steps earlier:
Wb=new Map(Vb.h.F);
Wb.set(“style”,{ya:4});

The GTM Script is copied and pasted from the GTM-Admin without any change made to it and is included in the header.php file of the WordPress template. I tried copying it again and replacing the script that was in the header.php previously but the result was the same.

If looking at the actual error message in the console helps, the issue can be seen on the following URL:
https://www.bindella.ch

Any help in solving this or at least pointer to where to go look for errors would be very much appreciated.

Thanks

Using JS to add some interactivity to the form and now would like to redirect the user to a different url and be able to do it dynamically. Using plain JS as of now, need ideas. Adding sample code below.

book.addEventListener('submit', (e) => {
    e.preventDefault();
    const submitButton = document.getElementById('book');
    submitButton.disabled = true;
    submitButton.innerHTML = 'Booking...';
    setTimeout(() => {
        submitButton.innerHTML = `<i class="fa-solid fa-check" style="color: white; text-align: center;"></i>`;
    }, 1000);
    // return user to profile page
});

Not really sure what to try as I am new to using JavaScript.

I have a JSON data which also contains an array field I want to convert that JSON data in excel format for that I am using XLSX library.

Below is my code:

const XLSX = require('xlsx');
const path = require('path');

const workSheetColumnNames = ['name','hobbies'];

const sheetName = 'Reports';

const filePath = './final_report.xlsx';

const exportSheetToExcel = (data,workSheetColumnNames,sheetName,filePath) => {

 const data = [
              {
              name:'Paul',
              hobbies: ['Football','Reading']
              },
              {
              name:'Riya',
              hobbies: ['Singing','Dancing']
              },
              {
              name:'Jack',
              hobbies: ['Gaming']
              }, 
              ...  
             ]


 const lists = data.map((res) => {
    return [res.name,res.hobbies];
 })



 const workSheetData = [workSheetColumnNames,...lists];
 const workBook = XLSX.utils.book_new();
 const workSheet = XLSX.utils.aoa_to_sheet(workSheetData);
 XLSX.utils.book_append_sheet(workBook,workSheet,sheetName);
 XLSX.writeFile(workBook,path.resolve(filePath));

 return true;

}

exportSheetToExcel(data,workSheetColumnNames,sheetName,filePath);

Now the problem is its creating the excel file but for hobbies column whereever there is more than 1 items in array its showing ERR:509 in excel file hobbies column.

Is there any way so that I can enter multiple items in same column in excel file.Anyone help me know.

I am importing some static images and I have no problems with
npm run dev

but when I try to use
npm run build
or
next build
it fails and I can’t even deploy it to vercel

next info
    Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Home
    Binaries:
      Node: 16.14.2
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:        
      next: 13.1.1
      eslint-config-next: N/A 
      react: 18.2.0
      react-dom: 18.2.0  

npm run dev/next build:

Failed to compile.

HookWebpackError: File E:GithubProject.nextstaticmediaIMG_1764.59cd3605.JPG does not exist.
    at makeWebpackError (E:GithubProjectnode_modulesnextdistcompiledwebpackbundle5.js:28:308185)
    at E:GithubProjectnode_modulesnextdistcompiledwebpackbundle5.js:28:105236
    at eval (eval at create (E:GithubProjectnode_modulesnextdistcompiledwebpackbundle5.js:13:28771), <anonymous>:27:1)
    at E:GithubProjectnode_modulesnextdistcompiledwebpackbundle5.js:28:68649
    at E:GithubProjectnode_modulesnextdistbuildwebpackpluginsnext-trace-entrypoints-plugin.js:437:143
-- inner error --
Error: File E:GithubProject.nextstaticmediaIMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:[email protected]:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:[email protected]:1:35430)
    at async E:GithubProjectnode_modulesnextdistbuildwebpackpluginsnext-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:GithubProjectnode_modulesnextdisttracetrace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:GithubProjectnode_modulesnextdistbuildwebpackpluginsnext-trace-entrypoints-plugin.js:90:9)
caused by plugins in Compilation.hooks.processAssets
Error: File E:GithubProject.nextstaticmediaIMG_1764.59cd3605.JPG does not exist.
    at Job.emitDependency (E:[email protected]:1:39473)
    at async Promise.all (index 10)
    at async Object.nodeFileTrace (E:[email protected]:1:35430)
    at async E:GithubProjectnode_modulesnextdistbuildwebpackpluginsnext-trace-entrypoints-plugin.js:136:28
    at async Span.traceAsyncFn (E:GithubProjectnode_modulesnextdisttracetrace.js:79:20)
    at async TraceEntryPointsPlugin.createTraceAssets (E:GithubProjectnode_modulesnextdistbuildwebpackpluginsnext-trace-entrypoints-plugin.js:90:9)

and as soon as I try to build my npm run dev doesn’t work anymore and says

I have a table where a NavLink, when clicked, should take the user inside a game room – as a player or observer, depending on whether the room is filled. My problem is that the user.id I need is in the NavLink’s uncle component – the ‘creator’ tag in the same row.

What’s the simplest way of fetching the data? Here’s the table I’m working with:

<table style={{border: "3px solid rgb(0, 0, 0)"}}>
      <thead>
        <tr>
          <th>Creator</th>
          <th>Opponent</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        {props.games.length > 0 ? (
            props.games.map((user) => (
            <tr key={user.creator}>
                <td>{user.creator}</td>
                <td>{user.opponent ? user.opponent : "-------"}</td>
                <td>
                  <NavLink to='/Game' onClick={props.joinGame}>Join a Game</NavLink>
                </td>
            </tr>
            ))
        ) : (
            <tr>
            <td colSpan={3}>No games</td>
            </tr>
        )}
      </tbody>
    </table>

I tried getting the key from the grandparent tag directly but I don’t know how because I’m a beginner.

I am trying to create a minimap feature, I have two HTML elements and these can be image or div, so when a user clicks on an element it should give/translate the coordinates of another target element.

The clicked element size (w/h) will always be small and the position will be absolute. so far I am succeeded to get clicked element position but I am not able to translate these coordinates into the target element.

https://jsfiddle.net/shoaib_ijaz/n1hzuc9r/

 $(".child").click(function(e) {

   var offset = $(this).offset();

   var left = e.pageX - offset.left;
   var top = e.pageY - offset.top;

   var circle = $("<div />", {
     class: 'circle'
   });

   $(circle).css({
     left: left,
     top: top
   });

   $(".parent").append(circle);
 });

.parent {
  border: 3px solid #000;
  background: #898383;
  width: 100%;
  height: 300px;
}


.child {
  background: #fff;
  position: absolute;
  right: 15px;
  bottom: 40px;
  width: 200px;
  height: 100px;
  border: 2px solid #eff431;
}


.circle {
  width: 10px;
  height: 10px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div class="parent">
   <div class="child">
     child
   </div>
 </div>

 <!-- some times the child element can be outside the parent element -->

I have a webpage here.I have a carousel in which an image is animated as coming from right. When it comes from right I can see a strange thing that all the fixed content (walk me through and chat icon) suddenly change their position when the image comes from right.This is the normal position.This is when the image comes from right.The walk me through and the chat icon are fixed relative to the body element. I have a raw guess that the two images due to being part of the page with display not none, change the calculated height of the body element. But the problem is that it happens in responsive mode only in chrome and otherwise it works fine when viewed without responsive mode on chrome.

I’m trying to emit an event from the server side to a single socket on the client side. The acknowledgement is received quickly with a response of empty array. However there is nothing client side listening for the event. Emitting with a randomly generated event name has the same result. I have checked that the socket ID is correct. Emitting to a randomly generated socket ID has the same result.

Code:

const eventName = 'unheard-event';
this.io
  .to(this.combatantA.socketId)
  .timeout(5000)
  .emit(eventName, this.combatantA.name, (err, response) => {
    if (err) {
      // the other side did not acknowledge the event in the given delay
      console.log(`${eventName} err`, err);
    } else {
      console.log(`${eventName} response`, response);
    }
  });

Response:

I would expect this to timeout and hit the if(err) block of code in every scenario.

I’ve combed through the socket.io 4.x documentation and it doesn’t cover this anywhere that I can find. https://socket.io/docs/v4/emitting-events/#acknowledgements

Can anyone shed some light on what is happening here?