Как исправить ошибку «io is not defined» при внедрении кода?

Question

[Elvis]

Есть приложение для хрома. В нем я добавляю на страницу возможность передавать данные ко мне на сервер с помощью socket.io
На стороне клиента делаю следующее:
Внедряю библиотеку в head

let sioscript = document.createElement('script');
sioscript.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js');
let hh = document.querySelector('head');
hh.appendChild(sioscript);

Далее внедряю функцию коннекта и запускаю её со страницы

function wsoc(){
    socket = io.connect('http://blablabla.ru/', {path: '/ws/'});
}
let InjectFunction = function(PageScriptSpace, func) {
    PageScriptSpace.innerHTML += func;
}
let RunFunction = function (PageScriptSpace, func_name){
    PageScriptSpace.innerHTML += func_name+'();'
}
PageScriptSpace = document.createElement('script');
InjectFunction(PageScriptSpace, wsoc);
RunFunction(PageScriptSpace, 'wsoc');
h = document.querySelector('head');
h.appendChild(PageScriptSpace);

Но при загрузки страницы пишет ошибку "io is not defined".
далее если я в консоли пропишу wsoc() - то всё сработает.
Почему данная ошибка выскакивает, если я изначально добавляю саму библиотеку? Причем ставил брейкпоинт на строке запуска коннекта и смотрел на страницe наличие библиотеки и она уже там была.

Answer 1

[SagePtr]

После того, как внедряете тэг script в head, вы ждёте, когда он загрузится? Или сразу пытаетесь работать с переменной, которая в нём определена?

Comments

[Elvis]

с момента внедрения и до момента использования нет таймаутов, но между ними идет еще внедрение с полтора десятков функций, то есть какие то миллисекунды проходят. думаю что это мало, но как сделать чтобы дожидался скрипт загрузки? ставить while true пока не получится достучаться до переменной? ну это такое... это же будет фриз страницы.

[SagePtr]

Elvis, на событие load, к примеру, повесить

[Elvis]

сейчас вставил вызов функции коннекта не сразу, а прямо перед тем как идет первое использование сокета - заработало. думаю этого вполне хватит всем. спасибо что навели на мысль!

[SagePtr]

Elvis, может и не хватить, зависит от того, какой у пользователя интернет

[Elvis]

SagePtr, попробовал вот так:

function loadScript(src, callback) {
            let sioscript  = document.createElement("script");
            sioscript.setAttribute("src", src);
            let hh = document.querySelector('head');
            hh.appendChild(sioscript);
            sioscript.addEventListener("load", callback);
        };
        
        loadScript("https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js", function(){
            console.log("loading is done");
            wsoc();
        });

и всё равно ошибка "io is not defined" после строчки в консоле "loading is done"

[SagePtr]

Elvis, а если не сразу делать, а на следующем тике?

loadScript("https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js", function(){
   console.log("loading is done");
   setTimeout(wsoc, 0);
});

[Elvis]

SagePtr, сделал инжект скрипта, после с десяток других скриптов, а после вызов loadScript - сработало. но будет ли срабатывать с медленным инетом? надеюсь что да. ну если что - напишут пользователи жалобы, буду думать еще. премного благодарен

Answer 2

[Дуболом Одноклеточный]

Так создай переменную io и присвой ей require или Import

const io = require("socket.io");
// или
const io = import io from socket.io;

Или как у вас там называется функция socket'a

Comments

[Elvis]

const io = require("socket.io");
А тут мне нужно прописать полную ссылку на библиотеку? типо:

const io = require("https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js");

а с этой строчкой вообще не понял как работает это на стороне клиента
const io = import io from socket.io;

[Elvis]

Да и у меня и не NodeJS используется. это же подключение модулей, верно? на клиенте же не используется так.

[Robur]

Elvis, на клиенте тоже так можно, но нужен или бандлер или поддержку модулей в браузере
Но так как вы делаете - тоже подойдет, у вас просто функция wsoc вызывается раньше чем загрузится скрипт socket.js.io, разбирайтесь почему