How can I enable Socket IO in my web development project?

Technical Q&A

Topic summary

Main issue: Enabling Socket.IO (real-time client-server communication library) within a Shopify storefront to react to Wistia player events.

Context: The author embeds Wistia scripts and a Socket.IO script, intending to keep a script running that listens for Wistia payloads and updates a payloads array to trigger actions based on video interaction (play time, etc.).

Code details: Uses a CDN script tag for Socket.IO (version path ends with /1.7.3/N) and initializes with var socket = io();, then listens with socket.on(‘e vent’, …). The reported error occurs at var socket = io().

Current status: No fix or workaround is shared. A second participant asks if a solution was found and notes Socket.IO also doesn’t work for them in an app theme extension.

Outcome: No resolution or confirmed approach. The thread remains open with unanswered questions about how to correctly enable and initialize Socket.IO in this Shopify context.

Summarized with AI on February 1. AI used: gpt-5.
1

Hello!

I’m trying to develop a small snippet using Socket IO and webhooks, but I’m not sure how to enable Socket IO in Shopify.

The code itself is:

    <!-- Standard (aka async) embed -->
    <script src="https://fast.wistia.com/embed/medias/t7clqlza0a.jsonp" async></script>
    <script src="https://fast.wistia.com/assets/external/E-v1.js" async></script>
    
    <!-- Socket.IO -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/1.7.3/N"></script>
    <script>
      window.payloads = [];
      var socket = io();
      socket.on('event', function(payload){
        if (payload.visitor.id == Wistia.visitorKey.value()) {
          // Prepend the latest payload to the array of payloads.
          payloads.unshift(payload);
          // DO FANCY THINGS
        }
      });
    </script>

I get an error at “var socket = io();”

For more context, the script will be running all the time and “waiting” for the user to interact with the Wistia Player. When ever the Wistia server sends a new payload, the script will do something according to the video, how long the user played,etc…

Thanks

1 Like
2

Did you solve it? Please, share with us. I’m tryin to user Socket IO on app theme extension, but it doesn’t work.