讨论： QWebChannel中，js获取到的Signal存在差异

[Singein]

老哥，想更你讨论一下下面这种情形，如若你知道些什么，还望赐教一二：
QWebChannel允许我们JS和PyQt之间使用信号与槽进行通信，但是我发现一个很奇怪的问题：
一个button，设置其点击的槽函数为发送我们的信号，该信号将在qwebchannel.js中进行接受处理：

    this.transport.onmessage = function (message) {
        var data = message.data;
        console.warn(data);  // 我们在这里把消息数据打印出来
        if (typeof data === "string") {
            data = JSON.parse(data);
        }
        switch (data.type) {
            case QWebChannelMessageTypes.signal:
                channel.handleSignal(data);
                break;
            case QWebChannelMessageTypes.response:
                channel.handleResponse(data);
                break;
            case QWebChannelMessageTypes.propertyUpdate:
                channel.handlePropertyUpdate(data);
                break;
            default:
                console.error("invalid message received:", message.data);
                break;
        }
    }

然后奇怪的问题来了：
图形化界面对Button点击，执行槽函数，槽函数中发送相关信号：

js: {"args":[""],"object":"agent","signal":5,"type":1}

一切都很正常。

但是如果我直接在代码中对button对象执行button.click()：

js: {"data":{"agent":{"methods":[["deleteLater",3],["data_pack_received",6]],"properties":[[0,"objectName",[1,2],""]],"signals":[["destroyed",0],["send_data_pack",5]]}},"id":0,"type":10}

这里的信号就被标记为被破坏了，然后js就无法正常的进行我们的回调函数了。

[Singein]

var QWebChannelMessageTypes = {
    signal: 1,
    propertyUpdate: 2,
    init: 3,
    idle: 4,
    debug: 5,
    invokeMethod: 6,
    connectToSignal: 7,
    disconnectFromSignal: 8,
    setProperty: 9,
    response: 10,
};

这里列举了所有消息的类型，对应到上面json中的type字段

[892768447]

emmm，暂时没弄懂你的问题，不过我写了一个与JavaScript交互的例子可以看看

[Singein]

非图形化界面的点击， 直接调用button的click()方法， javascript将会把信号识别为 response，无法正常的进行回调。上面我有贴出 这种情况下的实际的js收到的json字符串。

[892768447]

非图形界面是？能否提供一个测试demo代码

[Singein]

https://github.com/Singein/pvq 不好意思前两天临时有事，代码没能来的及加。
这个链接是我整理好的Demo代码，你试着理解一下我说的问题。

[892768447]

我测试日志 如上图。看了下代码。大概知道了。你是用Render类里的register_slots来注册，只是用dispatch函数来执行注册了的self.slots[slot](data)方法

其实这样很麻烦了，因为可以直接访问对象和方法，你的思路是通过传递json字符串过去解析来调用函数

不如直接在Agent类中定义各种信号槽，这样把agent提供给js，就可以互相调用了

class Agent(QObject):
    send_data_pack = Signal(str)
    button1_clicked = Signal()     # 按钮点击
    # ....

[892768447]

4393c43#r33342013

4393c43#r33342009

[Singein]

em，你说的关于agent的那块很有道理，感觉自己过度设计了。但这块不是我提问的重点，
我就想知道你程序一开始运行，在init_connection中的btn.click()触发的信号，js能正常收到不，上面看你的似乎是正常的，但你给我的答复重点不在这上面，我想找你确认下

[892768447]

首先这里你要明白一个问题，当你setWebChannel后只是把这个通道打开了，但是此时由于QWebEngineView 是一个独立的进程（不阻塞后面的代码执行），同时运行了self.ui.btn.click()代码发送信号，此时信号发送出去了，同时网页那边可能才渲染完成后才会执行

channel.objects.agent.send_data_pack.connect(function (str) {
                    document.getElementById("div").innerHTML = str
                });

这两者之间是异步的，导致了信号错误。

增加加载完成信号

        self.slots = None
        self.ui.webEngineView.loadFinished.connect(self.pageLoaded)
    
    def pageLoaded(self):
        print('page load finished')

    def init_channel(self):
        self.ui.webEngineView.load(QUrl.fromLocalFile(index_html_path))
        self.agent = Agent(self)
        channel = QWebChannel(self.ui.webEngineView.page())
        channel.registerObject("agent", self.agent)
        self.ui.webEngineView.page().setWebChannel(channel)
        print('init chanel end')

我加了浏览器加载完成信号

init chanel end
Button Clicked!
Signal Sended!
page load finished
js: {"data":{"agent":{"methods":[["deleteLater",3],["data_pack_received",6]],"properties":[[0,"objectName",[1,2],""]],"signals":[["destroyed",0],["send_data_pack",5]]}},"id":0,"type":10}

[892768447]

你如果是想修改页面内容并显示，可以先 display: none 整个网页，然后等加载完成信号发出后，执行模拟按钮点击，同时显示网页display: block

[Singein]

这个你倒是提醒了我！我之前以为是信号与信号之间跨了线程，联想到C++/Qt中跨线程的信号与槽之间存在限制，但是我在Python里都打印除了线程ID，发现实际上PyQt的信号发送和JS的信号接受处理都在同一个线程。而且我同样也做了loadfinished的处理，并不奏效。现在我明白了，WebView的渲染实际上和Qt的UI进程是同一个进程，loadfinished也并不是指web页面完全加载完成，可能诸如JS加载之类的就交给Chromium内核去做了，所以在loadfinished的里面实际上也无法准确的等到所有加载都就绪。我们如果去另一个线程里等待一段延时，信号就可以发送成功了。

class MainWindow(Render):
    def __init__(self):
        super().__init__()
        self.init_connection()

    def init_connection(self):
        self.ui.btn.clicked.connect(self.btn_clicked)
        # 这里我在初始化的时候直接调用一次 btn的click()方法，模拟点击操作
        # 注意观察JS的输出

    def send_signal(self):
        time.sleep(1)
        self.ui.btn.click()

    @Slot()
    def btn_clicked(self):
        print('Button Clicked!')
        self.agent.send_data_pack.emit('Hello From PySide ~')
        print('Signal Sended!')


def say_hello(data):
    print('Hello, %s' % data)


if __name__ == "__main__":
    app = QApplication(sys.argv)
    w = MainWindow()
    w.register_slots({
        'say_hello': say_hello
    }),
    w.show()
    t = threading.Thread(target=w.send_signal)
    t.start()
    sys.exit(app.exec_())

如下是输出，虽然目前还不清楚为什么第一条type为10的response为什么依然会出现，但是至少我们现在搞清楚问题所在了

js: {"data":{"agent":{"methods":[["deleteLater",3],["data_pack_received",6]],"properties":[[0,"objectName",[1,2],""]],"signals":[["destroyed",0],["send_data_pack",5]]}},"id":0,"type":10}
Button Clicked!
Signal Sended!
js: {"args":["Hello From PySide ~"],"object":"agent","signal":5,"type":1}

[892768447]

1、可以用QTimer.singleShot(2000, self.ui.btn.click)来做主动延时调用即可
2、"type":10 对应QWebChannelMessageTypes.response 可能是需要处理什么东西
3、可以把qwebchannel.js里的有关地方都打印一下。看看正常发送信号传递的数据是什么