Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
JavaScript Answers

How to get session id of socket.io client in Client with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get session id of socket.io client in Client with JavaScript.

In this article, we’ll look at how to get session id of socket.io client in Client with JavaScript.

How to get session id of socket.io client in Client with JavaScript?

To get session id of socket.io client in Client with JavaScript, we use the id property.

For instance, we write

const sio = require("socket.io");
const app = require("express").createServer();

app.listen(8080);
const io = sio.listen(app);

io.on("connection", (client) => {
  console.log("client connected");

  client.send(client.id);

  client.on("disconnect", () => {
    console.log("client disconnected");
  });
});

to call io.on to listen for the connection event.

In the event listener, we get the client’s ID with client.id.

Conclusion

To get session id of socket.io client in Client with JavaScript, we use the id property.

Categories
JavaScript Answers

How to get img element src and set as variable with JavaScript?

Labrador retriever puppy walking on green grass

To get img element src and set as variable with JavaScript, we get the src property.

For instance, we write

const imgSrc = document.getElementById("some-img").src;

to select the img element with getElementById.

And then we get its src attribute value with the src property.

If src attribute has a relative path, then the src property would be the resolved path.

Conclusion

To get img element src and set as variable with JavaScript, we get the src property.

Categories
React Answers

How to pass props with styled-components with React?

Labrador retriever puppy walking on green grass

To pass props with styled-components with React, we pass it in as its child.

For instance, we write

const StyledWrapper = styled.div`
  /* ... */
`;

const Wrapper = ({ message }) => {
  return <StyledWrapper>{message}</StyledWrapper>;
};

to create the StyledWrapper component from the styled-components styled.div tag.

Then we create the Wrapper component that takes the message prop and pass it in as its child.

Categories
JavaScript Answers

How to load HTML template with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to load HTML template with JavaScript.

In this article, we’ll look at how to load HTML template with JavaScript.

How to load HTML template with JavaScript?

To load HTML template with JavaScript, we use the importNode method.

For instance, we write

<html>
  <head>
    <template>My template</template>
  </head>
  <body>
    <script>
      document.body.append(
        document.importNode(document.querySelector("template").content, true)
      );
    </script>
  </body>
</html>

to call importNode to import the template element’s content.

Then we call append to append the template element’s content into the body element as its last child.

Conclusion

To load HTML template with JavaScript, we use the importNode method.

Categories
JavaScript Answers

How to wait for a condition with Protractor and JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to wait for a condition with Protractor and JavaScript.

In this article, we’ll look at how to wait for a condition with Protractor and JavaScript.

How to wait for a condition with Protractor and JavaScript?

To wait for a condition with Protractor and JavaScript, we use the wait method.

For instance, we write

const EC = protractor.ExpectedConditions;
const e = element(by.id("xyz"));
browser.wait(EC.presenceOf(e), 10000);
expect(e.isPresent()).toBeTruthy();

to get the element with ID xyz with by.id.

Then we call wait to wait for the presence of the element with presenceOf.

It times out after 10000ms.

Then we check if the element is present with isPresent.

Conclusion

To wait for a condition with Protractor and JavaScript, we use the wait method.