从套接字接收消息时，Vue.js 数据未更新

Posted 2023-02-16

【中文标题】从套接字接收消息时，Vue.js 数据未更新

【英文标题】：Vue.js data not updating when receiving message from socket

【发布时间】：2020-09-20 16:35:34

【问题描述】：

我正在尝试设计一个 vue.js 应用程序，该应用程序在从套接字接收到“new_state”消息时更新有关游戏状态的数据。套接字是使用 django 通道实现的。

这就是代码的样子：

const ws_scheme = window.location.protocol == "https:" ? "wss" : "ws"

const gameSocket = new WebSocket(
    ws_scheme +
    '://'
    + window.location.host
    + '/ws/play/'
    + game_id
    + '/'
)
    let vue = new Vue(
        el: '#app',

        data: 
            current_turn: 0,
            last_turn: -1,
            current_card: 0,
            last_card: -1,
            number_of_stacked_cards: 0,
            last_amount_played: 0,
            won_by: -1,
            my_cards: [],
            other_players_data: ,
        ,

        created() 
            gameSocket.onmessage = function(e) 
                data = JSON.parse(e.data)
                this.current_turn = data.state.current_turn
                this.last_turn = data.state.last_turn
               // ... update the other data
            ;
        ,
    );

当我收到消息时，记录数据表明我收到了正确的信息。但是，如果我在收到消息后输入vue.current_turn，它仍然是0，而不是新值； data 对象的所有其他成员都相同。 我尝试使用vue.current_turn = data.state.current_turn，它确实以这种方式工作，但显然它应该与this 一起工作。

我的代码有什么问题？

一般来说，完成我所追求的最佳方式是什么，即在从套接字接收消息时更新内部数据变量？

我必须不使用 socket.io 库，频道不支持它。

【参考方案1】：

问题在于 this 指向的任何调用 gameSocket.onmessage，而不是“普通的 Vue this”。

要解决此问题，您可以在gameSocket.onmessage 上方执行let self = this 并在其中使用self。

【讨论】：

谢谢！这很明显，但不知何故我错过了。关于我从套接字消息更新对象状态的一般方法，是我使用最好的方法还是有什么更好的方法？

没问题，这发生在我们所有人身上:) 是的，我认为您用来更新状态的一般方法很好。如果您愿意，可以将其模块化，使用单独的函数进行更新，然后将该函数分解为子函数以使代码清晰。例如。 updateMessage(dataFromSocket) 然后将其分解为 updateThisPartOfTheMessage 和 updateThatPartOfTheMessage。但这并不是 Vue 特有的，只是模块化的一般编程实践。在 Vue 组件中，这些函数位于 methods

当然可以。祝你好运！

我完全困惑为什么我的 var 在通过套接字发射接收数据后没有更新，虽然我的代码略有不同，但这绝对有效，我也忽略了“this”指向改为套接字.. 感谢@AdamZerner

对我来说同样的问题......我在套接字 onmessage 中分配了一个变量，而不是在我的数据块中...... ughhhh ......非常感谢，@AdamZerner !