I’m developing a chat application with Node.js and Socket.io for the backend. The frontend is built with React.js for the web and Flutter for mobile platforms.

In many implementations I’ve seen, the entire chat history is sent every time a user opens a specific chat, which seems inefficient. I want to optimize this by sending only the new messages or updates that have occurred since the user last accessed the chat.

Key Updates to Handle:

New messages that have been sent.
Actions such as message deletion, changes to group images, and other metadata updates.

I’m looking for advice on how to structure this to achieve efficient and real-time updates with minimal data overhead.

I looked at the similar questions but couldn’t find solution.

I have a vanilla JS library that I’m testing locally. The library supports both ESM and CommonJS.

---

Source Code

src/foo/Foo.js

class Foo {}

export {Foo}

src/bar/Bar.js

class Bar {}

export {Bar}

src/index.js (exporting classes)

export { Foo } from "./foo/Foo.js"
export { Bar } from "./bar/Bar.js"

---

Unit Tests

In my Unit Tests, I encounter [ERR_MODULE_NOT_FOUND] error if I use

test/foo/FooTest.js (preferable using entry point)

import {Foo} from "../../src/index.js"; // doesn't work
import chai from "chai" // is chai the problem?

but works fine if I import Foo directly

import {Foo} from "../../src/foo/Foo.js" // works, and my IDE suggests to use the above short import
import chai from "chai"

I prefer the earlier version since it uses the main entry point.

---

Package JSON file

package.json

  "name": "mylib",
  "version": "1.0.0",
  "type": "module",
  "main": "bin/cjs/mylib.js",
  "modules": "bin/esm/mylib.js",
  "exports": {
    ".": {
      "import": "./bin/esm/mylib.js",
      "require": "./bin/cjs/mylib.js"
    }
  },

I am creating a Svelte application using Firebase Database and am trying to convert a simple Firebase call to use a Query Snapshot, rather than a Get, so that I can instantly see changes on screen if the database changes.

I have some working code but it is currently not updating as I need it to and when I use the Query Snapshot code it stops working almost completely. For the purposes of this – I am simply trying to get a list of Users from the database and display them on a page, which updates if any new users are added or details are changed without the need to refresh. I will list both the working and non-working code below:

Working Code

allUsersStore.JS

import { fetchUsers } from "@api/allUsers";
import { onMount } from "svelte";
import { writable } from "svelte/store"

export function allUsersStore() {

    const users = writable([]);
    const loading = writable(false);
 

   
    onMount(loadUsers);
    
    async function loadUsers() {
    loading.set(true);
try{

   const {users: theUsers} = await fetchUsers();
   
   
   
//  console.log(theUsers)

  users.set(theUsers);



} catch(e) {
console.log("ERROR!" + e.message);
}

finally {
loading.set(false);
}



       
    }
    
    
    
 
    
    return {
    //  assignedUser: { subscribe: assignedUser.subscribe },
    users: { subscribe: users.subscribe },
    loading: { subscribe: loading.subscribe },
       // users
    
    }
    
    }

allUsers.js

import { db } from "@db/index";
import { getCountFromServer, Timestamp, doc, collection, getDocs, query, addDoc, orderBy, getDoc, where, setDoc, onSnapshot, updateDoc, deleteDoc, arrayUnion, arrayRemove } from "firebase/firestore";
async function fetchUsers() {

 const q = query(collection(db, "userData"), orderBy('fullName', 'asc'));
 const qSnapshot = await getDocs(q);
 
 const users = qSnapshot.docs.map(doc => {
     const user = doc.data();
    
     return {...user, id: doc.id}
 });


 return {users};
 
 
 }

+page.svelte

<script>
import { allUsersStore } from "@stores/allUsersStore";
const { users, loading} = allUsersStore();
</script>

{#each $users as user (user.id)}
<h2>{user.fullName} </h2>
{/each}

This code works fine to produce a list of Usernames but, as I mentioned above, it will not update if a change to the database is made. As I come from an IOS background I know about Query Snapshots so I tried to implement that solution. All I changed was the call on the allUsers.js page as below:

async function fetchUsers() {

  const q = query(collection(db, "userData"), orderBy('fullName', 'asc'));
  const unsubscribe = onSnapshot(q, (querySnapshot) => {
    const users = [];
    querySnapshot.forEach((doc) => {
        users.push(doc.data());
    });

    
  for (const x of $users) {

console.log(x.fullName)

}



return {users};

  });



}

The console.log is showing the list of users names and I can see this list updating when I trigger a change in the database, however I am now getting an error from the try/catch block on allUsersStore.JS and no list is produced on my +page.svelte. The error is:

Cannot destructure property ‘users’ of ‘(intermediate value)’ as it is undefined

Could some kind person please explain to me what I am doing wrong and if there is a better practice for what I am trying to achieve please?

Thanks in advance 🙂

this is my first question, so if I didn’t explain the problem correctly, I’d appreciate any feedback.

Issue: I’m using the following code to export a PDF, but when %{Math.abs(differenceView)} has a value between 10 and 20, dom-to-image throws an error.

Code:

const downloadPdf = async () => {
    domtoimage.toJpeg(document.getElementById('htmlToPdf'), { quality: 0.95 })
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        img.onload = function () {
          console.log(img)
          var pdf = new jsPDF();
          var width = pdf.internal.pageSize.getWidth();
          var height = pdf.internal.pageSize.getHeight();
          pdf.addImage(img, 'JPEG', 0, 0, width, height);
          pdf.save('my-pdf-name.pdf');
        };
      })
      .catch(function (error) {
        console.error('Error:', error);
      });
}

<div className="-graphic-ratio">
    <div className="graphic-ratio-div">
        <label className={
            `chart-subtitle ${differenceView > 0
                ? 'label-positive'
                : differenceView === 0
                ? 'label-neutral'
                : 'label-negative'
            }`
        }>
            %{Math.abs(differenceView) || 0}
        </label>
    </div>
</div>

Problem: When the differenceView value is between 10 and 20, dom-to-image produces an error. Does anyone know why this is happening and how to fix it?

Thanks!

How to make dynamic input with select2 and javascript that data get from database like this figure

I try to make with javascript, i try with dynamic input in javascript, i make variable function html but the database product get all that make the browser slowly respons because load a lot of data.

It is built with ReactJS. After some time (between 5-20 minutes) the site doesn’t respond anymore, user can’t click anywhere, can’t inspect elements, it is completly down. And shortly after that there comes a white screen and Chrome displays the “Aw Snap” error message (“Oh Nein” in german).

This happens with and without browser extensions enabled, in Incognito mode, with logged in or logged out users.

It is not an issue after an event or function, as it also happens on the News page where nothing runs in the background after the news have loaded.

We use Redux as store and I suspect there is too much data saved in the storage?

Google Search only tells me to reload the page, which is no solution.

Does anyone have a clue what the issue could be? Or experienced something similar with React in Chrome?

Thanks in advance!

Iam creating a card game using socket Io and the problem Iam facing is how to deal with local view and players view for example the part Iam stuck in now is when someone draw a card Iam struggling with animations and the idea that if A card got to be in the middle then how other players see it from thier view this thing is exhausting my mind And I need to find a good approach so I can use it in the future with the upcoming events that needs to get back cards to hand so reverse the animation is there any tips or anyone struggled with the multiple views

Tried to make an animation that moves the card to the middle of the field as all my cards are covered in a parent div so I can’t actually get them into the middle that easy

      <div class="deck1">
        <div class="card card1" id="card1deck1"></div>
        <div class="card card2" id="card2deck1"></div>
        <div class="card card3"></div>
        <div class="card card4"></div>
      </div>

the approach Iam thinking of is to center them all to thier parent then move them outside of the parent with negative top value or right or left based on where it’s located But Iam still strugling also so much
enter image description here

When i am clicking on submit button error not showing in form validation. But when i am changing any text in input field it’s giving errors. Like i am not filling fname field and submitting form it’s not showing anything on UI but when i type a single letter than it’s showing error. please help and let me now what is wrong in below code block?

import React from "react";
import { useState } from "react";
const Login = () => {
  const [value, setValue] = useState({
    fname: "",
    email: "",
    password: "",
    confirmPassword: "",
    gender: "",
    error: {},
  });

  const [errors,seterrors] = useState({
    fname: "",
    email: "",
    password: "",
    confirmPassword: "",
    gender: "",
    error: {},
  });

  const validateForm = () => {
    if (!value.fname) {
      errors.fname = "Name is required";
    }
    if(!value.email){
      errors.email = "Email is required";
    }
    else if(!/^[^s@]+@{1}[a-z]{5,}.{1}[w]{3,}$/.test(value.email)) {
       errors.error = "Email id invalid";
    }
    if(!value.password){
      errors.password="Password is required";
    }
    else if(value.password.length<6){
      errors.password = "Password must be at least of 6 digits long";
    }
    if(!value.confirmPassword){
      errors.confirmPassword="please confirm the password";
    }
    else if(value.password!==value.confirmPassword)
    {
      errors.confirmPassword="Password doesnot match";
    }
    return errors;
   
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const validationErrors = validateForm();
    console.log(validationErrors);
    console.log(value);
    if(Object.keys(validationErrors).length>0){
      seterrors(validationErrors);
    }
    else{console.log("form submitted");}
    
    
  };
  
  return (
    <div className="maincontainer flex items-center justify-center ">
      <div className="w-6/12 h-max bg-yellow-600 mt-10 flex items-center  justify-center ">
        <form onSubmit={handleSubmit} className=" pt-10 flex flex-col">
          <label
            htmlFor="fname"
            className="text-2xl text-rose-800 font-bold flex justify-between"
          >
            First Name : 
            <input
              type="text"
              id="fname"
              onChange={(e) => setValue({ ...value, fname: e.target.value })}
              placeholder="Type your first name"
              className="p-2 ml-5"
            />
          </label>
          {errors.fname}

          <label
            htmlFor="email"
            className="text-2xl text-rose-800 font-bold  mt-5 flex justify-between"
          >
            Email ID :
            <input
              type="email"
              id="email"
              onChange={(e) => setValue({ ...value, email: e.target.value })}
              placeholder="Type your email id"
              className="p-2 ml-5"
            />
          </label>
          {errors.email}
          <label
            htmlFor="password"
            className="text-2xl text-rose-800 font-bold  mt-5 flex justify-between"
          >
            Password :
            <input
              type="password"
              id="password"
              onChange={(e) => setValue({ ...value, password: e.target.value })}
              placeholder="Type your password"
              className="p-2 ml-5"
            />
          </label>
          <label
            htmlFor="confirmPassword"
            className="text-2xl text-rose-800 font-bold  mt-5 flex justify-between"
          >
            Confirm Password :
            <input
              type="password"
              id="confirmPassword"
              onChange={(e) =>
                setValue({ ...value, confirmPassword: e.target.value })
              }
              placeholder="Type your password"
              className="p-2 ml-5"
            />
          </label>
          <label
            htmlFor="confirm-password"
            className="text-2xl text-rose-800 font-bold  mt-20"
          >
            Gender :
            <select className="p-1 ml-6">
              <option
                onChange={(e) => setValue({ ...value, fname: e.target.value })}
              >
                Male
              </option>
              <option
                onChange={(e) => setValue({ ...value, fname: e.target.value })}
              >
                Female
              </option>
            </select>
          </label>

          <button className="w-40 h-12 bg-indigo-500 mt-10 mb-10" type="submit">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default Login;

I’m not sure how ReactJs is updating the DOM. In the case bellow, I have a table that display an array that comes from a service like this:

const [dailySchedule, setDailySchedule] = useState([]);
const [isLoading, setIsLoading] = useAtom(loadingAtom);

useEffect(() => {
    setIsLoading(true);
    myService.getSchedule(new Date())
        .then(data => {
            setDailySchedule(data);
            setIsLoading(false);
        });
}, []);

Then, I display this date in a table:

...
<tbody>
{dailySchedule.map((row, i) => (
    <tr key={i}>
        <td>
            <ScheduleActions
                schedule={row}
                someAction={someActionHandler}>
            </ScheduleActions>
        </td>
        <td>{item.name}</td>
        <td>{item.foo}</td>
        ...

someActionHandler:

const someActionHandler= (row) => {
    myService.someAction(row.id)
        .then((response) => {
            row.foo = response.data != "" ? response.data : null;
            setDailySchedule([...dailySchedule]);
        }).catch((error) => {
            toast.error(error.response.data);
        });
}

What’s getting updated in my page? Is it the entire table or only the row that is changing in someActionHandler?

How can we translate the below python function to javascript? Thanks.

def coloring(a): #takes an integer number, returns rgb color
    a = a % 255 
    akM = a // 43 
    ypD = a % 43 
    if   akM == 0: color = (255, ypD*255/43, 0)
    elif akM == 1: color  = (255-ypD*255/43, 255, 0)
    elif akM == 2: color = (0, 255, ypD*255/43)
    elif akM == 3: color = (0, 255-ypD*255/43, 255)
    elif akM == 4: color = (ypD*255/43, 0, 255)
    elif akM == 5: color = (255, 0, 255-ypD*255/43)
    return color

I tried the basics, but no solution.

I’ve written an automation task using selenium python, I want to automate form submission on this website:
https://portal.311.nyc.gov/article/?kanumber=KA-01060
after filling out the forms, there is a google recaptcha version 2, I solve it using the twocaptcha api and submit the answer in the reponse element as followed:

recaptcha_iframe = driver.find_element(By.XPATH, '//iframe[@title="reCAPTCHA"]')
sitekey0 = recaptcha_iframe.get_attribute("src")
sitekey = sitekey0[sitekey0.index("&k=") + len("&k=") : sitekey0.index("&co")]
driver.execute_script("arguments[0].scrollIntoView();", recaptcha_iframe)
response = solver.recaptcha(sitekey, driver.current_url)
code = response['code']
print("Captcha solved.")
# Set the solved Captcha
recaptcha_response_element = driver.find_element(By.ID, 'g-recaptcha-response')
driver.execute_script(f'arguments[0].value = "{code}";', recaptcha_response_element)
print("captcha answer submitted.")

until here everything is good. after that, there is an inactive submit button below the captcha that submits the form. but it’s like the proper callbacks are not executed after the submission of the answer, and the checkbox of the captcha doesn’t get checked. I don’t know how fix it. Please help me.

I’ve tried so many things by now.
I tried to execute scripts using python, such as grecaptcha.render(). there isn’t a grecaptcha.execute() function.
I’ve tried removing the disabled attribute of the submit button as below:

submit = driver.find_element(By.XPATH, "//*[contains(text(), 'Complete and Submit')]")
if submit.get_attribute('disabled'):
    driver.execute_script('arguments[0].removeAttribute("disabled");', submit)

but after clicking the modified button the website gives me an error.

I’ve tried to find the callback function or data in the website HTML inspect, but there isn’t anything as such there.
I went to the sources tab and found the render function, which is as bellow:

               var b = function() {
                    grecaptcha.render(s.value, {
                        sitekey: c.value,
                        theme: l.value,
                        size: u.value,
                        callback: function(t) {
                            return n("verify", t)
                        },
                        "expired-callback": function() {
                            grecaptcha.reset(),
                            n("expire")
                        },
                        "error-callback": function() {
                            return n("fail")
                        }
                    })
                }
                

as you can see the callback function is callback: function(t) { return n("verify", t) }, but it’s not global and I can’t execute it or find it anywhere.

another thing I tried is analyzing the network tab of the developer mode, fount the userverify post request, and tried to implement it manually as such:

        url = "https://www.google.com/recaptcha/api2/userverify?k=" + sitekey

        # Headers extracted from the HAR file
        headers = {
        'authority': 'www.google.com',
        'method': 'POST',
        'path': '/recaptcha/api2/userverify?k=' + sitekey,
        'scheme': 'https',
        'accept': '*/*',
        'accept-encoding': 'gzip, deflate, br, zstd',
        'accept-language': 'en-US,en;q=0.9',
        'content-type': 'application/x-www-form-urlencoded;charset=UTF-8',
        'cookie': '__Secure-3PAPISID=OMx7ukSBc0BpS5Na/Alxk-9ULAxcM07AIZ; __Secure-3PSID=g.a000mwj-1j3R4kek2s6gLGfa4606_k1GVKHnam8CHX4Uz0-U8lN6WENsEOIWnWVwGC7329HsUAACgYKAd8SARQSFQHGX2MiF0t66p3fGx0sYUWOQtW-GxoVAUF8yKrbjqcFQM_j1FG6L3jfXDBs0076; NID=516=S6ixUATP9JhzCb1U1USb8dIO2BSq2SKwPMW9HdgJ9l391dixtPJEGcy4xH2Vnc3ayD293fvhCAr2GJp5EDIeYbtV-wqzr4obdY0B3pRqJxb9LwBVgQa8_8UXIvPfWNvm3aAuN8Y90CvVeBEtKHm02hp6bT6GpuZLPKzAKYL1maQiD1dFunLu2LN5DIZMXW6hF3aGi5c1MWsjF-ZeOcEGBanWK8sN8Ytv_KZ7LwcDCMvFmPhBe0WCJixBpDLH2ttLUQbg6cHObPJiMtWNS-s7VbUaGAwDoPtjIbLbIqt2mZyVsa5mZWOjNlNkdIvw1VI5D3GZJxmKmGMKO2oOV7VnN-gNE9r23Myj8Hw9eWH5tyeUnK0mgtACpw_cCohdnznAGHFYWIU7bet1HciAruMwHuXnkg-X6r-ink7How; __Secure-3PSIDTS=sidts-CjABUFGoh9oMvO4pakCAadU9471P44GHs2OOrqNqjqmD2F_kFoRI--TPpayogOJdM7MQAA; __Secure-3PSIDCC=AKEyXzUNiD_0j4-HsRr0MwP8hjlXFxIWm-5KDwZAsPF0mV0k3wSfCcQXhZyTGq18mV5bYA1ZHP_X',
        'origin': 'https://www.google.com',
        'referer': 'https://www.google.com/recaptcha/api2/bframe?hl=en&v=_ZpyzC9NQw3gYt1GHTrnprhx&k=' + sitekey,
        'user-agent': 'Your User Agent String',
        }

        # Body extracted from the HAR file (you'll need the actual token and other parameters)
        data = {
        'c': code,  # replace this with the actual token
        'k': sitekey,
        'response': code,  # replace this with the actual token
        # Additional fields may be required depending on the original request
        }

        response = requests.post(url, headers=headers, data=data)

        print("Response Status Code:", response.status_code)
        print("Response Body:", response.text)

and this is the result I get:
Response Status Code: 200
Response Body: )]}’
[“uvresp”,null,null,null,0]

I also tried getting the cookies from selenium and sending them in the request but the result was the same.

I also tried this script:

driver.execute_script("""
    for (var key in window) {
        if (window[key] && typeof window[key].callback === 'function') {
            window[key].callback();
            break;
        }
    }
""")

but received this error:
selenium.common.exceptions.JavascriptException: Message: javascript error: {“status”:18,”value”:”Failed to read a named property ‘callback’ from ‘Window’: Blocked a frame with origin “https://portal.311.nyc.gov” from accessing a cross-origin frame.”}

I’m very frustrated, please help me.

I run my client side first then server side in my react.js project built using MERN stack and got the error below. Web UI runs well on client side.
If I run the client side first the web interface loads perfectly at localhost:3000 but after running server side and reloading I get the following error how do I fix this?

VM6068:1 Uncaught 
SyntaxError: "undefined" is not valid JSON
    at JSON.parse (<anonymous>)
    at ./src/redux/slices/localSlice.js (localSlice.js:4:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/redux/store.js (taskSlice.js:39:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:22:1)
    at fn (hot module replacement:61:1)
    at ./src/index.js (SidebarContext.js:3:1)

(https://i.sstatic.net/BHsmyiyz.png)

Please assist me in debugging this error

I’m working on a legacy system looking at ways to increase performance. It’s an MVC project with C# backend (upgraded to .net 8) and a Javascript/JQuery front-end. The front-end code is using AJAX to make it’s calls and it’s all working fine but I’m trying to switch it to using Fetch, and I’ve hit a bit of a brickwall. The server side routines all use the following style:

public IActionResult SearchCerts(string Company, string ExpStart, string ExpEnd)
{
...
  return PartialView("_SearchResults", Results);
}

and they’re called using:

function SearchCerts() {
    $.ajax({
        url: "/Certs/SearchCerts",
        data: { 
            Company: document.getElementById("edtSearchCompany").value,
            ExpStart: document.getElementById("edtSearchExpires1").value,
            ExpEnd: document.getElementById("edtSearchExpires2").value
        },
        dataType: "html",
        async: true,
        success: function (data, textStatus, XMLHttpRequest) {
            $('#divSearchResults').html(data);
        },
        error: function (xhr, ajaxOptions, thrownError) {
        alert("Error");
        }
    });
}

When I try to use Fetch, all of the parameters come across as null and the only way I seem to be able to pass anything in is to update the server side routine to accept an IFormCollection parameter (pulling out the individual values when needed) and pass in a FormData variable like so:

async function SearchCertsExecute() {

    var formData = new FormData();
    formData.append('Company', document.getElementById("edtSearchCompany").value);
    formData.append('ExpStart', document.getElementById("edtSearchExpires1").value);
    formData.append('ExpEnd', document.getElementById("edtSearchExpires2").value);

    let Results = await fetch("/Certs/SearchCerts", {
        method: 'POST',
        body: formData
    });

    if (Results.ok) {
        var data = await Results.text();

        $('#divSearchResults').html(data);
    } else {
        alert("HTTP-Error: " + Results.status);
    }
}

I’ve tried creating a Javascript object containing the and then using JSON.stringify but still the server gets nothing but nulls:

    var SendData = {
    Company: document.getElementById("edtSearchCompany").value,
    ExpStart: document.getElementById("edtSearchExpires1").value,
    ExpEnd: document.getElementById("edtSearchExpires2").value
    };

    let Results = await fetch("/Certs/SearchCerts", {
        method: 'POST',
        body: JSON.stringify(SendData)
    });

Can anybody shed any light on what I’m missing?

I want to create a chart where date is an x-parameter, so that the user can choose from what date and to what date to view the chart, as is usually implemented on cryptocurrency-related sites (I will attach an example below). But I don’t know what this type of chart is called, so I couldn’t even find an example on the Internet. I’m using html/css/js and the chart.js library

Here is an example of the chart I want to create (pointed to the date range selector with an arrow)
Now I have this chart

Code:

import Chart from 'chart.js/auto'

const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

const data = [
  { date: new Date('13 aug 2024'), price: 10 },
  { date: new Date('14 aug 2024'), price: 10.2 },
  { date: new Date('15 aug 2024'), price: 10.4 },
  { date: new Date('16 aug 2024'), price: 10.1 },
  { date: new Date('17 aug 2024'), price: 8 },
  { date: new Date('18 aug 2024'), price: 10 },
]

new Chart('chart', {
  type: 'line',
  options: {
    plugins: {
      legend: {
        display: false
      }
      ,
    },
    interaction: {
      mode: 'index',
      intersect: false
    }
  },
  data: {
    labels: data.map(row => `${row.date.getUTCDate()} ${months[row.date.getMonth()]}`),
    datasets: [
      {
        label: 'Price',
        data: data.map(row => row.price)
      }
    ]
  }
})

I’d like to know if annotations are supported for the following chart types:

• Dependency wheel
• Wordcloud
• Pie/Donut
• Treemap

I was able to get annotations work with “simple” charts that have X and Y axes, but I’m having trouble with those above. I would like to use mock points instead of point ID.

I tried specifying mock points just like I did for XY-axis charts, but I just could not get it to work.