Next.js Discord

Discord Forum
\n \n \n \n \nNote: These sites are cross-origin.","dateCreated":"2024-03-06T14:22:26.000Z","answerCount":27,"author":{"@type":"Person","name":"Sporting Lucas Terrier"},"suggestedAnswer":{"@type":"Answer","text":"Could someone come forward and help me resolve this issue?","url":"https://nextjs-forum.com/post/1214941165560930374#message-1215200536006103040","dateCreated":"2024-03-07T07:33:05.000Z","author":{"@type":"Person","name":"Sporting Lucas Terrier"}}}}

Event listening and emitting in NextJs

Unanswered
Sporting Lucas Terrier posted this in #help-forum
Open in Discord
Sporting Lucas TerrierOP
Hi everyone,

I have a Next.js application, and in the layout file, I'm emitting an event listener. Additionally, my deployed project's site has a button labeled "Open Chat". When this button is clicked, it triggers an action on my website. Specifically, I've implemented a feature where clicking the button sets a particular state to true, effectively opening a website.

In my layout file I've done this 
  useEffect(() => {
    const openHandler = (e: any) => {
      console.log("started");

      if (e.data === "open-chat") {
        console.log("Received 'open-chat' event from:", e.origin);
        setShowFrame(true);
      }
    };

    window.addEventListener("message", openHandler);

    return () => {
      window.removeEventListener("message", openHandler);
    };
  }, []);


And here's the HTML code for the button that replicates the functionality:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      function postMessageToParent() {
        window.parent.postMessage("open-chat", "*");
      }

    </script>
  </head>
  <body>
    <button onclick="postMessageToParent()">Open Chat</button>
  </body>
</html>


Note: These sites are cross-origin.

27 Replies

Sporting Lucas TerrierOP
Could someone come forward and help me resolve this issue?
joulev
Please do not repost the question. Bump this thread at most once a day, by sending any messages here, to make your question float to the top of the channel to gain attention from potential helpers
I’ll delete the duplicate post
Sporting Lucas TerrierOP
@Anay-208 Could you please assist me in resolving this issue?
Anay-208
I’ll see in a little while
Anay-208
@Sporting Lucas Terrier What do you need help with?
Sporting Lucas TerrierOP
@Anay-208 The issue is that I've added the event listener in my Next.js project, and I need to emit that in a different project, like Angular. There, I have one button named, for example, 'open chat.' When I click the button, it will emit the listener by changing the state. How can I achieve this?

Please find the attached code 
  useEffect(() => {
    const openChatHandler = (e: any) => {
      console.log("started");
      if (e.data === "open-chat") {
        console.log("Received 'open-chat' event from:", e.origin);
        setShowFrame(true);
      }
    };
  
    window.addEventListener("message", openChatHandler);
  
    return () => {
      window.removeEventListener("message", openChatHandler);
    };
  }, []);


To replicate this, I've created one button in an HTML page, i.e., the button in Angular. I tried emitting the listener, but it didn't work for me

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
       function postMessageToParent() {
        console.log("emittitng...", document);
        const targetOrigin = `http://127.0.0.1:5500/index.html`;
        window.postMessage("open-chat", targetOrigin);
      }

    </script>
  </head>
  <body>
    <button onclick="postMessageToParent()">Open Chat</button>
  </body>
</html>
Sporting Lucas TerrierOP
will let you know
No @Anay-208 it's not printing the un-mount console.log
Sporting Lucas TerrierOP
Yes @Anay-208 , and I've tried with the '*' but it didn't work for me.
Sporting Lucas TerrierOP
Nothing is happening when I emit the listener by clicking the button; it will run the function below, right @Anay-208 ?
const openChatHandler = (e: any) => {
      console.log("started");
      if (e.data === "open-chat") {
        console.log("Received 'open-chat' event from:", e.origin);
        setShowFrame(true);
      }
    };

but when I click the button, it prints only the 'postMessageToParent' log, not the event listener adding function log. So, is cross-origin event listening and emitting possible in Next.js?
Sporting Lucas TerrierOP
The chat is not opened yet @Anay-208 . When the state changes, only then will the chat open. I'm saying it doesn't initiate the state change while emitting the listener.
Anay-208
How did you know that state isn’t changing
You are console logging it on client side
Sporting Lucas TerrierOP
I'm sure that when the state changes, the chat will automatically open i.e., setShowFrame(true). I wrote the code like that, that's why I'm saying
My problem is that when I emit the event listener, it doesn't emit the event, or maybe I don't know if it's emitting. I need to ensure that first. Could you suggest any other method to verify that the event listener is working or not?
without doing the client-logs while emitting?
Like /log
Create it
Sporting Lucas TerrierOP
done will try that and let you know!
Anay-208
@Sporting Lucas Terrier any updates?