Вызов функции подключения канала из другого файла js

У меня в фениксе следующая структура папок:

web/
  static/
    js/
      app.js
      script.js
      socket.js

app.js имеет …

import socket from "./socket"

import script from "./script"

brunch-config.js имеет …

files: {
    javascripts: {
      joinTo: "js/app.js"
    }
    // ...
}

script.js имеет …

$('#some-button').on('click', function() {
    connectToChannel(data);
});

socket.js имеет …

import {Socket} from "phoenix"

let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})

function connectToChannel(data) {
    socket.connect()

    let channel = socket.channel("updates:new", {})
    channel.join()
      .receive("ok", resp => { console.log("Joined successfully", resp) })
      .receive("error", resp => { console.log("Unable to join", resp) })

    channel.on("update", payload => {
        console.log(payload);
    })
}

export default socket

… но когда я нажимаю some-button, в консоли браузера появляется следующая ошибка:

Uncaught ReferenceError: connectToChannel не определен

Соединение будет успешным, если я возьму содержимое socket.js и помещу его в script.js, но я хотел бы сохранить их отдельно.

См. также:  как вызвать событие onmouseover для элемента в javascript?
Понравилась статья? Поделиться с друзьями:
IT Шеф
Комментарии: 1
  1. benomatis

    Функция connectToChannel является локальной для файла, в котором она определена. Ни api.js, ни script.js ее не видят.

    Вы можете экспортировать его из socket.js и передать в app.js, примерно так:

    // socket.js
    
    import {Socket} from "phoenix"
    
    let socket = new Socket("ws://example.com/updates", {params: {"auth-token": "AUTH-TOKEN"}})
    
    function connectToChannel(data) {
        socket.connect()
    
        let channel = socket.channel("updates:new", {})
        channel.join()
          .receive("ok", resp => { console.log("Joined successfully", resp) })
          .receive("error", resp => { console.log("Unable to join", resp) })
    
        channel.on("update", payload => {
            console.log(payload);
        })
    }
    // export the function too
    export {socket, connectToChannel}
    
    
    // app.js
    import {socket, connectToChannel} from "./socket"
    
    import script from "./script"
    
    // pass the fn explicitly
    script(connectToChannel);
    

    И, наконец, оберните script.js в функцию, которая получает connectToChannel:

    export default function(connectToChannel) {
      $('#some-button').on('click', function() {
        connectToChannel(data);
      });
    }
    

    Я получаю Uncaught TypeError: (0 , _script2.default) is not a function в строке в app.js, где написано script(connectToChannel); и Uncaught TypeError: connectToChannel is not a function в строке, которую я вызываю эту функцию. person benomatis; 30.03.2016

    Вы экспортировали эту функцию по умолчанию из script.js? Вы экспортировали export {socket, connectToChannel} из socket.js? Вероятно, вы что-то упустили, потому что это должно сработать. Я просто вставил эти три файла в пустое приложение для позднего завтрака, и оно работает. person benomatis; 30.03.2016

    извините, где вы сказали в своем ответе, что я должен был экспортировать по умолчанию эту (какую?) функцию? person benomatis; 30.03.2016

    Я начинаю думать, что мне, вероятно, не хватает того, где и как script(connectToChannel); должен использоваться … я просто добавляю его в app.js после того, как я импортировал? это не очень понятно, поскольку вы добавили код в один и тот же блок, а некоторые из них должны быть в разных файлах … person benomatis; 30.03.2016

    Ага, это должно войти в app.js. Мне не удалось разделить блок, но я добавил комментарий в блок, где начинается app.js. В последнем абзаце ответа также говорится, что script.js экспортирует функцию, которая получает connectToChannel. Это один из способов добиться этого. Другой вариант — оставить script.js в основном как есть, но добавить import {connectToChannel} from "./socket" вверху person benomatis; 30.03.2016

    хорошо, я мог бы заставить его работать, следуя вашему совету, большое спасибо за вашу помощь! person benomatis; 30.03.2016

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: